Skip to content

Designing a responsive site for a citizen journalism project

Improved user speed and accuracy to find and read relevant stories and project information.

“The design is effective. It works in terms of clarity and ease of being able to follow and understand stories. I don’t feel like I have to wade through enormous amounts of eye candy and stuff to get to a story. The stories are listed.”

Usability test participant

1. Overview of project

I helped an organisation create a responsive website for an online citizen journalism project. My work increased the speed and accuracy of users finding relevant civil society stories. The improvements focused on the information architecture, navigation, and page layout on the critical user flow. I researched, designed, and tested the new website’s user experience for a build using a visual editor. I worked in collaboration with the project manager.

Duration: 3 months
Final project:

1.1 Team members

Quinten Williams

Project Manager:
Elsa Oliveira (ACMS)

1.2 My practices

UX Research
UX Design
UX Writing

1.3 My tools

Google Hangouts
OBS Studio
Pencil, pen and paper

1.4 Client and background

Africa Centre for Society & Migration (ACMS)

Housed at the University of the Witwatersrand, the ACMS is Africa’s leading scholarly institution for research and teaching on human mobility dedicated to shaping global discourse on human mobility and social transformation. The Method:Visual:Explore (MoVE) project at the ACMS employs arts-based methods to research society and disseminate information to the public. Narratives in a time of crisis is a MoVE project that shares stories from migrant citizen journalists. These true stories will rarely appear in established online newspapers but can help inform those that do.

1.5 High level process, methods and outcomes

I started with research and analysis, then moved on to design and prototyping. I made several iterations, went through validation, and finalised the design for handover. Throughout the period I would revisit previous phases if further clarification or detail was required.

Competitive benchmark
Usability test

Affinity diagram
Customer journey map

User flow
Responsive interaction design

Usability test

Content creation guide

Design target

A reader: Seeks relevant, specialist content on specific topics and has access to and uses mobile and desktop devices. Wants to find and read stories, and get some organisation and people information, but may not spend much time on the website.

Key problem

Finding stories and information was difficult: Precedent websites had issues with information architecture, navigation, filters, search, and page layouts that made it hard for users to consistently find the story pages they were looking for.

Design goal

To find stories: Make it quick, easy and intuitive for the reader to find and read interesting and relevant stories.

To find organisation information: Information about the organization, authors, project members, and ways to contact the organisation should also be readily available.

Key solutions

Improved information architecture: Focused on critical information architecture and the path to the stories and project information. Simplifying information architecture and user flow around Our stories in the main menu allowed readers to click directly to the Story list page and not be distracted by other links to pages like the Media pack.

Incorporated patterns and mental models from precedents: Used aspects of homepages, main menus, lists, categories, and search patterns that helped move users to stories, and help them through stories such as story cards, story lists, meta info, a simple search function, and story page layout.

Improved navigation and search: Streamlined access to stories by reducing menu and in page navigational choices and simplifying search, filters, categories and tags to increase user focus on the stories while still making project information accessible.

Improved page layout and image-text relationships: Ensure images, titles, labels, body text and meta information works in a coherent page layout that guides the reader to and through the the stories.

Allowed for website growth: Information architecture focussed on the primary content of stories, aided by navigation, filter, search, and page layout, allows the site to expand in total number of stories without sacrificing the user experience.


Usability: Increase in speed to stories by about 160% (Usability test / design validation result)

User Engagement: Click-through rate, page views, and time spent on site (gathering data)

2. Research phase

I researched the user goals, contexts, behaviours, mental models, pain points, and good interaction points of readers who frequent online newspapers and blogs. I identified standard design patterns used on precedent sites.

2.1 During project scoping we identified websites of projects and newspapers that serve stories to the public in a way that resonated with the idea of citizen journalism and have potentially overlapping reader-bases.

The six existing story-based projects and news organisations we looked at as part of our project scoping.

