By redesigning the news outlet website with their specific needs in mind, we strive to empower individuals with access to reliable and relevant news. This project not only enhances user experience but also fosters community engagement, facilitates informed decision-making, and contributes to the overall development of these communities. Through our efforts, we aspire to bridge the information divide, amplify voices, and create a positive impact on the lives of those who have long been in the shadows of larger news outlets.

Through information given for the client, specific user requirements have been identified has influenced decisions for its redesign, focusing on changing the Information Architecture, design elements, colour schemes, typography, and aesthetics.

The evaluation of the search feature and performance metrics has uncovered user pain points, guiding improvements in functionality and speed optimisation.

The research has also shed light on functionality preferences, highlighting the importance of easy navigation, content categorisation, and quick access to local news.

In addition, the client wanted to add a CTA for users to sign up for the newsletter, not only via WhatsApp, as it was so far, but to offer its users the possibility to receive news via email.

Pain Points

The mobile-first approach was of paramount importance in this project as it recognised the growing significance of mobile devices in users' lives. By prioritising mobile design and development, we ensured that the website provided an optimal user experience on smaller screens, where a majority of our audience accessed the platform.

Emphasising mobile-first design allowed us to focus on essential content and functionalities, streamlining the user interface and enhancing usability across all devices. This approach not only improved the website's overall performance and load times on mobile but also positively impacted its desktop version.

Additionally, by considering mobile users' needs first, we adopted a user-centric perspective, resulting in a more intuitive and accessible website across various platforms. This approach also led to increased user engagement and satisfaction, ultimately contributing to higher conversion rates and the success of the project.

By utilising a low-fidelity medium like paper, we focus on core elements and layout without distraction, allowing us to iterate and refine the design based on user feedback before moving into the digital realm.
These paper wireframes capture key features such as intuitive navigation, content categorisation, search functionality, and mobile optimisation, addressing the specific needs and challenges faced by users in areas with limited coverage and internet connectivity.

Bringing the website design to life, seamlessly aligning user needs with intuitive interface. 28 low-fidelity designs and prototype were created.

Once the initial flow and a first round of the usability study were complete, I started by creating the main screens of the app.

Including three different versions to use as detail news for the client to create customised templates as well as five different types of headers depending on what is needed on each page.

I picked an 8–point grid for the project and set the margins for within groups at 8 and 16, with margins between groups at 24, 32 and 48.

I connected my high fidelity designs into a clickable prototype. That will allow me to test the app on the second group of users.

I conducted two rounds of usability studies to inform the design process. The initial study guided the transition from wireframes to mockups, while the second study, utilising a high-fidelity prototype, identified areas in the mockups that required further refinement.

I validated my prototype with 3 users. Each were given a subset of the prototype dedicated to the homepage, piece of news detail and register form. I wanted to be sure users could find easily the “Towns” section, and that the register form was clear and usable.

This was tested over a zoom call, where I introduced the user to the website and asked them questions. The questions were dedicated to finding out whether the register and user flow were easy enough to understand.

The app has been evaluated for contrast to match the AA standards of WCAG. In some cases I found that the contrast can be improved.

One specific example I would like to share is the newsletter button. My initial idea was to differentiate that button from all the other CTA’s, but the choice of colour provided to not be fully accessible. In the final version the text colour was modified.