<  Home

Ancient Nutrition

Ecommerce Storefront built from scratch for an eco-friendly supplement company.
The Client: Ancient Nutrition
The Ask: New eCommerce storefront
‍My Role: I led UX on this project with oversight from our UX director
The Timeline: 6 months, UX had 4 weeks
The Team: UX, UI, PM, Dev, Project Manager

Ancient Nutrition

Ecommerce Store Build — 2022

💢 The Client

Ancient Nutrition makes protein powders and other supplements. They have been in business since 2012 and have prominent medical physicians and authors as execs.

💢 The Client's Ask

They want a new eCommerce storefront that follows best practices and accommodates their users. They want user research.

💢 The Timeline

We have three months and 1400 work hours to research, design, build, and ship their new eCommerce store on Shopify.

.

The Team

Lead Project Manager — Carl Welti
Project Manager — Glenn Kuromi
Visual Design — Maggie Greene, TJ Hari
UX Design — Jack Rometty (Me)
Product Owner — Kelly Lender
Tech Director — Rob Thiessen
Dev — Gilberto Velez, Kevin Dicke, Zarana Padharia
QA — Rhea Yanga, Erica Jones, Alison Cunningham

My Contributions

I lead UX on this project with oversight from an associate director of design. I worked closely with our internal researcher to understand users.

Client Questionnaire & Interview

The first step to any new build is a questionnaire followed by a followup client interview with just the UX & UI team. We got up to speed on brand values, product catalog, market space, and the saturated supplement and health space.

User Interviews

Our Senior Researcher led 6 research sessions to identify where Ancient Nutrition's new site would diverge from industry-wide best practices. I helped her write scripts and process raw interview data. We used these interviews to discover 11 brand-specific UX insights.

Key Research Takeaways 

1. Users don't have enough education to purchase
Users are confused about how to find products by treatments (eg: joint relief) starting from top-level categories (eg: Collagen products).
2. The product card is inconsistent across site, lacking basic data
The product card IA confuses users because it is omitting some desired variables (such as # of flavors) and the formatting is not easily scanned.
3. Subscriptions are difficult to manage, accidents happen often
Subscription management follows unorthodox design patterns and causes frequent issues with accidental upcharges and failed cancellations. These make users that would otherwise enjoy a changed subscription genuinely furious.

Navigation Wireframes

I started wireframes with Navigation because it's the first step in a user's journey on the site, and the first UXR insight (seen below) can be solved with changes to IA and navigation.
1.  Users don't have enough education to purchase
This problem was solved by adding an education moment to the Navigation (see below) and also with a "Category Page" (scroll to "StoreFront Wires" section) that expounds on each category.
Final Design
Ideation & Feedback

Product Card Wireframes

Product Cards followed navigation because they are a global component and can cause dev hiccups if not done carefully. The goal is to have a consistent experience for all shoppable products across the site. This helped us tackle the second UXR insight, noted below.
2. The product card is inconsistent across site, lacking basic data
This problem was solved by ideating with the UXR, and collaboratively identifying which metadata are important enough to live on the product card.
Final Design
Ideation

Storefront Wireframes

With global nav and product card completed, the rest of the puzzle came together over three batches. The most impactful pages have demos below UXR Insights #1 and #3 were addressed in this step..
1.  Users don't have enough education to purchase
This problem was solved by adding an education moment to the Navigation (see above) and also with a "Category Page" (see below) that expounds on each category.
3. Subscriptions are difficult to manage, accidents happen often
This problem is solved mostly by implementing ReCharge, a Shopify app that streamlines subscriptions. There was minimal UX on the PDP and Cart.
Overview
Homepage
Category Page
Product List
Product Details

Recap: Key Research Takeaways, solved

The wires all follow best practices and support the site. But these three points specific to Ancient Nutrition deserved extra care.
1.  Users don't have enough education to purchase
This problem was solved by adding an education moment to the Navigation (see above) and also with a "Category Page" (see below) that expounds on each category.
2. The product card is inconsistent across site, lacking basic data
This problem was solved by ideating with the UXR, and collaboratively identifying which metadata are important enough to live on the product card.
3. Subscriptions are difficult to manage, accidents happen often
This problem was solved by implementing ReCharge, a Shopify app that streamlines subscriptions. There was minimal UX on the PDP and Cart.

UX Is Done, Now What?

With wireframes complete, I moved on to play a support role for the rest of the project.

Supporting UI

I joined all UI team syncs and presentations, both internal and with the client. My role was to keep UI faithful to the interactions and intention of the wireframes, as well as handling client questions related to UX.

Supporting Development

Supporting Dev was as simple as providing basic interaction annotations through Figma comments — their requested method. I also remained a slack @ away for other questions that came up.

UI Design + Live Site

Open AncientNutrition.com

Celebrating Launch

After several months of hard work, we celebrated as a team. This is a necessary step, and belongs in every portfolio! We aren't robots, and it's nice to celebrate as a team.

Design Retro & Lessons Learned

This isn't necessarily part of the "project" per se, but it is part of my process and something you'll see if we end up working together. I take these notes during the project and review them with my oversight / manager afterwards to see what worked and what didn't.

Select Work

Digital ID Badge
A SaaS app feature to help know who you're talking to
View Project
Ecommerce Store
Budget: Tiny
Client: Exploding Kittens
View Project
Ecommerce Store
Budget: Medium
Client: Grunden's Fishing
View Project
Ecommerce Store
Budget: Huge
Client: Ancient Nutrition
‍Current Page — Scroll to top