The project manager and I identified seven story-based websites and online newspapers and discussed the types of stories the new website would hold. This preliminary research helped frame the kind of users the website could draw: people in advocacy, people interested in civil society issues, researchers, and journalists. Our preliminary research also helped focus further research on design patterns and problems that occur on existing assets. The precedents were: the Pandemic Journaling Project, Humans of New York, Humans of Bombay, The Moth, The New York Times, and The Guardian. We also looked at Izwi Lethu, one of our own past newsletter writing projects.

2.2 The competitive benchmark helped determine that an important usability dimension of the website is the intuitive user flow to stories and project information.

The first images are an example benchmark for one of the sites. A line chart of the relative benchmark scores and insights follows.

I conducted a competitive benchmark on precedents in terms of heuristic principles. It enabled me to identify design patterns and usability issues. I looked at the homepage, story list pages, story pages, about us page, and contact us page. I focussed on information architecture, user flows, navigation, imagery, and typography. I used screenshots and PowerPoint notes. My key question was: “Does it allow the problem to be solved and enable user flow for a specific user?” This work created a baseline of precedents. I found that the intuitive user flows to stories, relationships between stories, page layout, image use and typography affected usability.

2.3 The interviews showed that readers used both mobile and desktop devices, and that their decision making process for finding and reading stories that are relevant and interesting involved quick judgements made on headers, blurbs, and images.

The interview script focused on key questions regarding the user, their context, behaviour and past experiences.

I conducted remote interviews to find out online reading habits. I wanted to know what story-based content users read and how they accessed it. The interviewees were active in a range of industries and accessed the internet through computers, tablets and smartphones. The respondents read topics relevant to their job or personal interests. They found the stories through recommendations, web searches, social media and direct messages. Respondents judged titles, subheadings, blurbs and images before clicking on a link. They said they usually only click on content that has relevance and interest to them. I recorded the remote interviews using OBS Studio and Google Hangouts, and made hand-written notes during the interviews. Afterwards, I made detailed codified notes using Excel and VLC.

2.4 The usability tests showed that users sometimes had difficulty finding interesting and relevant stories as a result of issues like inclarity and complexity in the information architecture, user flow, navigation, search, and page layout.

A moment while testing a precedent website where a user was searching for the location of the stories.

I ran remote usability testing with users who read online news, blogs, and stories. It enabled me to understand and benchmark user experience on precedent story-based sites. The usability tests focused on navigation through the site: to find and choose stories and information. I also looked at user goals, behaviours, mental models and related design patterns. I found that information architecture, navigation, search and page layout affect the ability to find and read stories.

3. Analysis phase

During the analysis phase, I structured data into categories through an affinity diagramming process, created a persona to focus on a specific user type, and used that knowledge to create a customer journey map to visualise the main aspects of the user experience. This allowed me to find patterns in the research data, make sense of the big picture, and focus my thinking on a specific user type.

3.1 The affinity diagram showed the importance of information architecture, navigation, filters, search, page layout and responsiveness in serving the user goals of finding and reading relevant and interesting stories and project information.

The first image is of the affinity diagram on the wall. It is followed by the refined digital version online.

I made an affinity diagram to structure the raw research data into actionable insights. I first organised the data on a wall using post-its and a felt-tipped pen, but I later refined it on Figma. The affinity diagram revealed usability problems, user behaviours, contexts, goals, mental models, and design patterns. Precedent sites had usability issues related to complicated, unclear, or faulty information architecture. Navigation, filters, search, page layout and responsiveness could also improve. I found that users made quick decisions about whether to read a story. They scanned for relevance and judged for interest. Good titles, subtitles, blurbs and images were critical in that decision-making process.

3.2 Building on the previous analysis, the persona helped determine the primary user type as a reader with a computer, tablet or mobile phone who makes quick judgements on image and text to find and read relevant and interesting stories on specific topics.

The persona was used to focus the design process on the primary user type.

