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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.