Website Redesign

A web touch-up and facelift for the US based non-profit: Soles4Souls.

Image alt tag

Project Overview

This project is in collaboration with the US-based non-profit organization, Soles4Souls. The organization specializes in shoe donations to help children in need.

My team worked on the research, web analysis, and prototype of the official website. Some of the suggestions we made have been incorporated into the current, updated website.

My Role

  • Lead UX designer

  • Project Communication Leader

Timeline

  • Overall: 4 weeks

  • Discovery & Research: 2 weeks

  • Design & testing: 2 weeks

Problem

The US-based non-profit organization Soles4Souls is a medium sized non-profit that is in the process of revamping its official website to make sure the programs can be clearly understood by users. So the overall user experience can be improved.

Solution

Our team restructured the information architecture of the main navigation and redesigned the program page to make the information architecture clear and visuals fun and engaging.

My Design Process
Research
Responsive Web Redesign/Web TouchUp

Interview with S4S Creative Director

Shareholder Interview

To be briefed about the organization and the project, we first interviewed the creative director of S4S based on the main objectives:

  1. What is the priority of this site revamp?

  2. Which areas of the website do they want to address?

  3. What messages does the organization want to convey by the website?

Responsive Web Redesign/Web TouchUp

Shareholder Insights & Priorities

Responsive Web Redesign/Web TouchUp

Empathy Map

User Interviews

The five interviews are conducted based on the objective:

To investigate the shoe donation behavior of S4S's target users.

Based on the insights, an empathy map is created to better understand the users.

Responsive Web Redesign/Web TouchUp

Original homepage

User Testing (current website)

After understanding the general pain points of users. In order to identify the current problems and confusion that users might have on the current website, we used the "thinking out loud' method to test the current website with five users by giving them a few user tasks to complete.

Responsive Web Redesign/Web TouchUp

Original website Feedback

Web Analysis

Current Web Annotations

Based on the insights collected in the research described above, we soon identified the areas that could be improved.

To have a high impact on the information architecture of the site, we identified the main navigation and the footer as the priorities.

Responsive Web Redesign/Web TouchUp

Original Website (Main Navigation and Footer)

Card Sorting (Current Site)

To make sure that the site’s information architecture can be improved and identify current problems, we used FigJam to do a card sorting.

Responsive Web Redesign/Web TouchUp

Current site Card Sorting

Responsive Web Redesign/Web TouchUp

Proposed Site Map

Restructured Site Map

The site map reorganized the main navigation menu items based on the results of the card sorting and the organization's analysis of how users donate and which pages they visit the most.

The footer items are also rearranged to be more concise without too much repetitive information.

Prototype
Responsive Web Redesign/Web TouchUp

Lo-Fi Wireframes

The Lo-Fi wireframes were created to explore more layout options.

We narrowed down the options and agreed on a consistent layout (hero section at the top of each page).

UI Style Tile

The style guide is built based on the S4S branding and media kit. We kept the icons used on the website as they were liked by many users in our feedback.

Responsive Web Redesign/Web TouchUp

UI Style Tile

Hi-Fi Prototype

We prototype the pages based on the priority of the pages mentioned by the shareholders.

Usability Testing

We created a fully-functional, high-fidelity prototype of the new flows using Figma.

To test the usability and ensure the user experience can be improved, we did usability tests followed by A/B testing.

Responsive Web Redesign/Web TouchUp

Homepage Iterations

Responsive Web Redesign/Web TouchUp

Footer Iterations

Hi-Fi Prototype

Prototype Demo

Updated Sites (implemented changes)

As a result of the project, the new information architecture of the main navigation menu items and footer that we proposed and prototyped was implemented in the organization's updated current website.

Responsive Web Redesign/Web TouchUp

S4S current updated website (Screenshots)

Final Thoughts

It was great to see our designs being adopted and making some real changes to the updated website and the user experience. The key learnings and thoughts are below:

01

A web analysis was really useful to address the problem areas. Combined with shareholder and user interviews, the scope can be narrowed down based on priorities.

02

A separate sitemap for the main navigation menu and footer makes the design process more efficient, as they are the most prominent elements of this web design project.

03

It helps to consider front-end development when designing (e.g. how to achieve the designs in CSS and HTML). so the changes can be quickly implemented on the site.

Thank you for reading my case study!

Want to work with me? Feel free to contact me!
...or just say hello on my social media.