I made a persona to focus the knowledge from the affinity diagram on the representation of the target user and scenario. The new website will draw casual, advocacy and research readers. Overlaps in user attributes meant a single persona and user type were possible. The persona enabled me to incorporate user goals, behaviour, pain points and mental models. The user type has access to mobile and desktop devices and employs a range of apps to work and communicate. The user type wants to find and read relevant stories on specific topics. The reader also wants more information about the authors, project members, and project. These goals map over the organisational goal of making available citizen journalism stories.

3.3 The customer journey map showed that critical areas for improvement for the new website were the story pages, and the reader's journey to finding and reading those stories using navigation and search.

Turning research and analysis into actionable insights for enhancing the user experience.

I made a customer journey map to prioritise critical usability issues and strengths. It enabled me to incorporate design patterns that are more suited to the user flow of the new website. The solution required changes in information architecture, navigation, filtering, search, and page layout. I found that the path to the stories could be improved. The story list pages and story pages could also be improved. The customer journey map helped align the organisation and user goals.

4. Design phase

During the design phase, I focused on finding solutions to the identified usability problems. I created a high-level user flow and interaction design for a responsive site.

4.1 The user flow diagram iterations streamlined access to stories by reducing menu and in page navigational choices to increase user focus on the stories while still making project information accessible.

A selection of user flow concepts in sketch form up to refinement using a digital tool.

I made a user flow diagram to enable readers to find and read stories and project information. This process offered a quick way to identify the most important parts of the information architecture and navigational structure. I first sketched out ideas. I then refined them on Figma. Later I adjusted concepts according to insights from interaction design, prototyping and user testing.

I found that most users would not enter the website from the homepage and that the flow to the main content areas of the website had to be possible from any page. A decrease in the main menu and in-page navigational choices further helped focus the user flow to the stories. Separating story content from other information with individual page types for specific content types helped organise the website around the two most important user goals. Navigation and user language enabled disclosure and exemplars and helped focus user decision-making on finding and reading stories and project information.

4.2 The interaction design emphasised the path to the stories through a simplified menu, on-page navigational choices, search, filters, categories and tags.

Annotated sketches conceptualising a user-friendly, responsive website design for easy discovery of interesting and relevant stories and project information.

I made a series of annotated sketches to visualise the design concept for the user flow. I started with the desktop and then moved to responsive breakpoints.

The interaction design iterations brought together information architecture, navigation, filters, search, page design, image-text relationships and components. Design decisions involved consideration of Nielsen’s ten heuristics with a focus on enabling the user flow to interesting and relevant stories and project information. Later iterations further simplify the information architecture to focus primary navigation on getting to the stories. Search, filters, categories, and tags were included to find specific stories.

During the design process, I received news that the site would initially have fewer stories than initially anticipated. The use of filters, categories, and tags can cause confusion if the site has few stories. To deal with this challenge, the design allows filters, categories, and tags to be initially deactivated but activated when the site grows.

A challenge in the responsive design was how the menu shifted at various screen sizes. Early iterations employed a hamburger icon at the top left of the page, but this shifted to an always-visible menu centred below the logo at top of the page. Similarly, the search bar position was made more visible in the header at all responsive breakpoints.

5. Prototyping phase

The prototyping phase started with a low-fidelity prototype to quickly identify glaring issues and get easy fixes. With the primary screens and early corrections in place, I created a series of medium-fidelity prototypes for usability testing. I would go back to doing very quick and basic sketches and paper prototypes of design elements when needed. Throughout this phase, I iterated on the interaction design and user flow as problems or solutions became evident through design and testing.

5.1 The paper-based prototypes helped identify conceptual problems by clarifying the path to the stories with simplified menu items, navigation, search, page layout and image-text relationships.

This paper prototype was digitised and made into a clickable low-fidelity prototype using a scanner and area links on Figma.

I made paper-based prototypes to make visible the interplay between screens and actions. Conceptual problems that were not self-evident in the static sketches became clear. I simplified menu items, navigational, page layout and image-text relationships. The quick process helped clarify the path to the stories and informed the user flow, interaction design, and medium-fidelity prototypes.

