Improving the mobile checkout process on the
Packit Gourmet website
by identifying usability issues and suggesting easy-to-implement recommendations
Client
Packit Gourmet
Duration
6 weeks
Team
Sagarika Konanuru, Sara Kim,
Anamika Menon, Hayley Greason
Role
Preliminary Usability Testing, Participant Recruitment, Analyzing Test Results, Figma Mockups Report and Recommendations - UI Design
The Opportunity
Packit Gourmet is a family-owned, boutique e-commerce company based in Austin, Texas, that sells shelf-stable camp meals, cooking ingredients, and related tools and gear. Since its conception in 2008, Packit Gourmet's website has built up a dedicated returning user base by providing a platform to easily purchase their on-the-go meals and gear.
​
Considering that customers rely heavily on the website to purchase the products it is imperative that the website facilitates easy access to information and resources and provides a seamless user experience.
The company thus approached us to evaluate the usability of Packit Gourmet's mobile website and checkout process - and identify concerns that limit the user's interaction with the website and hinder successful task completion. We also suggested several simple recommendations that would improve the mobile website greatly with the least amount of effort.
The Evaluation Process
01
Prepare
-
Preliminary Analysis
-
Participant Recruitment
02
Test
-
Scripting and Tasks
-
Remote Moderated
User Testing
03
Analyze
-
Consolidated Test Results
-
Data Analysis
04
Report
-
Key Findings
-
Recommendations
Participant Recruitment
Screening Requirements
From our kickoff meeting with Packit Gourmet, we conferred that our participant pool could be very broad - However, we did feel like the following four criteria were pivotal to understanding Packit Gourmet's target audience:
01. Experience with mobile e-commerce
03. Inclination towards supporting small businesses
02. Access to a mobile and laptop/desktop
04. Interest in outdoor activities
Additionally, since the company informed us that returning users had a significantly higher conversion rate than new users, we decided to recruit participants for the study from both pools - new and returning customers.
Participant Recruitment
Selected Participants Demographics
The team solicited participants through two methods - Pratt School of Information's mailing list for 'new user participants', and Packit Gourmet's customer list, provided by the company for 'returning user participants'.
​
Eight participants were chosen to participate in the User Test - 5 new users, and 3 returning users - and were offered a $10 Amazon gift card to compensate for their time.
​
Our participant demographics reflected the company's customer base demographics in terms of age range.
The participants pool included users from all ages
5 participants from NY, 2 from TX, 1 from WA
User Testing
Methodology
Moderated User Testing is a method in which relevant participants are recruited and asked to use the “think aloud” method as they perform tasks on the platform set by the Usability experts.
​
We believed that this would be the most compatible testing methodology for this project, since it gave us the ability to watch the users complete tasks in real-time, and further probe them for more information about their emotions towards the website.
​
Through our testing, we aimed to analyze the usability of three main aspects of the website :
​
01. Clarity of Product Pages
02. Discoverability of Call To Actions
03. Ease of Navigation through the website's Information Architecture.
Testing
Tasks and Script
Each usability expert from our team spent some time individually investigating the website and identifying the strengths of the site as well as potential usability problems. Based on the goals determined by the Packit Gourmet team and our findings, we came together to create a scenario and four tasks.
Scenario:
​
You plan to go on a hike for several days with your friends. The hike is in a remote area, and you need to take some food with you. You decide to buy some camping food from packitgourmet.com.
Our usability team created the following four tasks for each participant to carry out, the first three of which were randomized in order to avoid biased results:
Task:
​
You are shopping for a friend who has an intolerance to gluten. Add one of the best-selling gluten-free items to your cart.
Task:
​
Find a vegetarian breakfast item that appeals to you. Add enough to feed 3 people.
Task:
​
You want to cook some beans. Find the ingredients and gear that will help you do that, and add them to the cart.
Task #4:
​
Purchase the items in your cart.
After the four tasks were completed, we asked two final post-test questions verbally, to probe for their emotional experience - a key factor in our research.
Post-Test Question 1:
“Did you feel like you had any difficulty in completing any of the tasks? If so, please tell us why.”
​
Post-Test Question 2:
“How did you feel about the overall navigation and checkout process on the website?”
Analysis
Findings
Most of our participants found their experience with the Packit Gourmet website to be positive - and it easy to navigate through the website even on the limited space on their mobile screens.
"The checkout process was pretty smooth and easy to use."
"It had good navigation. The different sections of the website navigation made sense, it was easy to go through, the website speed was fast, so it was easy to navigate."
"I like how clear the items are spelled out in the hamburger menu."
However, the participant study did reveal many opportunities for improvement on the mobile website in order to enhance overall usability.
​
After moderating eight usability tests accompanied with thorough note-taking of each session and then reviewing the recorded session videos, our team discovered seven recurring issues across the four tasks.
Consolidated table of issues faced by all the participants color coded by severity
Seven recurring problems faced by participants
After deliberating over the severity of these issues, as usability experts, we chose identified the three key issues which could improve the website's usability greatly with the minimum effort.
01.
Filters
​
The filters and sort options are not discoverable and difficult to use.
01.
01.
Account Login
The login icon is difficult to identify.
02.
Product Page Structure
Important information is buried in the product pages.
03.
Report
Recommendations
For the three most severe problems the users faced, we crafted simple, easy-to-implement recommendations that would help improve the usability of the website by solving these issues with the least amount of effort.
Recommendation 1
Make the “Sort by” and “Filter” options clear call-to-action buttons and create an accordion-style filter popup.
Problem
While attempting to carry out the tasks - the users missed the “Filter” and “Sort by” options due to their poor discoverability and text-like appearance.
​
Several users also clicked into “Filter,” then into a subcategory, and then missed the “Dietary Needs” submenu since they had to scroll a significant amount in order to find the actual filters since the categories and subcategories are listed at once in one-click. According to the world-leading user-experience firm Nielsen Norman Group, 'scrolling through long dropdown lists [is] especially difficult for mobile users'.
"[It] wasn't that easy. It took a really long time to scroll to the filters before I found the section I needed." - Participant 2
"I had a little bit of a hard time finding the dietary restrictions, but I finally did find it. I hadn’t scrolled down enough to see the dietary restrictions." - Participant 5
Solution
We believed that Part One of the solution to solving the filtering usability problem was to implement clear CTA button for sorting and filters.
Existing Page Layout
Proposed Page Layout
with clear CTA Buttons
Part Two to fixing the lack of discoverability of the filters was an accordion style filter pop-up that prevent cognitive overload, and prevent the excessive scrolling needed in the current filters design.
Existing Page Layout
Proposed Page Layout
with accordion-style filter pop-up
Recommendation 2
Replace the tent icon with an account icon that matches industry standards and is familiar to users.
Problem
Many of our participants found it difficult to log in to their accounts as they failed to accurately identify the “tent” icon as a signifier for account access since it did not align with the universal user account icons that the participants were used to seeing on other websites - differing from their mental models.
"The icon is in the right place, but I wouldn't think to click the tent to log in." - Participant 2
"I’m looking for the login. I clicked on the hamburger menu, but I didn't see a login." - Participant 5
Solution
By replacing the tent icon with an account icon that users are familiar with, we could reduce the intellectual load on the users and facilitate seamless access and faster completion of fundamental tasks.
Feedback
Existing Page Layout
Proposed Page Layout
with universal account icon
Recommendation 3
List out top-line item information near the top of the product page, and include a pop-up info icon next to words or phrases needing explanation.
Problem
On individual product pages, participants struggled to find important information like if an item was gluten-free or vegetarian, or an item's serving size. In fact, several times, the paragraphs to introduce the items at the top of the page were either skimmed or skipped. None of the participants checked the “FAQ” accordion section of the product page, where the information is located.
"I don’t see anywhere that says it’s gluten-free, so I’m not sure if I should get that." - Participant 2
"“I assume it’s an individual one, but that’s a question I’d have." - Participant 2
Solution
By removing the large block of text above the product image and listing the top-line information between the product image and the “Add to Cart” button, we could make the page much more readable. Also, by including a tappable info icon next to “gluten-conscious” that pops up with a quick explanation of the term - we could make this information easy and intuitive to find.
Existing Page Layout
Proposed Page Layout
with restructured information hierarcy
Main Takeaways
The clients loved the presentation and really appreciated the work we had done into testing the mobile website for usability issues, and looked forward to implementing the recommendations we suggested as soon as possible.
​
By implementing these small changes, I truly believe that the website's navigation and usability would improve greatly, benefitting Packit Gourmet as a company.
​
It was incredibly rewarding to test the website for usability issues and narrow down on what would be easy to implement, as a company with the least effort - to create the maximum benefit.
