Overview of project
A research organisation with long-term working relationships with communities needs a website for a new citizen journalism project. The goal was to create a simple website that allows the reader to engage with the project content in an intuitive and pleasurable way. In this case study, I show how the iterative UX research and design process is a systematic and rigorous approach to solving a design problems that can be scaled to fit a project scope and its limitations.
Duration: 2 months
Role & practices
UX Research
UX Design
UX Writing
Tools
Zoom
Google Hangouts
OBS Studio
Pencil, pen and paper
Figma
PowerPoint
Client
Africa Centre for Society & Migration
This is Africa’s leading scholarly institution for research and teaching on human mobility dedicated to shaping global discourse on human mobility and social transformation.
High-level process and methods
Research
Competitive analysis
Interview
Usability test
Analysis
Affinity diagram
Persona
Customer journey map
Design
User flow
Sketching user interaction
Prototype
Medium-fidelity prototype
Interview
Usability test
Handover
Wireframes for developer
Style guide for writers/editors
This project followed a full UX process. The process started with a user research phase using competitive analysis, interviews, and usability tests to gather usability data on user goals, behaviours, contexts, pain points and mental models. During the analysis phase, I employed an affinity diagram, persona, and customer journey map to structure user data according to categories and sub-categories. I used the outcomes of the analysis to create a problem statement and high-level recommendations which guided my designs. I first designed a workflow for a primary use case, then the site’s interaction design using sketching. I used the designs to create a low-fidelity prototype and then a medium-fidelity prototype. After validation through interviews and usability testing, I created wireframes.
Identifying the user problem
Research phase
During the research phase I focussed on collecting data regarding user goals, behaviours, context, mental models and pain points. The entry point into this research was a competitive analysis of four community storytelling websites and two online newspapers. The results from the precedents study informed a set of three interviews with typical users of these types of sites, and usability tests on a selection of the most promising websites.
Precedents in the competitive analysis
- Humans of New York has an inconsistent main menu and no categories
- Humans of Bombay is relatively easy to navigate and uses clear categories
- Pandemic Journaling Project has no story pages, no categories, and is unclear
- The Moth is quite hard to navigate, find stories, find great features, and search
- New York Times is easy to navigate and has layout, images and typography
- The Guardian is easy to navigate, has great layout, images and typography
Conception of the user type
- A news has a diverse user base with different content needs, while a blog can be more niche.
- Identified users of our website have similar customer journeys and are a single user type.
- Readers who find stories or articles online based on their own interests as a pastime.
- Researchers or journalists who are searching for specific types of stories for their work.
The task for the usability test
- Imagine you are in the mood for reading some human interest stories.
- You are specifically interested in reading some stories about [shopping].
- You have gone to [a specific website].
- Where are you in the site? What do you see? and what will you do next?
Analysis phase
During the analysis phase I made sense of pertinent data points. I started this process by structuring the research data through an affinity diagram. The structured data informed the creation of a persona for one user type. With the usability data in a coherent structure I created a customer journey map that plotted a high-level journey through the website for one use case.
Top insights from methods used
- Humans of New York
- Humans of Bombay
- The Pandemic Journaling Project
- The Moth
- New York Times
- The Guardian
Important patterns to emulate
- The site we need to build has a diverse user base: it is a news or blog type site.
- Participants have different content interests, but their user types are similar.
- Users that sometimes read stories or articles online based on their own interests.
Things to avoid in the design
- The site we need to build has a diverse user base: it is a news or blog type site.
- Participants have different content interests, but their user types are similar.
- Users that sometimes read stories or articles online based on their own interests.
Solving the identified problem
Design phase
Guided by the analysis and high-level problem statement, I designed a user flow diagram outlining the key aspects of the screens and actions for one use case. I then started designing the user interface employing labelled sketches that detailed all the desired properties and functionalities of the site according to the user type and flow diagram.
Important patterns used in the design
- Imagine you are in the mood for reading a website that has human interest stories.
- You are specifically interested in reading some stories about [shopping].
- You have found [a specific website] and you are on its homepage.
- What do you do next?
Patterns avoided in the design
- Imagine you are in the mood for reading a website that has human interest stories.
- You are specifically interested in reading some stories about [shopping].
- You have found [a specific website] and you are on its homepage.
- What do you do next?
Prototyping and validation phase
After several iterations, I created a low fidelity prototype followed by a usability test. With some new insights I created a medium-fidelity prototype. After usability testing I made adjustments to aspects of the design.
Discoveries during validation
- Imagine you are in the mood for reading a website that has human interest stories.
- You are specifically interested in reading some stories about [shopping].
- You have found [a specific website] and you are on its homepage.
- What do you do next?
Patterns adjusted in design
- Imagine you are in the mood for reading a website that has human interest stories.
- You are specifically interested in reading some stories about [shopping].
- You have found [a specific website] and you are on its homepage.
- What do you do next?
Handover phase
The last part of the UX was to create a set of wireframes of the final prototype for the developer. I also created a style and layout guide for content creators.
Important insights regarding the wireframes
- Imagine you are in the mood for reading a website that has human interest stories.
- You are specifically interested in reading some stories about [shopping].
- You have found [a specific website] and you are on its homepage.
- What do you do next?
Conclusion
What came through strongly in the research and analysis of various websites was the need for clear navigation and wayfinding. Even if stories were good, if it was unclear to a user how to find the stories those stories would not be read. The choice of patterns for navigational menus, page elements, and the layout of stories all need to work together to ensure an easy passage through the site.
The research started with a competitive analysis of four community storytelling websites and two online newspapers. The research phase created unstructured qualitative data about what worked or did not work on precedent sites in terms of the goals, contexts, behaviours, mental models, pain points of potential readers. The results from the precedents informed a set of three interviews and usability tests. What came through strongly in the various websites was the need for clear navigation. Even if stories were good, if it was unclear how to find the stories they would not be read. The choice of patterns for navigational menus, page elements, and the layout of stories all need to work together to ensure an easy passage through the site.