5.2 The medium-fidelity prototypes smoothed the reader's path to the stories and project information through improvements on information architecture, navigation, filters, search and page layout.

A medium-fidelity prototype to test the user flow and interaction design, alongside iterations of the header, filters, and search function.

I made medium-fidelity prototypes with the aim of improving user flow to the stories. I focused on critical information architecture and the path to the stories and project information. A flexible approach to problem-solving, which allowed adjustments based on user feedback, enabled me to refine the interaction design and user flow.

The design ensures header and main menu visibility by increasing the size of the logo and reordering the menu items and search function for visibility relative to the body and screen size. Additionally, simplifying information architecture and user flow around Our stories in the main menu allowed readers to click directly to the Story list page. The Home link in the main menu was added to ensure that all users could find out how to get to the homepage. Clicking on the very visible Read our stories button on the homepage enables our readers to reach the Story list page with ease. The Story list page has a post grid with category filters to help readers find story types, a feature that can be activated when more stories are uploaded.

Furthermore, by simplifying the information architecture, the Media pack could become a sub-page of the About us, still accessible via in-page navigation and via the footer. This was an important shift because it helped focus the main menu and user flow on the most important content.

6. Validation Phase

The validation process employed usability tests and incorporated feedback into design and prototyping until a viable solution was found.

6.1 Conducting usability tests helped show were users were still getting stuck, and resulted in simplifying the navigation around the key idea of "Our stories" with search and filters to narrow down on story types.

Usability testing at different stages of design helped simplify the menu and navigational structure to enhance the discoverability of stories and project information.

I ran usability tests to find and fix problems in the user flow, interaction design and prototypes. The usability tests focused on the primary flow of finding and reading stories. I also tested secondary flows into the project information pages. The feedback helped simplify the information architecture around Our stories, and helped focus content, navigation, filtering, and the search function. User testing also showed that it was essential to communicate to readers who wanted to contact the authors from the About us and Author bio pages the necessity of author anonymity. Changes to the design increased the speed of users finding and reading interesting and relevant stories and project information.

7. Handover Phase

With a clear solution to the problem, it was time to prepare the documentation to hand over the design to the next stage of the larger project: build and content creation.

7.1 I created annotated wireframes and a content creation guide with developers and content creators in mind.

Example pages from the wireframes and content creation guide.

I made two sets of medium-fidelity wireframes that connect the site’s information architecture with its visual design and content. The first set of wireframes outlined the design’s main elements, screens and actions for a developer to build. It focused on important site behaviours, relationships, and functionalities. The second document was intended for content creation. It focused on the requirements of writing and image creation on different pages.

Result and concluding thoughts

Mockups with the homepage on different devices.

I conducted research to help design a website that would meet the needs of the organisation, the project and its readers. I found that precedent websites had issues with information architecture, navigation, filters, search, and page layouts. These issues made it hard for users to find what they were looking for. Our goal was to make it easy for readers to find interesting and relevant stories and project information.

The design for this project ensures that stories and project information are easy to find. Usability testing shows the new design has a speed increase for new users to find a story they want to read and project information they want to know.

I faced a challenge during the project because we needed a design that could handle a small number of stories but could also grow as more stories were added. To solve this problem, I conceptualised an information architecture that focussed on the primary content of stories. Finding this content is enabled by navigation, filter, search, and page layout that allow the site to expand without sacrificing the user experience. As a result, the final design enables the site to start small, grow gradually, and still meet the needs of its users.

Read another UX case study

Who Hypothetical project work for Professional Diploma in UX Design
What Information architecture; Discovery and selection; Navigational elements; Page layout; User flow to flights and extras; Research; Prototyping; Testing
Result Quicker and more accurate selection and discovery of flights and extras

Quinten Edward Williams

I am a researcher, designer, and artist working in UX. This portfolio website is focused on my UX research and design.

Quinten Edward Williams

I am a researcher, designer, and artist working in UX. This portfolio website is focused on my UX research and design.

Back To Top