Problem + Goal

Too many students are dropping out of college X (stakeholder). The dropout rate at College X is 62%. The drop out at College Y rate is 45% The VP of Enrollment wants to compare competitive data on a mobile device (a dashboard) on the go anytime. The experience needs to be at least 2 screens. 

Data

 College X College Y
 Avg GPA 2.97  3.07
 Avg Freshman Age 20.2  19.2
 Average Age in Dorm  21.2  20.2
 Avg Income (1 parent/2 parents) $75k/$105k  $65k/$90k
 Cost of University $28k  $15.9k

Wireframes — Round 1

img_5637

This is my first attempt at sketching an idea for the app. I only had about 15 minutes of class time to come up with these wireframes, which were then critiqued by my professor. I aimed to keep the design as simple as possible, by having the user enter an institution name, then look at a side-by-side view comparing his or her university to a second. Clicking on one of the topics would take the user to another screen that showed his or her institution compared to other institutions.

My professor said, “You’re making me think. Don’t make me think.”

Wireframes — Round 2

wireframe-version2.pngAfter the initial round of wireframing, I had a few days to mull over my design decisions and figure out how to further simplify the design. I changed the text entry on the homepage to a dropdown menu. On the second page, I removed the buttons at the bottom of the page and instead added “View details” buttons in every section. I added a back button at the top of the app that would enable users to navigate back to the home screen. I also added a dropdown so users could switch schools right in that screen instead of having to navigate back to the home screen. On the third screen, I made it possible for users to change which variable was displayed in the bar chart, and I removed the option to click two bars to compare new schools. I made the bar charts horizontal so I could add in the names of the other universities without sacrificing space.

Prototype

mockup-version2

For the final prototype, I made a few more minor tweaks to the wireframes I had previously designed to improve content accuracy. I changed the page titles on the second and third screens, and I edited the “view details” text to “compare to peer institutions.” I also added a “new comparison” button on the bottom of the bar chart screen. Finally, I decided the bar chart screen should only highlight the user’s institution.

Prototype

Education app

I created the second round of wireframes and mockup in Adobe Experience Design. The graphic used on the home screen is from freepik.com.

And for fun, here’s a second, alternate prototype I created — just to try something different:

mockup-2

Leave a note

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s