Lathr

Background:

Lathr is a fictional e-commerce marketplace for organic hygiene products that I solely conceived, designed, and built as part of my SVC program to demonstrate knowledge of concepts taught in class.

My Role:

UX Design
UX Research
Usability Testing
UI/Visual Design
Prototyping
IA

Timeframe:

6 months (FEB-JUL 2023)

Stakeholders:

SVC instructors

Customer:

Shoppers who purchase and use organic hygiene products.

Goal:

Design an end-to-end web experience for buying organic hygiene products, focusing on simplicity, ease of use, and informed purchasing.

Problem:

Customers who choose to buy organic soap do so because they prioritize their health and the impact of their consumption choices. After analyzing the online organic soap market, I noticed a significant lack of crucial information for customers to make informed purchasing decisions.

“How can we provide an easy-to-use web shopping experience so organic soap customers can make confident and informed purchases?”

User Research:

I needed to learn what pain points customers experienced buying soap online. I had six days to conduct my initial research. I planned to use a combination of a short nine question survey posted to Reddit as well as two in-person interviews to maximize the number of data points collected in the timeframe.

Snippet of questions from my survey

Question script for my interviews

I posted my survey to Reddit, and I discovered a few days later it was taken down within a few hours of posting. I had to pivot quickly, so I increased the interviews to five. Despite the unanticipated hurdle, I was still able to collect beneficial data and gain crucial insights.

Research Insights:

After synthesizing my data, I arrived at three key insights why buying soap online is frustrating for customers:

Customers can’t smell it before buying: There’s just something about picking the bar or bottle off the shelf and taking a big whiff. Customers can’t do that online. Smelling the product in the store helps the customer make a real-time decision whether to buy or not.
Customers don’t understand how their purchase impacts the environment: Organic soap customers care deeply about how their consumer choices impact the environment. Is purchasing soap online and getting it shipped to me actually greener than driving to the store? If I buy something with palm oil in it, was it sustainably and ethically sourced or am I buying something complicit in deforestation?
Ingredients matter- a lot: Ingredient names are often technical or industry-specific. It's hard for customers to understand what it is, what purpose they serve in the product, what benefits they have, and its’ environmental impact.

North Star:

Based off these three key discoveries, I knew I had to deliver three critical solutions:

Accurately convey the product’s scent profile.
Provide digestible information on how the user’s purchase impacts the environment.
List a simple breakdown of ingredients, purpose, source, etc.

Information Hierarchy:

Now that I was clear on the customer’s pain points and opportunities, I had enough information to get started. But questions remained on the best place to deliver the critical information users wanted. Where was the best place to surface information about scent profile, environmental impact, and ingredients to users? What was the best intersection of logical and easily discoverable for this information?

To settle this, I decided to run a few card sorting exercises. I asked my participants a shortlist of questions, including:

Where would you go to find out what the product smells like?
Where would you go to find the product’s ingredients?
Where would you go to understand the environmental impacts of your purchase?

After synthesizing the feedback, I discovered 75% of participants expected to find this information on the Product Detail page. There was unanimous consensus to house product scent and ingredients here, with some varying disagreement to house purchase impact here (but still a majority).

My card sort questions.

Competitive Analysis:

For insights and inspiration on design patterns, I scoped the sites of three of my biggest competitors in this space: Pacha, Dr. Squatch, and Native. Contrasting the three sites against one another revealed taxonomy and structural similarities of the Global Navigation, Landing page, Product Detail page, and check-out flows.

The Global Navigation across the three sites shows consistency placing the logo in the middle of the banner. There was also consistency placing the Cart and Login on the right-hand side of the banner. Pacha and Dr. Squatch also placed “Rewards“ on the right-hand side, while Native did not.
Landing pages for all three sites follow the same format of having a large primary card immediately under the Global Navigation. Under the primary card is a row of secondary cards displaying products- Pacha and Dr. Squatch have these secondary cards in a carousel, but Native does not. All three sites also have a promo banner under the secondary cards, advertising the advantages of their products.

The check-out flows for all three sites are identical. These check-out flows have three pages the customer works through (in order): Information, Shipping, then Payment. On the Information pages, the following similarities can be observed:

Express check-out buttons (Apple Pay, PayPal, etc.)
Check-out flow breadcrumbs.
Two-tone page divide- information form on the left side, taking ~two-thirds of the page; cart, total, and discount code field on the right, taking the remaining third of the page.
“Continue to Shipping“ button under the page fold.

On the Shipping pages, all three feature a summary of the contact email and shipping address under the breadcrumbs. Under the summary, the customer is given shipping options to choose from. The two-tone scheme and page divide are still present.

Dr. Squatch Information page- bottom fold.

On the Payment pages, the summary under the breadcrumbs is updated with the shipping method the customer picked on the previous page. Under the summary is the form for the customer’s credit card info. The two-tone scheme and page divide are still present. On the bottom fold of the page, the customer confirms whether the shipping address is the same as the billing address, followed by the purchase button.

Analyzing the patterns across these three sites served as a helpful reference for patterns about information hierarchy, content, and user flows. This information, coupled with my card sorting data, helped me understand how Lathr’s content should be structured.

Dr. Squatch's payment page- bottom fold.

Concept Sketches:

