Based out of Dallas, Texas, Southern Scholar is a leading ecommerce men’s dress sock company. They operate on a subscription box business model, where each month members are sent a new pair of socks, designed for seasonality, and corresponding style advice to help them look their best.
Southern Scholar recognized that usability issues on their website were leading to frustration, confusion and dissatisfaction among users. When users have a poor experience with a product, they are less likely to engage with it and may choose to even switch to a competitor's product. Therefore, it is crucial to identify and address any usability issues, as they negatively impact the overall user experience and may lead to a loss of revenue.
While working with Southern Scholar over the years as a graphic designer, I spent a considerable amount of time on their website. I recognized areas for improvement on the site and wanted to figure out if users were running into the same usability issues that I was. The only way to find out was to run some usability testing, which I did. After discovering and testing specific pain points that I uncovered, I was then able to redesign the website based off of my findings.
Since my first round of usability testing was to be conducted on the original Southern Scholar website (and the second on my prototypes), I used a modified version of the design thinking process. The process was an iterative one, that allowed me to define specific usability issues, with the goal of creating solutions to solve the problems that I uncovered.
Since empathy plays a significant role in creating successful and meaningful designs, I found it important to deepen user empathy by better understanding the typical Southern Scholar user. I spoke with the owner at Southern Scholar to learn more about the demographics of their users. From there I created user personas and performed competitor analysis to better understand the needs, goals and pain points of the users.
I researched a variety of other box subscription services, but more specifically, focused my research on other sock subscription companies. This was done to better understand the user experience that competitors are offering their users. Studying similar competitors in the market allowed me to make sense of my design decisions moving forward, and deliver solutions that would improve the Southern Scholar website. I also wanted to gain insight into how competitors had their websites laid out from a visual design perspective. Here is what I discovered:
Southern Scholar is strictly an online retailer, with no physical store locations. Therefore, all of the business that they receive is funneled through their website. The primary purpose of the website is to serve as an ecommerce store, for customers to buy their products.
It was now time to define what usability issues I needed to address on the website. I further evaluated the Southern Scholar website using Jakob Nielsen's 10 Usability Heuristics. My evaluations were based off of a 5 point severity ratings scale. This allowed me to document the severity of the usability issues that I discovered. I then was able to focus on the most severe pain points on the website.
Specific scenarios and tasks were created based on the pain points I found in the heuristic evaluation. From here I ran some usability testing on the existing Southern Scholar website in order to further analyze these pain points. The goal here was to uncover opportunities where the website could be improved, as well as to learn about the target user's behaviors and preferences.
Five participants were identified and asked to participate in the usability testing of the Southern Scholar website. They were contacted and willingly agreed to participate. The testing was done remotely, and each session lasted roughly 30 minutes. Zoom was used to record each participant as well as their computer screen while they completed the testing.
Task 1: In the shop, locate the Oatmeal Solid – An Oatmeal Sock | NMP. For size, choose Over-The-Calf. Add this item to your shopping cart.
Task 2: Write a review for a previous purchase that you have made.
Task 3: Locate the Rewards & Loyalty page. From here, follow Southern Scholar on Instagram to earn 5 rewards points.
After the user testing was complete, it was time to take a closer look at what the testing uncovered. I needed to carefully analyze the recordings of my user testing sessions so that I could make better sense of the findings. I laid out the usability problems that the users experienced, as well as the complaints that they voiced. Next I organized and grouped everything into categories so that I could have a clearer understanding of the user experience.
"This is confusing. Honestly if it's this hard to figure out how to leave a review I'm probably not going to."
1: Users struggled to locate a specific item in the shop without a search bar and the ability to filter by certain colors. All five users were only able to locate the item by scrolling from top to bottom through the shop items until they found the one that they were looking for.
2: Users had a very difficult time leaving a review for a previous purchase. All five users experienced frustrations when trying to complete this task. Three out of five users failed to complete the task entirely. None of the participants initially recognized that the "Write a Review" icon was actually clickable, because it does not have a hover state.
One participant even helped me to discover something that I first overlooked. Once you click on any of the items in the shop, there is a "Write a Review" Button on the page for that item. I noticed that the user can actually leave a review, for an item that they have never even purchased before.
3: Users struggled to locate the "Rewards & Loyalty" page, since in the main navigation it is located under the "Write A Review" link. All of the icons in the "Ways to Earn Points" section do not have hover states, making it difficult for users to understand how they were supposed to earn points. Without the appropriate feedback, users were forced to think about how they were supposed to interact with the system.
Once I had the key findings organized, I was able to create a list of recommendations that I believe would improve the overall user experience of the Southern Scholar website. The recommendations I am making have influenced the decisions I made when redesigning the website.
- Add a search box to the shop page. Given the number of users that prefer searching to browsing, this simplifies the shopping experience.
- Add hover states to clickable elements. Users shouldn't have to think about whether something is clickable or not. This will improve the visibility of system status. For that reason I also recommend making all clickable icons look like conventional buttons, to prevent users from having to overthink.
- Eliminate reviews under each individual sock since all socks are the same and this is repetitive. Reviews should still be displayed in some form on the website to build the trust of users. When clicking "Write A Review", users should be directed to how to leave a review, not the Rewards & Loyalty page. Users should not be able to leave reviews for products that they have never purchased before.
- Move Rewards & Loyalty page to "My Account". That way users could have access to their order history and rewards/points all in the same location. This seems more intuitive than including it under the "Write A Review" link where it currently is.
- Reduce clutter, especially on the home page to create a lasting first impression.
I used the original information architecture from the current Southern Scholar website as a starting point. From there I combined all of my findings, goals and solutions to form the blueprint for the reimagined website.
After I had my information architecture organized and laid out, I began wireframing the new website in Figma. Four out of the five participants from the user interviews stated that they prefer shopping from their computer. Southern Scholar does not have a mobile application either, so I took a desktop first approach when redesigning this website.
With my desktop wireframes complete, it was time to turn them into high-fidelity prototypes. All of the research, testing and ideation I performed up until this point culminated into what I have designed below. These prototypes were also designed in Figma.
The next step in the process for me would be to run some additional usability testing on my prototypes. The goal with everything I have done up until this point was to improve the user experience of the website. I recognize that it becomes difficult for me to see this website freshly after working on it for an extended period of time. Therefore the only way for me to measure my success would be to test the new website. Then over time the process could be repeated, with improvements continuously being made as needed.
We see that when companies take a user centered design approach, this leads to a positive impact on the business as a whole, as they are able to create more value for their users. By working to address some of the usability issues on the current Southern Scholar website, I was able to build more confidence and trust between Southern Scholar and their users.
On this project, I did not have the luxury of getting to collaborate with other designers. When working alone it becomes easy to lose sight of the larger picture. I did not have anyone to critique my designs along the way, which is always welcomed because of the fresh perspective that it offers. Working alone creates a form of tunnel vision, that I know prevents me from seeing the flaws in my designs. If I had a team of designers to collaborate with on this project, I am confident that the user experience could be even further improved.
Overall this project has allowed me to better understand how I think and communicate as a designer. As a result I have learned a great deal about working to satisfy both business objectives and users needs simultaneously. I know that design is a powerful tool when used thoughtfully, that we can leverage to solve a wide range of problems for people. Getting to work on a project like this only reaffirms that for me.
This project received 1st place in the Spring 2023 GIT Awards for the User Experience category. The GIT Awards is a bi-annual event to recognize wonderful work, superb students, and great graduates in the Graphic Information Technology degree program at Arizona State University. Awards are voted on by leaders in the design industry.
