TRANSACTIONAL UX
UX Process Case Study
Orgain is category leader in organic plant-based food products. With the bulk of their sales in traditional retail, the project objective was to expand their business into direct-to-consumer eCommerce. This case study outlines my process designing Orgain’s entire digital experience.
Client: Orgain, Inc.
Year: 2017 & 2018
Categories: Empathy Research, Mental Modeling, Prioritization Matrices, Experience Mapping, Site Maps, Screen Flows, Wireframes, Prototyping, Style Guides, Visual Design
USER TESTING & EMPATHY RESEARCH
I leveraged pre-existing research and conducted my own research including contextual inquiries, stakeholder Interviews, online surveys, user testing, competitive analysis, and more. Below are my primary discovery inputs.

PERSONAS & MENTAL MODELS
By leveraging existing segmentation work, I refined the Orgain archetypes, mapped needs to tangible features, and organized them into logical pillars. Below are two of the personas: the Health Seeker and Trail Blazer attributes of the Chief Nutrition Officer persona.


CUSTOMER JOURNEYS
I created a matrix to prioritize pain points, summarized the current emotional experience, and then mapped pain points to potential features in an opportunity Matrix.
CURRENT STATE PAIN POINTS

CUSTOMER EXPERIENCE MAP

FUTURE STATE OPPORTUNITIES

FEATURE LIST
I created a spreadsheet with all the features, not only to scope the project but guide us until the last feature is added.

GREEN LIGHT SESSIONS – PRELIM WIREFRAMES
Before moving into the full UI design phase, I needed a green light on the UX strategy. To do so, I created preliminary wireframes to communicate the feature set.
GUIDED SEARCH

MOBILE CATALOG FILTERING

SUGGESTION-BASED SEARCH ENGINE

CART UPSELL

UNIQUE OFFERINGS

INTERSTITIAL ANXIETY

INFORMATION ARCHITECTURE
To present the ideal user experience, I create site maps & screen flows to organize the information and services so they are both useable & findable.
TRANSACTIONAL EMAIL TOUCH POINTS

RETAILERS & AFFILIATES SCREEN FLOWS

HEALTHCARE PORTAL FLOW

PRODUCT HIERARCHY

SITE MAP FLOW


PERSONALIZATION FUNNEL

USER JOURNEY: REFINING THE PERSONALIZATION




STYLE GUIDE
UI style guides are an essential tool for assuring consistent interactions and facilitating a smooth implementation.

HIGH FIDELITY DESIGN
Visual UI Design for Desktop.

PRODUCT DETAILS PAGE

SHOPPING CART

PRODUCT LISTING PAGE

HIGH FIDELITY DESIGN
Visual UI Design for Mobile.




IMPLEMENT
It’s my responsibility to champion the design vision which means iteration between myself and the developers. This can be a laborious and time consuming task but the final product is what maters in the end. Below is a shared doc I used to track this process.

OPTIMIZATION
A UXer’s work is never done. Now that the site is live, the objective becomes optimization; using A/B testing and user feedback to incrementally improve performance.