Concept sketch showing how an ingredients list could be displayed to users.

Concept sketch ideating how to convey the scent profile on the Product Detail page.

Concept sketches ideating how details on the environmental impacts of the customer’s purchase (I was labeling this as “Benefits“ during this stage- more on that further down) could be displayed.

Concept sketch ideating on the Landing page structure.

Concept sketch ideating on the Product Detail page structure.

Lo-fi Wireframes:

Using the site map I constructed, the competitive analysis data, and my UX Research data as reference points, I began creating lo-fi wireframes.

Lathr sitemap.

Lo-fi wireframe of the Product Detail page. The solutions for the three user deliverables- scent profile, impact of purchase, and ingredient list- are all nested here.

Lo-fi wireframe showing a shop listing page for bar soaps.

Lo-fi wireframe depicting Landing page.

Color Palette:

Considering all products sold on Lathr are 100% organic/all-natural, I wanted a color palette that evoked natural themes, while still abiding by accessibility standards. Blue, for water; green, for foliage; brown, for wood; etc. I experimented with several different color schemes containing a primary color, two secondary colors, and a complementary color for CTAs.

Palette #1- brown Primary; blue and green Secondary; teal Complimentary.

Palette #2- light brown Primary; light blue and light green Secondary; light teal Complimentary.

Palette #3- green Primary; brown and magenta Secondary; red Complimentary.

Palette #4- blue Primary; yellow and orange Secondary; gold Complimentary.

Palette #5- white Primary; light brown, green and cream Secondary; red Complimentary.

After testing all options, I selected color palette #5. To validate my selection, I asked a Senior Visual Designer stakeholder to review the implementation in my prototype. She gave me feedback that my light brown secondary color was too light and presented an accessibility concern for users. Iterating on her feedback, I darkened the brown in the prototype and resubmitted for her review, which received her approval.

Revised final color palette.

Hi-fi Prototype:

Due to time constraints, I was not able to perform a preliminary round of usability testing before starting my hi-fi prototype, which would’ve been my preference. I knew I’d get a chance to do testing once the prototype was finished, so I trusted my user research and competitive analysis data to guide me.

Lathr’s Landing page

This is the Product Detail page. Highlighted in the red box are the solutions to the three key priorities. Scent profile at the top, purchase impact information in the middle, ingredients list at the bottom.

Example of a shop page for bar soaps

Clicking “Benefits“ shades the background page and displays an overlay detailing how the user’s purchase impacts, or “benefits“, the environment.

Clicking “Ingredients“ shades the background page and displays an overlay listing the ingredient name, the quantity, how and where it was sourced, and the purpose it serves in the product.

Usability Testing:

With the prototype finished, I scheduled five one-on-one interviews to conduct Usability Testing. Sessions were 30 minutes each. I needed users’ feedback on how I designed the solutions to the three key research items. Additionally, in an abstract sense, I wanted user’s feedback on four important high-level themes:

General Usability
Intuitive Use
Information Clarity
Easy Discovery of Information

Below is the list of questions I asked during the sessions:

Testing Results:

After synthesizing the qualitative data, three important insights surfaced:

Define “Benefits”?: The word “Benefits“ was interpreted differently by participants. There was a disconnect between what I labeled as “Benefits” was versus what users thought it meant.
Two for Three: Participants scored the prototype well for ease of discovery and intuitiveness against two of the three key priorities (scent profile & product ingredients).
Less Isn’t Always More: I built one happy path to demonstrate the user journey. This backfired on me- users were visibly confused and frustrated when they clicked on ancillary features and nothing happened.

Final Ideation:

Usability testing yielded mixed results. On the plus side, the solution I built for two of the three key research priorities resonated well with users and didn’t require further changes. On the constructive side, I had to address the feedback around “Benefits” and lack of ancillary features. I implemented the following solutions:

Define “Benefits“?:
I changed the label on the Product Detail Page and on the overlay from “Benefits” to “Impact” to bring extra clarity to users.

Before: The button label on the Product Detail page and the overlay says “Benefits“.

Less Isn’t Always More:
To resolve feedback I received around the sparse nature of my prototype, I built in additional functionality, including: Support page, Cart, Rewards page, Login page, etc.

After: The button label has been changed to “Impact“, and the overlay label was expanded to “Environmental Impact“.

Reflections:

Looking back on this project, there are a few things I learned through experience and mistakes:

Build the prototype for your own machine: I built my early prototype for a screen size bigger than the machine I was building it on. This led to everything being too big, and I had to spend time redoing it. Knowing what I know now, if I had to do this project again, I’d try a mobile-first approach and scale it out to desktop.
Plan for extra research: My survey getting taken down put me in a pinch. I had to scramble to set up additional interviews to close that gap. I should’ve monitored my survey more closely as well as planned for additional interviews from the beginning. They can always be canceled if they’re not needed.
Build a more comprehensive prototype earlier: Going into usability testing with one happy-path & a stripped down prototype was a mistake, especially if you only have time to test once.

Next Steps:

I focused my time & energy building this site for desktop. To take this project further, I would like to create a mobile version of Lathr & look deeper into responsive design. Here are some early mobile artifacts for Lathr.

Mobile Product Detail page.

Mobile Landing page.