Case Study
| Eupnea Home
2019
Eupnea Home
Building an intimate customer experience while shopping small online.
Spilled bath soak herbs with light effect

Overview

  1. Context
    Client - Eupnea Home
  1. Roles
    Researcher | UX/UI Design
  1. Notes
    Sketch, Figma, & Invision
    80 Hours
    Branding - Cristina Muzzio

Problem

Design an e-commerce site that grows and retains customer base appealing broadly to a rock climber, a young socialite, and older yogi while also facilitating a pleasant shopping experience.

In September 2019, I was approached by Eupnea to build an e-commerce site that would cater towards their customers and grow a wider client base. Eupnea is a small business that designs, creates, and sells meditation and wellness products. As a small-batch company, their product line is limited and they aim to be open and transparent with their customers.

Solution

A responsive site that evokes business values while maintaining and extending company branding as necessary to engage a wider customer base.

2019
eupnea Home

Building an intimate customer experience while shopping small online.

  1. Solution
  1. Client
    Eupnea Home
  1. My Focus
    Research
    Wireframes
    Visual Design
    Testing
  1. Notes
    Sketch, Figma, + Invision
    Ongoing project

In September 2019, I was approached by eupnea to build an e-commerce site that would cater towards their customers and grow a wider client base. eupnea is a small business that designs, creates, and sells meditation and wellness products. As a small-batch company, their product line is limited and they aim to be open and transparent with their customers.

Eupnea home page above the fold.

Research & Empathy

How might I optimize customer experience in order to retain and grow Eupnea's customer base?
Industry Standards
Current Experiences
Customer Motivations

Industry Standards

Competitive Analysis that focuses on navigation and customer contact points.

Opportunities

  • Emphasizing customer contact
  • Standardized Add-to-Cart flow
  • Small site with consistent navigation

Standards

  • Experience promotes brand and has multiple touch points.
  • A compelling landing page

Customer Motivations

After compiling competitor data, I wanted to get to know the customers more and created an initial, qualitative survey. As I started getting survey responses I realized I had an issue: wellness as an industry category is too broad.

It includes everything from açaí bowls to discussions of work-life balance. I realized the limitations of a wellness-oriented research approach and grew concerned that data would be too disparate to draw specific conclusions. What I really needed to understand was why people shop at small businesses. Secondary survey results suggested the following customer motivations:

Money Icon

Personal Values

People spend money on what they value. Similarly they invest in businesses that reflect their values.
People icon

Support Community

Supporting local artists and community members, means supporting your local economy.
Textile Icon

Quality & Experience

People expect personalized experiences and artisan quality or bespoke goods.

Current Experience

Empathy map that tracks trends in user interviews

I synthesized user feedback from one-on-one interviews using the above empathy map and then compared this data with survey results. I gleaned 3 primary user needs.

User Needs

Synthesis

Balancing user needs with business goals: how to leverage motivations to convert.
User flow developing paths between brand/about pages and converting them to customers.

I went through a three-step synthesis phase to understand the connection between customer, product, and business. This translated into developing personas, creating as site map, and developing a user flow. The user flow below focuses on understanding how the business can leverage user motivations to drive conversions. It maps how a user might move between mission and about pages to product pages.

Mitigating pain points and prioritizing business goals through multiple design iterations.

Ideation

I started with pen & paper, sketching out lo-fi wireframes to see how different layouts prioritized content and the extent to which each balanced selling products with the users need to trust and know the store. I structured the home page layout according to business goals and user needs:

Wireframes of home page explaining what worked and what didn't. Displaying an evolving thought process.

Visual Design

I applied the brand to final mid-fidelity wireframes, modifying elements as needed.

01

The header needed to establish the tone of the site, making the user feel welcomed and introducing them to the brand.

02

The chat modal ensures open and easy avenues of communication.

03

I opted for a simple card pattern to keep the focus on the products and the UI clean.

04

Given their limited number, all products could be featured on the home page. This attracts new customers without interrupting returning  customers' experience. Using a a carousel keeps the design clean and saves space.

05

A brown overlay applied to content images presents a more unified visual experience and evokes a soft natural feel.

06

Custom iconography used in place of images to provide design variance and appeal to the client's preferences.

07

Heavier content is broken up into columns reminiscent of newsprint, so as not to turn people off by large sections of clunky text.

08

Following the story of how the owner creates her products, I manipulated the visual hierarchy and grid to keep the user moving down the page and through the content.

09

This section was particularly challenging, but I decided to anchor the text by placing the text blocks in closer proximity instead of crowding the images.

Testing Prototypes

Prototype
arrow pointing right
Mobile Prototype
arrow pointing right
Affinity Map tracking participant feedback

I provided each participant with products from the store so they would have a concrete object to associate the brand with.

After interacting with the prototype, participants were asked to clarify some actions or their general thoughts.

I first built a prototype in Invision for users to test, but recreated it in Figma after edits.

Remarks

The Eupnea team has been really enjoyable to work with. Working directly with store owner let me get to know the brand first hand and know what the business needed. Working collectively to create something beautiful has made me more excited to take on additional clients.

arrow pointing right
Ilgoyo
Pinboard
arrow pointing right