skip to Main Content

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.

Problem statement and recommendations

What came through strongly in the research and analysis of various websites was the need for clear navigation to assist wayfinding. Even if stories were good, if it was unclear for a user how to find the stories those stories would not be read. Another problem that came out strongly was that the relationships between stories were not always clear, and the layout of stories did not always assist readability.

The problem to solve, therefore, was to create a niched blog-type site that has clear navigation to find stories and great page design to make reading stories pleasurable.

I recommended employing design patterns for navigational menus, categories and page elements that would enable an easy passage through the site and a quick way for the reader to find stories of interest. To ensure a great reading experience when on a story page I recommended the balanced and harmonious layout of stories, and the use of engaging but not overwhelming image and typographic choices in stories.

 

  • Homepage should give an overview of available content, but not be too busy.
  • Employ design patterns for navigational menus, categories and page elements that would enable an easy passage through the site and a quick way for the reader to find stories of interest.
  • Enable the story finding via categories, search, or contributor page story lists.
  • Ensure a great reading experience when on a story page with a balanced and harmonious layout of stories
  • Have engaging but not overwhelming image and typographic choices in stories.
  • About organization page could be short with clear sections for overview, people, mission, vision, and a way to read more if interested.
  • Social media posts should be tailored for the platform: Instagram image and text heading composites; Facebook and Twitter should have an image and not too long text with that image.

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?

KPI's to measure success

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.

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.

Back To Top