Interview with S4S Creative Director
Website Redesign
A web touch-up and facelift for the US based non-profit: Soles4Souls.
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
Shareholder Interview
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?
Shareholder Insights & Priorities
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.
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.
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.
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.
Current site Card Sorting
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
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.
UI Style Tile
Hi-Fi Prototype
We prototype the pages based on the priority of the pages mentioned by the shareholders.
-
Homepage
-
Donate Page
-
Blog
-
Become Ambassador
-
Request Shoes
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.
Homepage Iterations
Footer Iterations
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.
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.