Redesigning the information architecture
The Challenge:
WURRLYedu’s student iOS app was in desperate need of a redesign in order to improve usability.
The iOS build was frankensteined from the Android build and many of the interactions and overall structure did not align with Apple’s human interface guidelines, or make sense on the iOS platform.
We also discovered through customer feedback that users had trouble finding information and navigating between different sections of the app.
The solution:
Update the app to be improve navigation and be consistent with Apple Human Interface guidelines.
how i helped
Content strategy
Information architecture
Low and high fidelity prototypes
the team
I worked with a fellow designer and an iOS engineer on a solution.
Previous Design - Usability Issues
We started by taking an audit of the key usability issues from the existing iOS app. Here’s what we found:
Hierarchical Navigation
To go to another destination, the user had to retrace their steps or start over from the beginning.
For example, if the user was in Alex’s Class > Assignments but wanted to view Assignments in the Disney classroom they would have to go back to the classroom menu, select the Disney class, and then navigate BACK to assignments.
Context and Clarity
Too many unrelated decisions existed on a single modal. The background was also opaque and blurred which prevented users from seeing the content the action referred to.
Action Buttons and Real Estate
The action button on bottom of screen took up (precious!) screen space, causing other elements to be moved to less natural places or required unnecessary scrolling.
Redesign goals
Collaborative Workshop
I held a workshop with the iOS engineer and a fellow designer to work through the information architecture. Our main problem was the amount of content on the app in comparison to the 5 key spots on the tab navigation. This constraint forced us to think about what sections were the most important.
After our workshop we landed on 3 potential versions. I mocked these up and listed the tradeoffs of each option before sharing them with our stakeholders along with the team’s recommendation.
PAPER prototype
After solidifying the information architecture we moved on to a paper prototype to think through the remaining screens. I choose a paper prototype because:
It was fast and we had a 2 week timeline.
This was more of a content organization exercise vs creating brand new functionality. The basic functionality of the app remained the same.
I worked with another designer and collaboration was easier with physical elements to move around and test options.
We presented the recommendations vs the current design in a side-by-side comparison in order to gain buy-in from key stakeholders.
Final Solution - Key Screens
Project Learnings
Understand design impact on product and collaboratively agree on a direction - doing this allowed us to get to a feasible solution as a team.
Balance platform specific guidelines with brand aesthetic - we made conscious decisions about choosing when a design pattern or content structure was iOS recommended while keeping in mind consistency across our other platforms.