Interview with S4S Creative Director
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.
Lead UX designer
Project Communication Leader
Overall: 4 weeks
Discovery & Research: 2 weeks
Design & testing: 2 weeks
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.
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.
To be briefed about the organization and the project, we first interviewed the creative director of S4S based on the main objectives:
What is the priority of this site revamp?
Which areas of the website do they want to address?
What messages does the organization want to convey by the website?
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.
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.
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.
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.
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.
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.
We prototype the pages based on the priority of the pages mentioned by the shareholders.
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.
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.
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:
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.
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.
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.