fgds button.jpg
FashionGo Dropshipping Logo.png
RESEARCH / WIREFRAME / UX DESIGN / USABLITY TESTING / VISUAL DESIGN

Overview

Launching a new dropshipping application on Shopify called FashionGo Dropshipping. I was hired as the first UX designer on the product planning team to work closely with cross-functional team members to plan, develop, and launch this new application. My work consisted of research, wireframe, design and prototyping for the 3 desktop and 1 mobile application. I was the main designer responsible for the overall design direction, app interactions, and user flow of the interface. Develop process flows, wireframes, mock-ups and prototypes to effectively communicate interaction and design ideas.

Application 1 : FashionGo Dropshipping Desktop / Mobile App
Application 2: Web Admin - Internal Management Software
Application 3: Vendor Admin - Vendor Management Software

My Role
UX Designer

Duration
16 months

Tools
Figma, Photoshop, Illustrator, Dooray, Invision, Overflow

project type.jpg
goal and success metrics.jpg
problem statement.jpg

Design Process

fg dropshipping design process.png

Understanding the Problem

For the first few days after I join the FashionGo Dropshipping project, I immediately started researching all the competitors and relevant users in the dropshipping space. Once we identified the leaders and user market for the dropshipping industry, we started digging deeper to see if there were any sort of inconvenience or a problem we can solve and apply into our new dropshipping platform.

My research encompassed:

  • Understanding the user goals and needs

  • Uncovering pain points with the existing user journey

  • Determining the success of the tasks measured

  • Understanding the dropshipping business model

  • Discovering competitor's strengths & weaknesses

  • Exploring influencers in dropshipping space

Define

define.jpg

Research

First, before touching anything related to design, I wanted to dive into the psychology and motivations behind dropshipping users and suppliers.

white paper research.jpg

Competitive Analysis

The next step was conducting a competitor analysis to determine the pros and cons of other similar apps and services.

competitor analysis.jpg
benchmarking.jpg

I also researched our competitor’s platform in-depth to find out what features they had, and how they assisted the users in sourcing their products and importing them to their online store. I looked for what filters were most used, and what product information, and features were important to the users when they pick an item to dropship.

fgds competitors.jpg

User Survey

After the initial research, I was interested to collect first hand data from our target audience in order to create an app that was perfect for their needs.

user survey.jpg

Conceptualization

Using my findings from the inspiration phase, I created three user personas to represent users with different backgrounds and needs.

user persona.jpg

User Journey

Using my findings from the inspiration phase, I created three user personas to represent users with different backgrounds and needs.

user journey 1.jpg
user journey 2.jpg
user journey 3.jpg

Insight & Analysis

After understanding the dropshipping market, what our competitions were doing, and what our suppliers and user’s wanted and needed. I summarized what we needed to focus on.

pain points.jpg
proposed solution.jpg
design principles.jpg

Ideate

Our competitor analysis and user stories helped us  determine the essential features the app would need to make it successful and useful. We also created a user flow diagram to map out these features and see what kind of screens would be necessary for the app.

essential features.jpg
FGDS User Flow.jpg

Design

Next, we sketched low-fidelity wireframes with pencil and paper. After we agreed on the general layouts of our screens, we turned to Figma for our mid-fidelity wireframes

wireframe (final).jpg
desktop.jpg
mobile.jpg

Style Guide

I've created a design guideline, compiling all of our components, colors, icons, and typefaces in our shared Figma file. So designers can take it and apply it on their pages.

styleguide.jpg

Mockups

Finally, we started creating hi-fidelity mockups and interaction prototypes to present to the development team. From there we had constant Q&A sessions to clarify our vision. I was responsible for Find Products, Import List, Product List, Settings, etc. 

find products.jpg
filters.jpg
confirmation message.jpg
product cards.jpg
product details.jpg
order samples.jpg
import list.jpg
import list details.jpg
product list details.jpg
product list variants.jpg
connect your store.jpg
pricing rules.jpg
order settings.jpg

LIKE MY WORK?

Let's talk about your project and how I can help you!