1. Setting the scene
This week, I've been delving into an area of UX that, being honest, has always slightly daunted me: information architecture (IA). I first came across the term while I was studying for my BCS Foundation Certificate in User Experience.
Essentially, IA is all about 'the big picture' – thinking about "how the user thinks about the product or service as a whole, and how they find information and functionality" (De Voil 2020: 82).
Since my BCS exam focused on theory only, it was difficult to see how the concepts and methodologies for determining the right IA for an experience might be applied to a real-world project. This week's challenge activities have helped me take some of those abstract concepts and use them to start planning how I might divide up and organise the content in my volunteer matching solution.
2. IA 'in the wild'
2.1. Depth of insight: enhancing my practice – searching for real-life IA examples
To start getting a feel for what 'good' IA might look like (and to get some inspiration for my own solutions), I spent some time thinking about the IA of an existing digital experience I needed to interact with this last weekend: The Makers Market website. My goal was to find out when the next market would be held in my local area.
While I found the information I needed fairly easily, I did pick up on a few things that could be done to make the experience a little more user-friendly. I recorded my 'live' thought process in the video below (see Fig. 1), and I've summarised my main takeaways here too:
The 'Find a market' link takes you to a page instructing you to use 'the dropdown links' to find out more about a market. This could be quite jarring for users who don't know what dropdown links are, or don't know where to find them. It means you've clicked on something, then have to hunt around for dropdown links, hover, locate, and then click the right link... possibly one or two avoidable steps in there. An alternative would be to just include the links to the markets on the instructional page itself (as well as having them in the dropdown, for users who are more familiar with this convention).
The page with details about the specific market does say that it's held on the last Sunday of the month, between 11am and 4pm. But it doesn't say when the next one will be (so you have to check your calendar to figure out what date 'the last Sunday of the month' actually is). It'd be helpful to have 'upcoming dates' on this page itself, so you could get all the info you needed in one place.
The '2023 market dates' page lists out the dates and which markets were being held on each – but doesn't provide the times. You also have to scroll to locate the market you're looking for. It'd be useful if these were anchor linked from the top of the page so you could just click a location then it would take you to/display the relevant date.
The 'next market' dates and times could also be shown on the homepage for at-a-glance info about the next things coming up.
Fig. 1: Video exploring the IA of The Makers Market website
The practical nature of the exercise helped me to gain a more concrete understanding of how well-planned IA can facilitate effective 'conversations' between users and interfaces.
According to De Voil (ibid: 83), when we design systems, we need to make sure that "the user always has sufficient information to understand the current state of the conversation and to proceed to the next stage." This reminded me of the stance taken by Janice Redish in my favourite book about UX writing, Letting Go of the Words (2012). When a user interacts with a product, they initiate a conversation with it (ibid: 2). We need to anticipate the kinds of questions they might ask, and prepare appropriate responses that give them "the right information in the right amount at the right time to the right person" (ibid: 102).
Since this is the approach I already apply to my professional UX writing work, understanding IA on a deeper level will also help me make sure the content I create is even more relevant, well-placed, and well-signposted.
3. Onboarding
3.1. Breadth of analysis: exploring key skills and domains – establishing the goals to address in my onboarding journey
Turning to the IA of my project, I started to imagine what the onboarding experience might look like for my users. I've decided to continue building on the 'volunteer matchmaker' experience I sketched out during last week's ideation sessions. I gathered the UX deliverables I've created so far (specifically my affinity mapping notes, user persona, and competitor analyses) and mapped out the key goals my solution needs to meet:
Give users flexible ways to give their time/skills
Make finding volunteering opportunities an enjoyable experience for users
Show users how they will benefit from the experience of volunteering
Foster trust - users need to know that causes they're considering getting involved in are legit/reputable
Help users find causes they care about to foster and leverage emotional connections
Show users the real-world impact of their contributions in a way that makes them feel good about themselves
I found this exercise especially helpful. When looking at each of my UX deliverables individually, I've struggled at times to see how they build upon and feed into each other. Looking at them holistically allowed me to intentionally focus on all the data I've gathered so far and draw out the most salient areas my solution needs to address. It also made me feel quite proud to see what I've been able to achieve so far – and gave me some reassurance that the individual pieces of work I've created so far do form a coherent whole.
3.2. SMART goal: create a voice chart with example messaging for my solution
With these goals in mind, I had a better idea of the kinds of messaging I needed to consider including in my initial onboarding flow, and I was able to sketch out a few potential iterations of both benefit-oriented and function-oriented messages (see Fig. 2) in my (now digital) initial wireframes. This made me realise that I now needed to start thinking about the voice and tone I want to apply across my experience.
Fig. 2: benefit-oriented and function-oriented messaging iterations
Even though we won't cover 'Content' in the formal lectures until Week 10, I'm very much of the opinion that it's never too early to start thinking about UX writing requirements! Over the next few weeks, I plan on creating a voice chart (Podmajersky 2019: 15-35) for my solution, covering guidance on concepts, vocabulary, verbosity, grammar, punctuation, and capitalisation. With this to hand, I can experiment with the tone and phrasing of the written content in my prototype at the same time as iterating on the visual and interaction design elements.
4. Navigation
4.1. Depth of insight: enhancing my practice – exploring navigation
I enjoyed spending some time this week diving a little deeper into the principles and best practices of digital navigation. I'd been wanting to get stuck into Steve Krug's book Don't Make Me Think (2014) for a while, so I decided to start with his chapter on designing successful navigation experiences.
One of the techniques described that I found especially insightful is 'the trunk test' (ibid: 82–83) – the idea that if you were blindfolded, locked in the trunk of a car, driven around for a while, then dumped on a web page, you should instantly be able to tell:
a) What site you're on (from the site ID, or logo)
b) What page you're on (from the page name)
c) The major sections of the site (from the section names)
d) Where you can go from there (from the local navigation)
e ) Where you are in relation to everything else (from indicators like breadcrumbs or visual cues), and
f) How you can search for other areas of the site
This technique provided a lot of food for thought when it came to looking at my project and the navigation solutions I need to account for. In my initial wireframe sketches from last week, I'd roughly drafted a persistent navigation to sit at the bottom of the screen on every page of my application. I hadn't given much thought yet, though, as to which (if any) of these primary sections would be my home. While I don't think I necessarily need a logo or site ID in the top left of every page linking back to a 'home' screen, as is the standard convention for most websites (ibid: 70), I do need to consider which point of the application my users should use as the key point of orientation.
Off the back of this additional research, I spent some time sketching out more detailed solutions, thinking about how users would get from one part of the experience to another (see Fig. 3 below – use the arrows to scroll along). I've deliberately not moved this main, post-onboarding part of the user flow into Figma yet, as I know from past experience that I'll be tempted to start diving into colour, typography, and other stylistic elements prematurely. For now, sketching using pen and paper is allowing me to be more open to the idea that my designs can and should change as I learn how to craft successful and engaging experiences.
Fig. 3: Detailed paper sketches of the main user flow
5. Card sorting
5.1. Self-criticism: struggling with card sorting
While I feel like I've made some good progress on the onboarding and fundamental navigational aspects of my project, I've struggled to get to grips with the use of card sorting to determine the hierarchical arrangement of my content.
I approached the card sorting challenge activity before I'd created my more detailed sketches. This made it very difficult to envisage what kinds of content I might need to include in the main part of the application, meaning I didn't have a clear idea of what content items to ask people to group.
Instead, I focused my card sort on the information I would show to users when they were browsing volunteering opportunities. I based the card items on insights from my user interviews (e.g. 'I'd need to know whether there's (free) parking', 'I'd want to know whether I'll gain a qualification from volunteering'. I then asked participants to group the information types into the closed categories of 'Need to know', 'Nice to know', and 'Don't need to know'.
After completing the card sorting activities created by some of my coursemates, I felt quite deflated, and was convinced that I'd 'done it wrong' by not using the individual page categories of my app as my card labels. However, on reflection, I'm pleased that I've been able to use the closed sort as a way to prioritise the messaging hierarchy of my content.
My dendrogram results (see Fig. 4) show a clear consensus among participants on what information is 'Need to know' versus nice to have or non-essential, meaning that I can make sure the essential information is most prominent when I communicate it in my designs. (I was also very glad that I'd already briefly come across dendrograms in my day job, so could interpret the results a little more easily).
Fig. 4 Dendrogram results from closed card sort on messaging hierarchy
5.2. SMART goal: seek feedback sooner
Once again, my tendency to self-criticise meant that I risked disregarding information that has actually helped me establish a clear way forward for a key part of my designs. To avoid this in future, I plan to ask my peers and tutors for advice on areas where I'm struggling much earlier in the process. I'm planning on joining one of the upcoming small group sessions to ask for feedback on my detailed sketches, which I'll then use to make further refinements before diving into digital prototyping.
5.3. SMART goal: conduct a second card sort for my main user flow
Now that I have some more detailed sketches for my project, I would like to conduct a second card sort over the next couple of weeks to validate the naming conventions and ordering of the information for the main user flow (i.e. post-onboarding). I'd like to try an open card sort this time, to gain user insights into how I might name the sections of my global navigation most intuitively. I'd also like to watch the 'Card sorting' webinar available on Optimal Workshop before conducting my second round of research, so that I can make sure my results are as reliable as possible.
6. Conclusions
As I said in my introduction, 'information architecture' has always struck me as a daunting, complex task. While I'm still convinced of its complexity, this week's activities have helped me see that that complexity isn't insurmountable – as with anything, if you chunk it up and make use of tried-and-tested techniques, you can find useful and relevant insights relatively painlessly.
6.1. How satisfied do I feel with my work this week?
1 = Very satisfied , 2 = Quite satisfied, 3 = Neutral, 4 = Quite frustrated, 5 = Very frustrated
Start of week (pre-activities): 4 – nervous, quite overwhelmed, daunted by the topic
Warm-up activity (Maker's Market IA): 2 – reassured; encouraged by the overlaps between 'good information architecture' and 'good content design'
Onboarding: 4 – really enjoyed the copy ideation involved in mapping out 'benefit-led' and 'function-led' user flows; excited to craft a voice chart for my experience
Navigation: 4 - useful to learn about web navigation conventions; pleased I've now mapped out a more fleshed-out version of my main user flow, so that I can test it over the coming weeks
Card sorting: started 5, ended 2 – felt very out of my depth and unsure, but ultimately am very glad that I persevered and gained some useful insights. I want to refine my skills in card sort creation and analysis
7. References
DE VOIL, Nick. 2020. User Experience Foundations. BCS, The Chartered Institute for IT.
KRUG, Steve. 2014. Don't Make Me Think Revisited: A Common Sense Approach to Web and Mobile Usability. New Riders: USA
OPTIMAL WORKSHOP. 2023. ‘Card Sorting’ [webinar]. Optimal Workshop [online]. Only available when logged in [accessed 1 March 2023].
PODMAJERSKY, Torrey. 2019. Strategic Writing for UX: Drive Engagement, Conversion, and Retention with Every Word. California: O’Reilly Media, Inc.
REDISH, Janice. 2012. Letting Go of the Words: Writing Web Content That Works. Massachusetts: Elsevier, Inc.
THE MAKERS MARKET. 2023. The Makers Market [online]. Available at: https://www.themakersmarket.co.uk/ [accessed 1 March 2023].
תגובות