Essic Sport Shop
E-Commerce Platform | Concept
Design Challenge
How might we ensure users can quickly and easily find products and details to inform their purchasing decisions?
Research
From Brick-and-Mortar to E-Commerce Platform
Essic Sport Shop’s current website places emphasis on a strong family atmosphere and customer service, but they lack the option to buy products online.
Key Observations:
Lacks option to purchase products
Lacks individual product listings
Main navigation has 8 high-level categories
“I appreciate being able to easily access and find what I’m looking for”
To learn more about users and the e-commerce shopping experience, I conducted user interviews with 3 participants. I interviewed users on their experiences online shopping for athletic wear.
Key Takeaways:
Easy and filterable navigation
Reliable transactions
Knowledge of sales
Factors considered: pricing, reviews, and product quality
Information Overload
Since Essic Sport Shop’s current website does not allow for purchasing of products, I researched a couple prominent sporting goods e-commerce websites. I conducted a competitive analysis of Dick’s Sporting Goods and Big 5 Sporting Goods following a task analysis approach.
Task: Purchase a Yoga Mat
Key Takeaways:
Too many high-level categories → difficulty with task flow
User flow, # of steps to complete task: 15-20
High color contrast for call-to-action buttons
Feedback with pop-ups and breadcrumbs
Finding Strength in a Sea of Competitors
In addition to looking at direct competitors, I researched other reputable athletic apparel e-commerce websites. I conducted a comparative analysis of Adidas, Alo Yoga, Everlane, Lululemon, and Nike following a feature inventory approach.
Key Takeaway:
Through feature inventory analysis, I found that all of these sites share similar features, but the one feature all of these sites lacked was a “Compare” feature.
Tackling Different Mental Models
To learn more about how users organize products in Essic Sport Shop’s inventory and inform information architecture for the redesign, I conducted an open card sort with 16 participants individually sorting 50 products into categories.
Open Card Sort: 16 Participants, 50 Cards
View Individual Cards Below
Key Takeaways:
63% sorted products by gender and age
37% sorted products by activity/sport
25% created an Outdoors category
44% created a Supplements category
“I look for specific items online, but end up spending too much time comparing products and reading reviews”
Austin is an amalgamation of users interviewed and is representative of a typical Essic Sport Shop customer. Austin was referred to throughout the design process to ensure that my design decisions were intentional and made with Essic Sport Shop users in mind.
Design Solution
Putting Together a Game Plan
Insights from competitive task analysis and the creation of Austin’s user flow informed my decisions for the roadmap of the website. Following Austin’s user flow, the movement from page-to-page is highlighted in red.
Clear & Accessible Information to Score Points in User Satisfaction
Through insights from user interviews, competitive analysis, and comparative analysis, I defined and created a detailed paper wireflow with key redesign elements highlighted.
Building Team Uniformity
I created a design system to maintain consistency throughout my design on Sketch. I also stuck to Essic Sport Shop’s minimal design with simple but effective atomic elements.
Key Elements:
Color: When considering a color palette for the website, I chose a monochromatic scheme with variations of red for contrast and neutral colors. From a physiological standpoint, red causes the release of adrenaline and the ‘fight or flight’ response, which also happens during intense workouts. Being a sporting goods website, I found it fitting to follow the pop of red featured on the current website and logo. The bright red is seen throughout the redesign for call-to-action buttons and contextual navigation. Red is indicative of the user’s location within the site.
Typography: Helvetica was the chosen font, because it is considered one of the easiest fonts to read and will not hinder users in their process of exploring the website. Helvetica also provides multiple font-weights to add contrast.
Providing Cues to Track Progress
Building Screens in Sketch
1. Home Page
2. Activity Page
3. Yoga Page
4. Product Page
5. View Bag Page
6. Checkout Page
Prototype
Goal: Purchase Manduka’s Pro Yoga Mat
Results
The Ball is in their Court
Scenario & Task: “You recently signed up for a virtual yoga class and are looking to purchase a new yoga mat. Your instructor recommended a specific mat to you. Show me how you would purchase Manduka’s Pro Yoga Mat.”
User Needs & Goals Met:
Intuitive navigation — included navigation design based on user research to align with user’s mental models; lots of feedback and breadcrumbs to guide user throughout shopping and purchasing process
“It was easy to find what I needed”
Appreciated exploration elements — included sections such as “What’s Trending” and “You May Also Like”
“I liked seeing exploration elements like “What’s Trending,” because it’s similar to getting in-store recommendations”
Met expectations — users found website to be familiar and follow standard e-commerce structure and flow
“This site was what I expected it to be given my past online shopping experiences”
Conclusion
Through user testing results of my redesign of Essic Sport Shop’s website, users showcased quick and easy navigation to find products and information to inform their purchasing decisions (i.e. product pricing, reviews, quality, “Compare” feature, sales). My redesign focused on introducing e-commerce to create and sustain high conversion rates for purchases online, especially while in-store sales are being impacted by a global pandemic. Through introducing exploration elements (i.e. “You May Also Like”) similar to in-store recommendations and providing additional customer service features in the footer (i.e. live chat), I was able to carry-out Essic Sport Shop’s mission to maintain superb customer service and “small shop” appeal, while increasing revenue through e-commerce.
Reflection
Challenge
The most challenging part of this project was time management. Researching, defining, designing, and delivering a website redesign within the span of 1.5 weeks is a challenging task but manageable with a structured timeline. Being able to apply new concepts learned throughout the project timeline adds another layer of difficulty. Throughout the project, I learned to not get lost in the details of each design phase and zoomed-out to focus on the bigger picture of creating a solution to the problem. During every step of the process, I made sure to refer back to my project plan, personas, and problem statement to ensure I was staying on track to successfully finish my project by the deadline.
Valuable Insights
Throughout the discovery/research phase, I learned the value of Comparative and Competitive Analysis (C&C Analysis) in following industry standards, keeping up with competitors, and determining how to be unique. C&C analysis informed a lot of my design decisions and helped with providing a frame of reference for sporting goods and athletic wear e-commerce websites. Another valuable method for this project was card sorting to determine navigation for the website. Being able to smoothly navigate through the website, whether users have an item in mind or not, is important and can influence the website’s conversion rate, thus impacting their sales. Therefore, learning the user's mental models for categorizing items is helpful and sometimes necessary for sites with lots of content.
What People Are Saying
“I can tell you took your time researching and analyzing the existing website, because all of your recommendations are very relevant to Essic’s current challenges. Very comprehensive design.”
— Frederick Aya, UX Designer“Your prototype is really well thought-out, and I loved the color contrast on your site! Super easy to read, and I think really follows the standard of sports e-commerce layout.”
— Haeree Lee, UX Designer“Your website was very straight forward and easy to use. It’s what I expected given online shopping I’ve done in the past, because it follows patterns that are similar to other sites.
— Samantha Gohh, Software Engineer