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 starting with identifying the user problem. In the user research phase, I conducted a 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.

1. Research phase

This project followed a full UX process starting with identifying the user problem. In the user research phase, I conducted a 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.

2.2 Interviews

What came through strongly was the need for clear navigation to assist in wayfinding. Even if stories were good, if it was unclear for a user how to find the stories, those stories would not be read. It was also evident that the relationships between stories were not always clear, and the layout of stories did not always assist in readability. Image and typographic choices, furthermore, were identified as critical factors in the readability and interest of the stories.

Objective:

The competitive benchmark was aimed at helping us know what other comparable storytelling sites were doing, how they were solving problems, and what design patterns were consistently used on these sites. Understanding what was happening on other sites was critical in giving early direction for further user research for our new site. The research focussed on the homepage, contributor pages, story pages, about page, and social media pages to see how images were used, how the text was used, and how the information architecture, navigation, and user flow underlined these decisions.

Results:

  • An inconsistent main menu makes it hard to get to the stories.
  • An overly complex menu it difficult to find stories and features.
  • Having no categories makes it difficult to find stories.
  • Too many similar labels make it difficult to navigate.
  • A somewhat hidden search function makes it difficult to navigate.
  • Individual story pages help focus content and improve readability.
  • Layout, images, and typography can improve readability and interest.
  • Ease of navigation is really important for a site that has many stories.

2.1 Competitive analysis

What came through strongly was the need for clear navigation to assist in wayfinding. Even if stories were good, if it was unclear for a user how to find the stories, those stories would not be read. It was also evident that the relationships between stories were not always clear, and the layout of stories did not always assist in readability. Image and typographic choices, furthermore, were identified as critical factors in the readability and interest of the stories.

Objective:

The competitive benchmark was aimed at helping us know what other comparable storytelling sites were doing, how they were solving problems, and what design patterns were consistently used on these sites. Understanding what was happening on other sites was critical in giving early direction for further user research for our new site. The research focussed on the homepage, contributor pages, story pages, about page, and social media pages to see how images were used, how the text was used, and how the information architecture, navigation, and user flow underlined these decisions.

Results:

  • An inconsistent main menu makes it hard to get to the stories.
  • An overly complex menu it difficult to find stories and features.
  • Having no categories makes it difficult to find stories.
  • Too many similar labels make it difficult to navigate.
  • A somewhat hidden search function makes it difficult to navigate.
  • Individual story pages help focus content and improve readability.
  • Layout, images, and typography can improve readability and interest.
  • Ease of navigation is really important for a site that has many stories.

2.3 Usability tests

What came through strongly was the need for clear navigation to assist in wayfinding. Even if stories were good, if it was unclear for a user how to find the stories, those stories would not be read. It was also evident that the relationships between stories were not always clear, and the layout of stories did not always assist in readability. Image and typographic choices, furthermore, were identified as critical factors in the readability and interest of the stories.

Objective:

The competitive benchmark was aimed at helping us know what other comparable storytelling sites were doing, how they were solving problems, and what design patterns were consistently used on these sites. Understanding what was happening on other sites was critical in giving early direction for further user research for our new site. The research focussed on the homepage, contributor pages, story pages, about page, and social media pages to see how images were used, how the text was used, and how the information architecture, navigation, and user flow underlined these decisions.

Results:

  • An inconsistent main menu makes it hard to get to the stories.
  • An overly complex menu it difficult to find stories and features.
  • Having no categories makes it difficult to find stories.
  • Too many similar labels make it difficult to navigate.
  • A somewhat hidden search function makes it difficult to navigate.
  • Individual story pages help focus content and improve readability.
  • Layout, images, and typography can improve readability and interest.
  • Ease of navigation is really important for a site that has many stories.

3. 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.

3.1 Affinity diagram

The blog will draw casual, advocacy, and research readers. The primary goals of our users are to find and read stories. Overlap in the goals of our users made it possible to create a persona that incorporated ideas into a single user type.

Objective:

In order to start working towards defining specific problems on specific user flows, we still needed to pin down the idea of the user we were designing for. A persona was created to help us understand user needs, experiences, behaviours and goals. This persona would help guide the customer journey map, and subsequent ideation.

Results:

  • A news site has a diverse user base with different content needs.
  • A blog site can be more niche and can have a narrower user base.
  • Our site will draw casual readers, advocacy readers, and research readers.
  • A single person could take on these roles at different moments.
  • The site will be accessed on both mobile and desktop depending on reader.
  • The main users for our site have large similarities in their goals.
  • The user type for the site is focussed on finding and reading stories.

3.2 Persona

The blog will draw casual, advocacy, and research readers. The primary goals of our users are to find and read stories. Overlap in the goals of our users made it possible to create a persona that incorporated ideas into a single user type.

Objective:

In order to start working towards defining specific problems on specific user flows, we still needed to pin down the idea of the user we were designing for. A persona was created to help us understand user needs, experiences, behaviours and goals. This persona would help guide the customer journey map, and subsequent ideation.

Results:

  • A news site has a diverse user base with different content needs.
  • A blog site can be more niche and can have a narrower user base.
  • Our site will draw casual readers, advocacy readers, and research readers.
  • A single person could take on these roles at different moments.
  • The site will be accessed on both mobile and desktop depending on reader.
  • The main users for our site have large similarities in their goals.
  • The user type for the site is focussed on finding and reading stories.

3.2 Customer journey map

The blog will draw casual, advocacy, and research readers. The primary goals of our users are to find and read stories. Overlap in the goals of our users made it possible to create a persona that incorporated ideas into a single user type.

Objective:

In order to start working towards defining specific problems on specific user flows, we still needed to pin down the idea of the user we were designing for. A persona was created to help us understand user needs, experiences, behaviours and goals. This persona would help guide the customer journey map, and subsequent ideation.

Results:

  • A news site has a diverse user base with different content needs.
  • A blog site can be more niche and can have a narrower user base.
  • Our site will draw casual readers, advocacy readers, and research readers.
  • A single person could take on these roles at different moments.
  • The site will be accessed on both mobile and desktop depending on reader.
  • The main users for our site have large similarities in their goals.
  • The user type for the site is focussed on finding and reading stories.

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.

  • Homepage should give an overview of available content, but not be too busy.
  • Employ design patterns for navigational menus, categories, page elements and search 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.
  • The contributor page could give brief info on the author, with links and search to more 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 (do not post full story for social media text – make a prompt or summary with call to action).

Mental models for design

  • The homepage gives an overview of the site.
  • The homepage has a short summary about the site.
  • Stories are kept on the featured stories page.
  • Stories are indicated via headings and subheadings.
  • Stories are grouped according to categories.
  • Each post is by a person, with a specific date, with a specific category.
  • Expect to see all the stories somewhere: on a page or an archive.
  • Access themes via keyword search, tags, categories, and titles.
  • Tags and categories will take you to similar stories.
  • Headings and layout to indicate stories.
  • When you click on a story go to the story content.
  • The story has a bit of info about the story, and a heading, before clicking in.
  • Images and text are clickable to take you to the story.
  • There is contextual information about the project and its members.
  • About us has info dealing with people and organization.
  • The project info is on the project page.
  • Usually copy and paste URL to share the story.

Patterns to incorporate

  • 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.

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