Sportfishing Outfitters (2020)
Ecommerce from user research to usability evaluation
FISHING + BOATING ECOMMERCE WEBSITE
Summary
This case study focuses on core UX/UI design skills and evaluation techniques.
I set out to create an ecommerce website from scratch. My goals were to make it attractive, intuitive, and valuable to users. To accomplish this I interviewed prospective users, turned my findings into features, built an interactive prototype, and tested it with actual participants. I examined the problems I discovered during evaluation and designed solutions to improve the users’ experience.
Role
User Research
UX Design
Visual Design
Team
Myself
Introduction
Business + Experience Goals
The ecommerce company is called Sportfishing Outfitters. The website will offer 60,000+ fishing and boating products from over 650 global suppliers.
Business Goals
Sell products
Reviews - customers tell others
Retention - customers return again and again
Experience Goals
Product awareness
Facilitate product research
Encourage conversions
Unique Challenges + Opportunities
I discovered that fishing is the most popular sport in the world (yes it’s considered a sport 😉) with over 50 million participants in the US alone. This is due to its accessibility and wide appeal. Fishing attracts all types of people with a multitude of motivations. This project presented some uniques challenges.
Challenge 1
Organizing 60,000+ Products
Challenge 2
Addressing needs and motivations of diverse users
Process
Research
Industry Research
User Interviews
Analysis
User Personas
Scenario Mapping
Design
Wireframes
Style Guide
Prototype
Test
Evaluation
Analysis
Iterate
Ideate
Design
Research
Getting acquainted with users
Who will be using the website and what are their motivations, needs, and pain points? I used two methods to gain insights; background research into the fishing industry and interviews with actual anglers.
Background research
I took a deep dive into some online sleuthing - What is sport fishing and who are the industry leaders? What are they doing and how can I do it better?
Interviews
I grabbed a fishing rod and headed to a nearby lake for some guerrilla user research. I spoke to anglers about their shopping habits - How do they plan an outing and what resources do they use? Where do they buy gear and why do they like those vendors over others? I furiously jotted down every detail about our conversations.
Analysis
Converting data into information
After conducting preliminary research I had notes and ideas that I needed to convert into useful information. I distilled this data into two deliverables that would be used throughout the rest of the project development to inform design decisions; user personas and scenario maps.
User personas
With such diverse user demographics I focused on motivations and shopping habits to develop 3 distinct user personas.
Scenario map
I made a scenario map for each user persona by making informed assumptions about how they might interact with the website. Walking through each step of their tasks gave me ideas for opportunities and requirements that will be included and tested in the prototype.
Requirements + opportunities
For example; analytic angler Johnny wants to make the most informed purchase decision possible. A requirement for him would be customer reviews, and an opportunity to help him compare products would be star ratings on the product cards.
Wireframes
Sketching
With my list of requirements generated during the scenario mapping exercise, I sketched out the interface elements of the key website pages; Home, Category, Product, Cart, and Checkout.
On-screen wireframes
I translated my sketches into digital wireframes using Adobe XD. This would make it efficient to add aesthetics and interactivity later.
Style Guide
Logo design and branding
There was a visual design component to this project. I developed an original graphic identity and branding guidelines. If you’d like to learn more about these elements please contact me. This case study focuses on UX/UI design.
Style guide
The graphic identity informed the digital interface design. I created a style guide documenting the interface elements including code snippets for buttons and cards. This would be shared with development enabling them to translate the design into the actual product.
Prototype
Adding aesthetics + interactivity
Using the style guide, I updated the wireframes in Adobe XD; swapping placeholders with photos, formatting text, and adding branding colors. With my usability test goals in mind I added interactivity to the parts of the prototype that I would evaluate later with user participants.
Evaluation
Participants
The usability evaluation was conducted on August 23, 2020 and August 24, 2020 with a total of 5 user participants.
Objectives
The primary objectives were to assess effectiveness of navigation and content organization and the secondary objectives were to assess response to general appearance.
Techniques
I facilitated one-on-one sessions with representative users attempting tasks while using “think out loud” protocol and answering questionnaires. Participants were encouraged to express comments, questions, and points of confusion.
Redesign
Metrics
I collected quantitative and qualitative metrics to measure the UX of the prototype; semantic differential scales, SEQ’s (single ease question), task completion times, open ended questions, observation notes, and screen + voice recordings.
Analysis
I visualized numeric data and reviewed session videos to uncover problems, discover opportunities, and learn about users. This analysis validated some of my assumptions and gave me the insights I needed to improve the design.
I’ve shared an overview of the problems and design solutions below. If you’d like to see the full evaluation report, click the button and it will open in a new window.
Problem 1
Problem
Participants struggled to find the product they were looking for on the category page. The product names aren’t prominent enough and the interface has a low signal-to-noise ratio.
Solution
I increased the length of the product cards so that they fill more of the screen, enlarged the product names, and removed information that is less important to completing the searching task.
Problem 2
Problem
The ITEM ADDED TO CART indicator window interrupted participants’ task. When they added a product to their cart, the indicator window filled the entire screen requiring them to close the window to continue shopping.
Solution
I reduced the indicator window significantly and made it stay on screen as the user scrolls. I included an X so users can close the window when they want or it will automatically disappear after a set amount of time.
Problem 3
Problem
Participants reported that the SHOP BY DEPARTMENT categories are not delineated from each other or from the homepage background.
Solution
I added containers grouping the category title and image together to delineate the categories from each other and from the homepage background.
A/B Test
Product page (A)
This product page is the more typical format that people are familiar with from using other ecommerce websites. 1 out of 5 participants preferred this product page because there was less scrolling required to add multiple products to the cart.
Product page (B)
This product page has full size images of all color options displayed on screen, each with its own quantity field and ADD TO CART button. 4 out of 5 participants preferred this version because it made comparing and adding products easier.
Conclusion
Large selection of products
Offering 60,000+ products poses some challenges in terms of content and page design. Users were overwhelmed by the density of content which caused them to overlook products they were searching for. The solution was to use negative space to achieve a more minimalist interface.
Diverse user experience levels
Designing an intuitive and efficient interface for diverse users poses some challenges in terms of navigation and features. Users with more experience preferred a direct route to products while those with less experience required some guidance. The solution was to design flexible navigation that allows users to access products in different ways, so they can pick whichever method suits them.
View next case study
USPS MOBILE