ABC Website Redesign

Design Brief

“Imagine you’ve just been hired by a government agency to help redesign their website to improve usability and increase user engagement.”

Individual Project

Daniel Yuong

My Role

User Research

UX/UI Design

Usability Testing

Timeline

3 Weeks

Jan 2023

Current ABC Website

The layout for the current ABC website feels unintuitive, and lacks clarity in formatting and structure. The navigation is also confusing for users, with the primary navigation bar changing between webpages, and there being no clear CTA to return back ABC Home.

This made the ABC website a perfect choice to redesign, with the aim to improve the navigation and layout of the website to be more intuitive to use.

Heuristic Evaluation

Based on Nielsen’s 10 usability heuristics, I conducted a more in-depth analysis on the usability of the ABC website.

This allowed me to identify in more detail the pain points users might encounter when interacting with the website, and what I needed to focus on when it came time for the redesign.

Usability Tests

I also completed 5 usability tests, with the participants completing set tasks interacting with the ABC website.

After completing the usability tests, I organised the data using an affinity diagram to have a better idea of the painpoints users experience when interacting with the website.

Actionable Insights

Based off the usability tests and heuristic evaluation, I was able to come up with a few actionable insights to work on for my redesign.

Card Sorting

As there were some usability issues with the current website’s navigation, it was important to define the information architecture for the redesigned navigation prior to prototyping.

I completed an open card sorting to define and restructure the contents of the current ABC website navigation to something more intuitive.

Sitemap

Based off the card sorting session, I created a newly designed sitemap for my redesign of the ABC website.

I categorised the sitemap into primary navigation, secondary navigation, and global utilities.

Prototype

After creating a new sitemap, it was time to start designing in Figma.

I started with a low fidelity wireframe, before refining it to a higher fidelity prototype.

Try Desktop Prototype Here!

Mobile Design

Part of my design process was designing for mobile devices.

Using responsive components and auto layout in Figma allowed me to efficiently translate my desktop designs across to mobile.

Try Mobile Prototype Here!

Usability Testing

Throughout the design process, I completed usability tests on both desktop and mobile prototypes to gain feedback on my designs.

The majority of the feedback was positive, with participants commenting on the clean, intuitve design and layout.

Style Guide

Lastly, I established a style guide in order to keep my design consistent across webpages and different platforms.