Social Flavor

SOCIAL FAVOR

a Supplement Ecommerce Website Design.

Social Flavor Mockup

PROJECT TYPE:  Group Project (Group Member: Feng Zhu)

DATE:  Oct 2017 – December 2017

MY ROLES:  UI/UX Designer

PRACTICES:  User Experience Research | User flow design |  Rapid Prototyping  |  Visual Design | Usability Testing

DESIGN TOOLS:  Sketch  |  Principle  |  Photoshop | Invision


PRESENTATION STRUCTURE

1. Introduction
– the need
– the problem
– the solution

2. Design Process

  – user flow
– wireframe
– style guide

3. Prototype

  – journal
– product


INTRODUCTION

Social Flavor is a platform combining e-commerce and consulting service. It provides customers with recommended supplement products and at the same time educates them with health knowledge. I collaborated with a frontend developer to build the website for the company, which aims to bring a high conversion rate and a fluent purchase experience to its visitors.

The need
The online supplement sales industry has grown strongly at approximately 10 percent annually, benefiting from a growing health-conscious consumer and sports nutrition consumer. An active lifestyle in a bottle is continuously moving to the mainstream.

The problem
The low conversion rate is a big challenge for online supplement sales industry which the purchase process can be finished without a prescription. Anxiety from incomprehension towards ingredients and functions is the crucial reason for distracting customer’s attention and decelerating desire to purchase. Lifting purchase rate is the main task for this exercise.

The solution

To build an online supplement sale platform that brings efficient health advice and refined purchase experience:

  • in-site information acquisition by articles with health advice and supplement recommendation in stock for visitors to read and search, and by consulting an online nutritionist
  • comprehensive brand introduction to raise brand and platform reputation
  • refine purchase process, provide an elegant shopping experience

DESIGN PROCESS

USER FLOW 01|03

Site Map:

Shopping Flow:

WIREFRAME 02|03

STYLE GUIDE 03|03


PROTOTYPE

JOURNAL 01|02

PRODUCT 02|02