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.

Due to budget constraints, the client provided insights from their own user research and outlined what the new version should include. Using these insights, I created a list of the main pain points.

Specific user requirements identified in the client's user research influenced decisions for the redesign, focusing on changes to the information architecture, design elements, color schemes, typography, and aesthetics.

The research also highlighted functionality preferences, emphasising easy navigation, content categorisation, and quick access to local news.

Additionally, the client wanted to add a call-to-action (CTA) for users to sign up for the newsletter, offering the option to receive news via email, in addition to WhatsApp.

Pain Points

Adopting a mobile-first approach was crucial for this project, recognizing the prominence of mobile devices among users. By prioritizing mobile design, we ensured an optimal user experience on smaller screens, improved performance, and streamlined usability across all devices. This user-centric strategy led to increased engagement, satisfaction, and higher conversion rates, enhancing the project's overall success.

As we not only updated and redesigned the appearance but also the architecture, I began with paper wireframing to test and discard assumptions both the sakeholders and I had. By quickly creating different versions it was easier to see what worked and what did not and I was able to manage client expectations. 

This approach also allowed me to focus on core elements and layout enabling iterative refinement based on client feedback.

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.

Before moving to high-fidelity designs, I started with digital wireframes to ensure all necessary elements were included. Since the redesign was crucial for the client, this approach helped focus on the elements rather than their appearance. This allowed us to concentrate on improving the architecture without distractions.

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.

I opted for in-house usability studies and only with three users due to budget and time constraints that prevented us from conducting user research or studies with external, real users.

Two rounds of usability studies were conducted 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.

Each user were given a subset of the prototype dedicated to the homepage, a piece of news detail and register form. I wanted to ensure 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.

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.