B2C / Web / E-commerce / AIGC
Online Shopping Assistant
OctoBuy Online Shopping Assistant
Octobuy is a stylish shopping assistant that offers personalized purchase recommendations to help users make better buying decisions.
MY ROLE
Product Designer， UX Researcher
TOOLS
Figma, Illustrator, Photoshop
CONTEXT
Problem Discover
Have you ever experienced this scenario:
You want to buy a stylish pajama for an upcoming themed party. With limited time to visit physical stores, you open a search engine and type in "cute pajamas." However, the results are not satisfying, and you find yourself clicking through web pages and images to filter through the options one by one. 😵💫 After half an hour, you finally discover an ideal product, only to navigate through multiple clicks to reach a small merchant on Instagram. Now, you start worrying about size, shipping costs, and quality. 🤯 In the end, exhausted, you have to abandon this shopping attempt.
Does this sound familiar to you?🤦♀️
Design Response
I proposed to build an online shopping assistant to help online shoppers make more efficient and confident decisions.
SOLUTION
01
🏁Let's start easy!
Survey findings show that online shopping is often rushed due to time constraints. Our goal is to enhance the shopping experience by streamlining the site map and removing unnecessary content from the homepage.
02
📍All in one site
To enhance user shopping experience, we provide a seamless journey, introducing a new shopping assistant page for intuitive navigation. This eliminates the need to visit multiple platforms, reducing fatigue and hesitation during the purchase decision.
03
🤞Help make better decisions
In the product filtering stage, users may feel overwhelmed by complex information, leading to concerns and potential purchase abandonment. Hence, the new product display interface aims for simplicity and clarity to avoid confusion.
How I Got There
Research
Diving through...
Why is making a satisfying purchase so difficult?
To understand the challenge better, I need to figure out what happens when people try to make a purchase. I went out and interviewed with 16 people to further validate my initial hypothesis and to investigate their pain points. The interview uncovers a fact that many of the potential users said they had a hard time finding their ideal product in a given amount of time due to the huge number of products and sources.
How did people make decisions when shopping online?
Pain Point 1
😵💫Dealing with conflicting information
With so many resources and information available, people often feel overwhelmed and frequently end up in places where they cannot find the products they need.
Pain Point 2
🤦♀️Risk Avoidance
Pain Point 3
🤯Time Concerns
I hesitated at the checkout because I was afraid of not finding a good deal.
David
Software Engineer
Deal hunters:
These shoppers are motivated by sales and deals.
There are 3 steps before a purchase: need recognition — information search– alternative evaluation
What’s interesting to notice: As the time users spend filtering recommended products increases, not finding the desired items gradually erodes their patience, leading to frustration and discouragement. Consequently, the purchasing motivation declines, making it challenging to rekindle.
After this, we make our design goal clearer:
How Might We
maximize a pleasant shopping experience for our users through better purchasing decisions?
Market Analysis
How Current Online Shopping Assistant Works
My first step was to research what the market currently offers and how it works within the confluence of existing habits. I focused on what features each online Clothing Shopping Assistant app offers to help shoppers from product search to checkout.
At present, there are mainly two kinds of intelligent shopping assistant services on the market: web side and mobile application side. We think it is an opportunity to develop online shopping assistant with high feature based on web side.
IDEATE
Redefine Goals
Based on the research as well as the proposed design challenge, here are the goals I am helping users to achieve:
01
Don't let user stop!
User engagement and participation play a pivotal role in fostering a dynamic and compelling sales environment.
02
All in one site
Users tend to hold the assets for a longer time when they feel they have the control and voice over the assets.
03
Give user right information at the right moment
Connecting with fellow investors help users to make the investment decision as they feel safer to invest when they know that they are not investing alone.
Visualizing Concepts
I created lo-fi wireframe to visualize my design concepts.
TESTING & Iteration
Usability Tesing
I conducted 2 rounds of usability tests with 5 users each. The main goal of the tests is to identify any missing step or usability issue.
Finding 1
Make the process more guidable
Issue: More context information behind the advice is necessary to make it more trustworthy.
Before
" I spent a lot of time admiring these attractive product images, but the layout hardly reminds me of a shopping assistant platform."
After
" I like the combination of the search box and Masonry Layout, which would make me better able to start my shopping."
Finding 2
A more integrated style recommendation system to shorten user flow
Issue: The chat window partially blocks the view.
Before
"I find the chat window on the right a bit small when in use, and it becomes inconvenient as it obstructs the line of sight when I'm viewing products."
After
" The new layout is clearer and more intuitive to use."
FINAL DESIGN
🤯Time Concerns?
Impulsive shoppers like the best option instantly.
How it help shopper start easy:
1
To enhance the shopping experience, I removed unnecessary content from the homepage.
2
A masonry layout for displaying products more efficiently and attractively, user can get more information in a short time by glancing at the rapid reading mode
Deal hunters prioritize price over everything else.
How it help shopper save time:
1
User will get notifications once their favorite products is on sale.
2
It can generate diagrams for tracking history price.
😵💫Dealing with conflicting information？
Intuitive shoppers like conclusions.
How it reduce shopper's concern:
1
When typing your requirement, an AI-Powered Assistant will immediately provide you suggestions.
2
It provide a selection of tags in the conversation to help users quickly filter out the products they want.
Analytical shoppers like data.
How it help make better decisions:
1
Shoppers can use advanced filter to find the ideal product.
🤦♀️Risk Avoidance?
Provide right information
To foster transparency and build trust, we display clear shipping costs during product browsing, preventing hidden fees at checkout. Enhancing this with detailed descriptions, high-quality images, and customer reviews, along with clear information on quality guarantees and return policies, significantly boosts user confidence in the shopping experience.
VISUAL SYSTEM
LOGO
User Journey Map
To build a shopping advisor image that is trust-worthy、smart and considerate, I chose orange as the primary color, purple as the secondary color. These color combination aligns with what customers are used to see in real-world shopping. And I chose font family — Heebo to help convey information in a modern and clear way.
Typography
User Journey Map
Heebo
User Journey Map
Hello,
I'm H1
Size: 36 px
Weight: Bold
Hello,
I'm H1
Size: 40px
Weight: Bold
Button
Size: 14 px
Weight: Medium
Body 1
Size: 18 px
Weight: Bold
Body 2
Size: 14 px
Weight: Bold
Colors
User Journey Map
#F2F1F1
#2E2E2E
#7D598E
#EC4D94
#EB8B19
#FAB72B
MY LEARNINGS & Next Step
What I've Learned
Transitioning from urban design to UX design marked the beginning of an exhilarating new chapter in my career. This first hands-on design project felt like setting foot on an uncharted island, where I had the opportunity to rediscover and master fundamental skills from a fresh perspective. After three months of dedicated practice, I've not only survived this challenge, but I'm also poised to flourish in this new realm. This journey has been incredibly enriching, imparting valuable lessons along the way.
If we got more time..
Design is an ever-evolving journey, and I find immense joy in reflecting on the path I've traveled thus far. This is my inaugural UX project, and I anticipate revisiting it periodically in the future. As my understanding of users, shopping psychology, market trends, and design aesthetics deepens, I plan to continually refine and optimize this project. Each review and revision will be a step towards honing my craft and enriching the user experience.
