Overview

Design
Next Step

Bluejestic

Led the design and research of Bluejestic E-commerce & Social Media All In One platform that delivers seamless shopping experience.

Role

Being the product designer on this project, I structure the research plan conducted several user research, designed the end to end experience and support engineer implementation

Team

1 Founder
2 Designers
3 Developers

Tool

Protopie
Figma
Photoshop
Miro

01

OVERVIEW

Problem

People struggled with swapping between social media and e-commerce site to make purchase decision.

I found that some online shoppers switch between social media apps and e-commerce apps in order to get useful feedback from friends to help with their purchase decisions. This swapping behavior was causing people to struggle and negatively affecting the user experience. Based on this, I realized there is a need for an all-in-one platform that combines both social media and e-commerce while also connecting people with common interests.

02

web design

Checkout Process

After our team further discuss about online purchase process, I decided to split this process into two parts, Cart page & Checkout steps.

User Survey & User Interview

To build a concise foundation for the checkout process, I conducted surveys and interviewed people who has experienced on online shopping before. I got 50 survey responses and interviewed 3 people in total.
Some Interesting Quotes I Found during the interviews
Love
Improvement
“Their delivery method is well detailed, no hidden fees”
“It's good but there should be more payment methods”
“Transparency”
“No hidden
fees”
“There should be wide variety of options at the checkout, such as alternate payment methods”
“It's very easier and there's always a progress bar that showcase my progress”

Cart Page - First Part

Through surveys, it was found that 90% of the online platforms have the similar typographic style. More than 80% of participants said they are satisfied with the checkout process they have used so far. Therefore, this should prove the feasibility of this typesetting style. And based on the feedback on the user interview, we found that the reason for the emergence of cart abundant is coming from the subsequent check out process.
Based on the above factors, we decided to fit better with users' existing mental models by following the same layout arrangement on the cart page.
I then made a flow map to give myself a map before diving into the design.

Prototype - Cart Page

Checkout Process - Second Part

Based on our platform is an online e-commerce platform, there are many private sellers as well. So we decided to focus on the feedback of some users who have checked this type of e-commerce platform, instead of choosing something like target/best buy And other direct sales platforms.

Based on the feedback from the user survey, the proportions of users who prefer simple and detailed styles are 48% and 52%. Based on this data, we decided to set up two versions of Checkout Process.

Version 1 - One Page Checkout Process

Positives
Negatives
Clear - An one page view of whole process
Cognitive Workload High - too much information in page
Easy to modify any section in one page without swapping back
Possible Distraction From Other Task
Fewer Pages & Fewer Clicks
Analytics - Hard to track sales funnel data - which point cause customer abandons a sale

Version 2 - Multi-steps Checkout Process

Positives
Negatives
Low Cognitive Workload - one task each time
Extra swap action to make pervious steps changes
Easy to navigate - one click each time
Lack of the items detailed description
Remove any possible distraction from the User’s Path

User Profile

I needed to understand the space I was designing for, so I did some online research on the benefits of creating a User Profile feature.
Based on my research, I found that a User Profile benefits both the company and the customer. The company can use User Profiles to gather insights from customer habits which they can use to increase sales through personalization and loyalty programs. For the customer, the User Profile provides a central hub for them to check their orders and manage their personal information.

Domain Research

First, I looked at the market and examined existing social media and e-commerce platforms in order to gain insight from them. Since these platforms have already successfully implemented a User Profile, there is no point in reinventing the contents of the profile. Therefore, we want to focus on matching the user expectation to the existing user profile which wouldn't increase the user's cognitive load.

Card Sorting

In order to understand user’s mindset (expectation), I completed closed card-sorting with eight (8) participants through OptimalSort with 20 different cards to better understand how users group contents under each section in the user profile page.

Site Map

Based on the card sorting results, I created a site map to get a better flow for the users as well as my own design process.

Final Prototype

user profile page
Overview
order
gift card
Friends
payments
help
setting
Followers
order details
balance
friends
saved cards
FAQ
SECURITY LOGINS
friends
pending
activity
friends request
transations
CONTACT US
PERSONAL INFO
stores
completed
send giftcard
default payment
PRIVACY SETTING
groups
order category
Spending
saved items
orders

Linkie Mobile App

Get in touch.

I am looking forward to create impactful product together!
@2021 Designed & Coded by Vincent Zhang