User Experience Designer
paper+bar.jpg

Spread [MVP]

Spread is a food technology platform that connects vendors and partners in the health and fitness space. 

Project Summary

Project Summary

Problem:

- Define and validate Spread's minimum viable product (MVP).

- Design the onboarding process for two distinct target users, with a focus on lead generation and conversion.

Solution:

- Research potential users to validate the MVP.

- Communicate the business model in a digestible way.

Tools: Sketch, Invision, Keynote, Pen & Paper

Role: Product Manager, UX Designer, Usability Tester

 

Discover

Discover

 

User Interviews & Surveys

 The biggest pain point was starting and maintaining user's businesses within the Health, Wellness and Fitness space. This can be resolved with Spread's platform and services, validating the MVP.

The biggest pain point was starting and maintaining user's businesses within the Health, Wellness and Fitness space. This can be resolved with Spread's platform and services, validating the MVP.

Define

Define

 We created 3 personas from user research.

We created 3 personas from user research.

 User Flow

User Flow

user flow.png
 Comparative & Competitive Analysis

Comparative & Competitive Analysis

 We looked at the following to understand the onboarding process for partners.

We looked at the following to understand the onboarding process for partners.

Develop

Develop

 We explored onboarding these two users with different design solutions.   Tabbed Navigation  was the best option. This layout  communicated relevant information specific to the target users without adding additional steps.  

We explored onboarding these two users with different design solutions.

Tabbed Navigation was the best option. This layout communicated relevant information specific to the target users without adding additional steps. 

 Whiteboarding

Whiteboarding

       

  

  

     

 

 

IMG_2346.JPG
 Brand Analysis & Mood Board

Brand Analysis & Mood Board

 Style Guide

Style Guide

 Logo: modern and versatile; appealing to younger demographics, strong influencers in this tech-savvy world  Green: growth, premium value; specific to the health, fitness and wellness industry  Blue:  depth, confidence; representative of entrepreneurship and growth

Logo: modern and versatile; appealing to younger demographics, strong influencers in this tech-savvy world

Green: growth, premium value; specific to the health, fitness and wellness industry

Blue:  depth, confidence; representative of entrepreneurship and growth

 Style Guide

Style Guide

Design, Test, Iterate

Design, Test, Iterate

Usability Goals

We ran usability tests on medium to high fidelity mockups, with the following goals in mind:  

1. Do they understand the business?

2. Do they understand vendor vs. partner?

3. Do they know how to toggle between partner vs. vendor?

4. Can they go through onboarding smoothly?

Minimum Viable Product

Minimum Viable Product

1. Tabbed layout that toggles for Partner and Vendor

2. Social proof and credibility to illustrate different ways to trust the company. 

- How It Works

- Incentives

- Current Partners

- Current Vendors

Iteration #1

Iteration #1

Usability testing illustrates that users still do not understand the business model and the difference between partner vs. vendor.

1. Using a graphic illustration and dialogue bubbles, we can provide context for users to understand the business

2. Reinforce the graphic elements in each tab to remind user when toggling 

3. Improve Spread's credibility and trust with user interface and strategic copy

IMG_2397.JPG
Iteration #2

Iteration #2

Usability testing still shows confusion regarding the business model and partner vs. vendor.

1. Add hierarchy to the graphic illustration in order to guide user through dialogue order

2. Using contrasting colored tabs, the user can clearly delineate the difference between partner and vendor

3. Add more descriptors that can break down the identity of "partner" and "vendor"

4. Improve the user interface to align with the brand identity

IMG_2453.JPG
Iteration #3

Iteration #3

We were one step closer to clarifying the confusion. 

1. Introduce the company at the top so users can understand the business model

2. Lead into the graphic illustration with clearer dialogue, emphasizing certain keywords.

3. Use contrasting colors and a better layout to group the identity and descriptors of partner and vendor more cohesively.

Deliver

Deliver

Desktop Copy.png
Next Steps

Next Steps

We validated 1/4 of our goals but users were still confused. They didn't understand the business model and the relationship between the vendor and partner.  

Next steps:

Focus on communicating the difference between Vendor and Partner to the user, eliminating any confusion about this relationship.