Wayfinding in Digital Space

In native OS design, navigation to new screens involves segues: animations that help the user understand where they’re going and where they’re coming from. These animations are subtle, but they communicate a surprising amount to the user. They have become increasingly important in maintaining an intuitive experience. with all of the possible gestural interactions that touch screen devices allow.


The Situation

In the most recent app redesign, 9 designers were working simultaneously on separate sections of the app. We had a common design system which we all worked diligently to uphold and grow together, but the system was lacking standard rules of wayfinding. If we didn’t nail down some solid rules early, it was going to be very easy to lose a common thread of navigation that we communicated to our users.

My Role

I evaluated existing and ongoing work and identified issues with header navigation labels and animation. The goal was to ensure that we are providing users with clear and consistent paths through out the experience. in order to do this, it was important to develop a solid foundation that us designers could refer to as we continued to build out the experience.


Actions Taken

  • Collected an inventory of potential headers types, and defined our navigation labeling system for all possible scenarios.

  • Researched parallel experiences within Amazon, Instagram, Pinterest, and others. These experiences offered breadth and depth in navigation, so were very helpful. The most important finding was that, no matter how far down a rabbit hole, the path back must reflect the path taken in. These segues act as a reincarnation of breadcrumbs. Thank you Hansel and Gretel.

  • Shared documentation with the team for peer buy-in and any feedback for improvement. The intention being to ensure this set of rules was made for the team by the team.

  • Performed the same exercise in dealing with animation between the screens, and created a corresponding document we could all refer to moving forward.

  • Reviewed the existing experience created a list of instances where we were not following our system. I logged these instances, and prioritized fixing with respective the respective teams.

Documentation

segues.png

Results

This exercise and resulting documentation gave us common thread to use in navigation as we continued to build out the experience. The documentation was appended to the existing design system, to be used and referenced by the mobile design team, as well as many other teams as we move to a decentralized contribution model.


Thanks to the Mobile Design Team

Andy Flinders | Evan Gerber | Sam Hong | Damon Jones | An Kang | Jonathan Kardos | Chris Lackey | Dan Murphy | Julia Paranay | Elizabeth Ryan | Marcy Regalado