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

VIEW PITCH DECK

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

PROTOTYPING

To provide stakeholders an accurate understanding of how the site will be experienced, I prototype all the major task flows and interactions.
Use a desktop computer to view examples.

VIEW PROTOTYPES PAGE

SPECS & ANNOTATIONS

Providing a developer a Layers design file is not enough. I create comprehensive specifications that include autogenerated specs, written documentation, a verbal presentation, and prototypes for visually communicating complex interactions.

VIEW SAMPLE SPEC VIEW SAMPLE PROTOTYPE

STYLE GUIDE

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

VIEW FULL STYLE GUIDE

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.

.User { Position: Center; }