Image credit: Jennifer Zamora
Considering information architecture.
According to the Cambridge Dictionary, Information architecture refers to “the process of designing and organizing websites so that users can easily find the information they want.”
Despite implementing revised information architecture on a number of occassions in my working life, this week’s content has introduced the term to me. I’ve taken some time to think about why I haven’t stumbled across the term before now, and I think that it is because I’ve not yet encountered a challenge that has required me to stray from conventional navigation.
When I overhauled the website at a previous role, most of my designs were founded in competitor analysis. Most of the agencies operating in that region had remarkably similar architecture. Following the convention of the industry, my navigation was boiled down to ‘home’, ‘about’, ‘services’, ‘meet the team’, ‘case studies’, and ‘contact’. Fairly simple, but the job didn’t demand any further consideration for architecture. With that being said, the overhaul project was still successful.
Steve Krug, 2014, p.64, compares the navigation of digital products to the navigation conventions in physical spaces. Using the example of missing page numbers in a printed magazine, he encourages the reader to imagine how frustrating it can be when a navigation convention is broken.
I’m fairly happy with my approach to that website overhaul. My decisions around the information architecture were based in data, and I harnessed convention in the navigation.
In more accurate words, I looked at what everyone else was doing and copied it.
The biggest weakness of my redesign was that it wasn’t deliberate. I’ve come to realise in the last 5 weeks that there’s a distinction between producing good UX and producing intentional UX. David McCoy, 2018, identified 5 requirements of a UX designer that effectively captures this distinction. A good UX Designer should:
1. understand the design problem they are solving
2. be able to explain their rationale for a design
3. have user research to back up their claims
4. put more focus on the user than on tech trends
5. receive feedback on designs from anyone, take it, and measure the validity of that feedback
Navigation in material UI.
Since completing my wireframes last week, I have made the decision to build my prototype as an android app, incorporating Material design principles. I’m more familiar with the conventions of android than iOS, so using material UI should allow me to better engage with this module’s learnings in deliberate practice (Ericsson, 1993).
According to Material design’s documentation, a ‘bottom navigation’ would be an appropriate component to house my prototype’s feature set. The combination of a bottom navigation and tabs comes with the warning that they “may cause confusion, as their relationship to the content may be unclear.”
Reviewing the guidance set out by Neilsen Norman, 2018, I don’t think a card sort exercise would be the right tool to validate my navigation structure. It seems that a card sort would be more suited to grouping larger sets of content that a user would likely browse; product types on an e-commerce platform, for instance.
Instead, I believe a more appropriate exercise would be first click testing (Usability Hub). I’ll carry out first click testing with an early digital iteration of my prototype, before I apply any visual design. That should help me be sure that my navigation won’t confuse my users.
Wireframing an onboarding.
In my competitor analysis, I was impressed by Strava’s onboarding process. It was coherent, concise, and aesthetically pleasing. The animations were satisfying, and it effectively introduced me to the app’s feature set.
Even better, one of Strava’s product designers, Olia Brulia, 2019, reflected upon their approach to designing the onboarding flow in a Medium article. Particular attention was drawn to the story conveyed in the onboarding, “how joining a paid Strava Subscription is going to improve your life”. There’s a comparison to be drawn between this notion and Steph’s, my primary persona’s, desire to improve her life with more positive routines.
My onboarding process would benefit from narrative to convey my intended user journey. To do this, as Strava has done, I have condensed the working feature set from my week 4 post into four key stages of my user journey. Each of these will be represented by a screen in the onboarding:
Screen 1: Track your fitness progress
real-time run stats
post-run breakdown (route, stats, points earned – for self and party)
run records
Screen 2: Share your progress with friends
find and connect with other users
Feed of followed users’ run activities
Screen 3: Party up in remote running groups
Invite other users to a party (run lobby)
accept invites to a party from other users
run lobby VoIP
Screen 4: Earn and spend points on discounted train fares
Points balance
ticket wallet
Purchase train tickets
Screen 5: Account creation and login
List of Figures
Fig. 1: A photograph of my analog wireframe for the onboarding flow.
References
BIRULIA, O. 2019. ‘Creating an Animated Onboarding Experience— Or how we redesigned onboarding for Strava Subscription’ Strava Design [online]. Available at: https://medium.com/strava-design/creating-an-animated-onboarding-experience-19b0363a1326 [accessed 16/05/2021].
CAMBRIDGE UNIVERSITY PRESS. ‘INFORMATION ARCHITECTURE | meaning in the Cambridge English Dictionary’. Cambridge Dictionary [online]. Cambridge: University of Cambridge. Available at: https://dictionary.cambridge.org/dictionary/english/information-architecture [accessed 16/05/2021].
ERICSSON, K. A., KRAMPE, R. T. & TESCH-ROMER, C. 1993. ‘The Role of Deliberate Practice in the Acquisition of Expert Performance’. Psychological Review, 100(3), 363-406.
GOOGLE. ‘Bottom navigation’ Material Design [online]. Available at: https://material.io/components/bottom-navigation#usage [accessed 16/05/2021].
KRUG, S. 2014. Don’t Make Me Think, Revisited: A Common Sense Approach to Web Usability (Voices That Matter). 3rd edn. San Fransisco: New Riders, 64.
MCCOY, D. 2018. ‘Getting Intentional with User Experience Strategy’. Ingage Partners [online]. Available at: https://www.linkedin.com/pulse/getting-intentional-user-experience-strategy-david-mccoy/ [accessed 16/05/2021].
SHERWIN, K. 2018. ‘Card Sorting: Uncover Users’ Mental Models for Better Information Architecture’. Nielsen Norman [online]. Available at: https://www.nngroup.com/articles/card-sorting-definition/ [accessed 16/05/2021].
USABILITY HUB. ‘An introduction to first click testing’. Usability hub [online]. Available at: https://usabilityhub.com/guides/first-click-testing [accessed 16/05/2021].
Skoobin Design 