Pastel
Pastel
Embedded Files
UX/UI Designer for UX accessibility audit and research
UX/UI Designer for UX accessibility audit and research
Preview of wireframes and UI components created for Pastel.
Role
Role
UX Research
UI Design
Date
Date
Aug 2022–Sep 2022
Tools Used
Tools Used
Fullstory
Accessibility tools
Adobe Illustrator
Figma
Framework
Framework
Overview
Overview
Discover Pastel was a food delivery and pick-up platform that partnered with local makers to serve the San Francisco Bay Area. I served as a product design intern from August up to when they announced that they were pausing service in September.
While I was there, I conducted a full UX accessibility audit and helped prioritize features for their design roadmap based on findings from the audit and user interviews.
The Problem
The Problem
Pastel's website was developed with the changing needs of the business, so it needed a re-design for unified user experience.
Landing Page
(As of Sep 2022)Landing Page
Home Page
(As of Sep 2022)Home Page
"Shop All" Page
(As of Sep 2022)"Shop All" Page
Business Goals
Business Goals
Overall, we aimed to increase checkout conversion rates of both new and return users and increase brand loyalty and trust.
Constraints
Constraints
Pastel was a start-up with only a few engineers, so building desired product features would not be instantaneous.
In addition, I was only with the company for 1.5 months before they underwent re-structuring in response to the changing food-delivery market. As such, my project only reached the "Design Review" stage and was never implemented.
Pastel Design Process
Pastel Design Process
I budgeted 40 hours to my tenure with Pastel to deliver the following:
Research
Accessibility Audit with Recommendations
User Interviews with Card Sorting Exercise
Solution
Information Architecture
Wireframes
Mockups
RESEARCH: PART 1 of 2
Accessibility Audit with Recommendations
Accessibility Audit with Recommendations
I provided UX recommendations for a series of important user flows:
Onboarding flow
Shopping flow
Checkout flow
Manual Examination
Manual Examination
Checked and rated the web interface against WCAG 2.2 Level AA standards (via The a11y Project Checklist)
Evaluation based on Nielsen Norman's 10 Usability Heuristics
Referred to over 100 CSAT reviews under 5-stars collected since the beginning of Pastel
Used NVDA Screen Reader to ensure content and images were screen-reader-friendly
Used WCAG Color Contrast Checker to ensure sufficient color contrast ratio
Automated Audit
Automated Audit
Used WAVE (Web Accessibility Evaluation Tool) Browser Extension to identify code-related WCAG violations
Watched user sessions flagged for "Rage Clicks" from Fullstory to help identify common pain points
"Rage Clicks by URL" on Fullstory was a useful reference to see on which page users may have struggled.
RESEARCH: PART 2 of 2
User Interviews with Card Sorting Exercise
User Interviews with Card Sorting Exercise
After conducting the accessibility audit, it was paramount to observe users to uncover further usability problems.
Re-defining Scope
Re-defining Scope
Using data from the audit, we wanted to focus on this top issue: some users find it difficult to navigate available products.
Target Audience
Target Audience
Using Pastel's existing archetypes, we chose to focus on The Explorer, identified by these characteristics:
A typical Explorer customer archetype
Likely retirees
Consistent
Likes to give feedback
Honest and practical
Cost-sensitive
Can be confused by changes
They seemed to be most likely to struggle with using the digital product. If we made Pastel more user-friendly and easy to navigate, understand, and use for The Explorer, it would likely benefit other users as well.
Hypothesis
Hypothesis
We believe that product discovery could be a pain point because there is no way to sort beyond maker and given food categories
Therefore we believe building a more comprehensive search (filter + sort) function, starting with re-categorization,
Will result in more items added to cart and increase brand trust and loyalty
We will have confidence to proceed when we see an improvement in the following benchmark metrics (as of 8/1/2022):
product-home-loaded to cart-item added: 9.8%
cart-item added to checkout-loaded: 5.5%
Research Questions
Research Questions
We used the following general questions to inform our interview discussion guide.
First Impressions: How do users feel while using the discoverpastel.com website?
Task-Focused: Are users able to easily and successfully navigate the landing page, shopping, and checkout experiences?
Summary: How likely are users to return to the product or recommend it to their friends and family?
Open Card Sorting Exercise: We did a quick card-sorting with OptimalSort where we asked users to sort 20 randomly selected Pastel products into categories.
Recruitment Method
Recruitment Method
We selected those with sub-5 CSAT scores from converted users and sent out a blast email offering a $25 Pastel gift card for a 1-hour usability test.
We conducted 11 total user interviews over the course of 2-weeks.
Key Insights
Key Insights
Users prefer to use desktop shopping experience over mobile because they prefer seeing more of the products at-a-glance.
Users prefer to have more control over the product discovery process. There is a lack of trust with the website's discovery tools.
The home page has pre-defined categories, but doesn't seem to be inclusive of all possible products under, for example, the "Freezer" category. In addition, products seems to be lacking logic: "why is pizza next to beef rib soup?"
The search bar option doesn't work accurately. For example, searching for "vegan" yields products like pepperoni pizza or pork tamales, which are definitely not vegan.
It's tiring to navigate between "Makers", since it requires clicking through the long alphabetized sub-menu list.
Open Card Sorting Exercise: At the end of the interview, we did a quick card-sorting with OptimalSort where we asked users to sort 20 randomly selected Pastel products into categories.
We found that users overall preferred fewer and simpler categories. Then preferably each category would contain sub-categories for a more granular search.
Open Card Sort results from one tester on OptimalSort.
Customer Journey Map
Customer Journey Map
I used data from the user interviews to create a journey map of the product discovery process. This maps the average experience of a user of The Explorer archetype. (Emotional line revision)
SOLUTION: PART 1 of 3
Information Architecture
Information Architecture
It was clear that we needed to build a product listing page (PLP), which is a page on a website that presents a list of products based on a category or search query, to improve the customer search experience and conversion.
However, implementing a completed PLP was going to be a longer-term project outside the scope of my contract with Pastel. So I focused on starting the information architecture of a PLP by simply proposing new tags to capture for each listed product.
Original Tags
Original Tags
Pastel captured only the following metadata for their products:
Allergens
Allergens (nuts)
Service days
Freezer or fridge
Serving size
Shelf life
Ingredients
Dietary needs (vegan, vegetarian)
Price
Proposed Tags
Proposed Tags
Users expressed the need for basic search filters and a faceted navigation system. Making search easier and faster should lead to lower cart abandonment rates, leading to higher conversation rates and profit.
Search Filters
To start, search filters are a basic and efficient way to help users find what they're looking for. Many of Pastel's users expressed that it was easy to get lost in Pastel's product catalog. Furthermore, most have familiarity with grocery shopping platforms, like Instacart, so it's important to create a solution in line with those mental models. In addition, using data from the open card sorting exercise, I proposed categorizing products into the following:
Alcohol
Beverages
Breads & Bakery
Breakfast Foods
Condiments & Sauces
Dairy & Dairy Substitutes
Prepared Foods
Gifts
Frozen Foods
Meat & Seafood
Dried Goods & Pasta
Snacks & Sweets
Faceted Filters
I also proposed ways to further narrow results by different dimensions (facets) that were important to users.
Availability (By date and pickup locations)
Popular Food
Meal
Diet
Allergens
Maker
Maker Location
Cuisine
SOLUTION: PART 2 of 3
Wireframes
Wireframes
I made wireframes for a potential PLP, starting with research via a lightning demo of existing products that can be used as inspiration for concepts.
Lightning Demo
Lightning Demo
I compared shopping experiences on established and successful grocery delivery sites.
I was inspired by a variety of design features from each of these sites. Most importantly,
I noticed that these pages commonly featured curated categories, such as "Deals", "Popular Searches", or "Picked for You". These optimize the shopping experience by reducing cognitive load and facilitating product discovery.
The cleverly designed product cards expedites the shopping process by showing relevant information as icons or labels and allowing the user to directly add to cart in a large call-to-action button.
The Wireframes
The Wireframes
We wanted to gradually turn Pastel's existing "Search" page, which is mostly blank, into a full PLP.
Pastel's existing Search page. (As of Aug 2022)
Firstly, I created a wireframe for a prospective MVP—a traditional PLP experience on the Search page, where users can search for items using the given search and sorting features.
Proposed wireframe for traditional PLP.
Next, I created an alternate Search page that optimizes personalization and reduces interaction cost.
We introduced popular categories like "Breakfast" and "Vegetarian" to see if it would impact the number of items added to cart.
Also, we added "Your Recent Orders" and "Recently Added" because
Return users often repeated orders from their favorite makers
Return users enjoy trying new items added for the week
Proposed wireframe for product discovery feature on Search page.
SOLUTION: PART 3 of 3
Mockups
Mockups
The next step was to find a section of the PLP project that could be implemented within my 40-hour tenure at Pastel.
Product Requirements Document (PRD)
Product Requirements Document (PRD)
The PRD for the Search page contains goals, a timeline, and other details for creating a PLP.
(Click here to view the full PRD.)
We decided to build out "Popular Categories" since it had a smaller scope and could be quickly implemented by Pastel's engineers.
The first user feature on the PRD is the lowest hanging fruit to build and test.
Popular Categories
Popular Categories
The first step was to decide which categories to choose. We used data from the open card sorting exercise to hypothesize the most popular facets:
Diet type: Vegan, Gluten-free, Kosher, Halal
Cuisine: Asian, Latin
Food type: Pizza, Sandwiches
Meals: Breakfast, Entrees
Then I started to mock-up illustration styles. Per the brand guidelines, a Pastel vibe is simple, organic, imperfect, and subtle.
At first, I devised these illustration styles. Feedback from the Pastel team said they would like to see even simpler and less photo-realistic illustrations.
V1 of illustrations were too photorealistic for simple button designs.
V2 of illustrations was met with positive feedback, meeting Pastel's brand illustration guide of "simple, organic, and imperfect".
Out of these three button styles, the Pastel team voted for style #1 because it was the most optimal for function and clarity. Sometimes too much styling can detract from that.
Conclusion
Conclusion
Next Steps
Next Steps
If we were able to implement "Popular Categories" (then a full PLP down the road), I believe we would have been able to increase checkout conversion rates of both new and return users and increase brand loyalty and trust.
The next steps were to track the rate of interaction with "Popular Categories" and see if those users had a(n):
Increase in number of items added to cart (measured by the event cart-item-added)
Increase in checkout rates among those users (measured by the event cart-item-added and progress to checkout-loaded)
Increase in product exploration and discovery as measured by
Longer session (shopping) length
Number of items added to wishlist
Number of PDP modals opened
Decreased time to add items to cart (improved efficiency)
Learnings
Learnings
This was my first experience working with an e-commerce product. I was able to work with Pastel's senior product designer and take the lead on many aspects of UX design:
Research
Accessibility Audit with Recommendations
User Interviews with Card Sorting Exercise
Solution
Information Architecture
Wireframes
Mockups
I learned how to balance the needs of the end-user with the capacity of a small organization with limited resources. For example, I understood that building a faceted navigation system is significantly more expensive to create and maintain. It would require existing and future products to have metadata applied for each facet. Furthermore, this system would increase interaction cost. However, we concluded from the research that allowing granular search results is necessary for an inclusive and personalized shopping experience.
Page updated
Google Sites
Report abuse