We sketched the main funcionalities, navigation and interactions with Invision Freehand, and collaboratively refined them with stakeholder and key users.
Building the concept
Sketch of the main areas and interaction
The wires defined most of the UI language, but we had several iterations and variations of the visual design.
Visual design
Different cards for different meanings. Took
a while to agree on which to use :)
Landing page design evolution
The full app was wireframed inan Invision project, so that we could figure out the real flows and how they were perceived.
The wires
Full wireframe project to test in real devices
For the first release the app had 2 main areas and 5 core functionalities. In Release 3, just three months later, the app had 7 main areas ans 17 core functionalities + 32 complementary functions. How do we handle this evolution? How does it affect the navigation model?
We didn’t want users to learn everything from scratch (different navigation models, action models, accesses) for evey relase, so we figured out a hybrid navigation model that helped users understand navigation.
The main navigation is held with a BottomBar navigation. In Release 1 just 2 areas and the Profile would be there. In Release 2 the 4 main areas and the Profile will be there. And in Release 3 the last of its options will be a “More” menu, that will launch a popover with the rest of the areas.
Some areas that in earlier releases were hosted at first level may now appear in the “More” popover (due to relevance and priorization), but it will be the only change users may feel. From there, everything is perceived as “organic growth”.
The organic evolution of the main navigation model
“The app will go from low functionality to high functionality within 3 months. We need to handle evolution in a way it doesn’t disturb users”
The challenge