UI/UX Case Study

E-commerce
Laptop selling

Le Thinh

Our Project
This 10-week project was created by a team of 3 for the Web Design Layout 202 course in
FPT University's Digital Art and Design program. We focused on developing a web interface
that combines aesthetic appeal with user-centered functionality.

Design Brief
Design a website for company to introduce and sell their products.

Project Timeline
UX Design UI Design

Discover (Research)

Define (Synthesis)

Ideate

Design

1st
2nd
3rd
4th
5th
6th
7th
8th
9th
10th

Week Week Week Week Week Week Week Week Week Week

Design Thinking Process

Discover Define Ideate Design Test

Product Overview
User Empathy Map
CJM (As-is)
 IA & User flow
 *Not in

Target Audience
Affinity Diagram
Problem Statement
 Wireframing
school project
User Research Persona HMW & Concept
Style Guild

CJM (To-be) UI-Prototype

Discover

phase

Product overview
Product overview Product Category
Product name: Lapto By Desig

Product Descriptions : A laptop, also called “máy tính xách tay”, is a highly portable and Ultrabook Ch ro e oo
m b k

versatile personal computer. It combines the power of a desktop with the convenience Gaming Laptop 2-in a to
-1 L p p

of mobility, making it ideal for studying, working, and entertainment on the go. Laptop Workstation Basic a to s
L p p

Chromebook

2-in-1 Laptop

Product Specifications
Basic Laptops

B y Usage (Important)
For Study/Office Work:

Laptop Components:
Ideal for simple tasks like web browsing, document creation, Excel planning,
CPU: Powered by Intel or AMD processors.
presentations, and basic photo editing. Suitable for students and office workers
Storage: HDD for larger capacity, SSD for faster performance.
For Graphics/Engineering:

Display: Available in common sizes such as 13.3, 14, 15.6, and 17 inches.
Best for 2D/3D design with software like Photoshop, AI, Corel, or video editing. Full HD
Graphics Card: Dedicated or integrated, crucial for graphic-intensive tasks.
screens with IPS technology for sharper images. Re quires a Core i5 CPU, 8GB RAM or
Battery: Provides portable power.
more
Monitor: Integrated screen.
Lightweight Laptops:

Weight: Lightweight and portable.
Perfect for fre quent travelers, especially for women, with 13-14 inch screens and
Memory & Storage Capacity: RAM and hard drive capacity vary.
weighing around 1.5kg
Material: Commonly built with premium aluminum, magnesium alloy, plastic, or metal
G aming Laptops:

back covers.
Built for gamers with high performance, including 12 0Hz refresh rate screens for
smoother gameplay. Dedicated graphics cards like GTX 1 050 or higher, with Core i5/i7
CPUs and 8GB RAM for seamless gaming

Product Pricing P remium Laptops:


High-end models offering over 8 hours of battery life, elegant metal designs, slim

bezels, and robust configurations for smooth performance.

P rice Tiers for Laptops

Budget Laptops (Under 10 million VND
By Specifications
Users: Students, basic users
CPU
Features: Intel Pentium, Celeron, or AMD Athlon CPUs, 4GB-8GB RAM, 128GB SSD/
Intel Core i3/i5/i7/i9: From basic tasks (i3) to high-performance gaming or video
HDD, HD/Full HD 13-15” screens
editing (i9)
Uses: Browsing, basic office tasks
AMD Ryzen 3/5/7/9: Comparable to Intel, for basic to heavy workloads
M id-range Laptops (10-20 million VND RAM
Users: Work or study needs
4GB: Basic tasks
Features: Intel Core i5/i7 or AMD Ryzen 5/7, 8GB-16GB RAM, 256GB+ SSD, Full HD
8GB: Multitasking, light gaming
display
16GB+: Intensive tasks like video editing, 3D rendering
Uses: Office tasks, basic photo editing
Graphics
Premium Laptops (20-30 million VND Integrated: Basic tasks
Users: Professionals
Dedicated (NVIDIA/AMD): Gaming, graphic design
Features: Intel Core i7/i9 or AMD Ryzen 7/9, 16GB+ RAM, 512GB+ SSD, Full
Storage
HD/2K/4K displays
HDD: Large capacity, slower
Uses: Graphic design, video editing
SSD/SSD NVMe: Faster data access
G aming/Workstation Laptops (30+ million VND Screen/Battery/Weight
Users: Gamers, designers
Screen sizes: 13-17 inches, portability vs performance
Features: High-performance Intel i7/i9 or AMD Ryzen 9 CPUs, 16GB-32GB RAM,
Battery: 3-8+ hours
1TB SSD, NVIDIA GTX/RTX or AMD Radeon GPU
Weight: 1-2kg based on use (ultrabook vs gaming).

Uses: Heavy gaming, 3D design, rendering.

Target audience

Demographics
Age: Pri arily 8- 5, targeting university students and ig sc ool seniors
m 1 2 h h h

p re aring for ig er education

p h h

Gender: alanced, ot ale and fe ale students

B b h m m

Location: Ur an and su ur an areas, articularly cities li e Hanoi, Ho i Min

b b b p k Ch h

C ity, Da Nang, Hue, and an T o C h

Income: Middle inco e fa ilies; students see ing afforda ility alanced wit
- m m k b b h

relia le erfor ance.

b p m

Su b-Se g ments to Consider

Tech-Savvy Students: Interested in using laptops for programming, graphic
design, and other resource-intensive academic work.
Casual Users: Primarily using laptops for note-taking, presentations, watching
lectures, and light browsing.
Gaming Enthusiasts: Students who use laptops for both studies and casual
gaming, looking for decent graphics performance.
Budget-Conscious Students: Students or families looking for affordable options
with good value for money, often comparing specs and prices before purchasing.

Interests & Behaviors

Digital Natives: Used to interacting with technology daily (smartphones, social
media, and online learning platforms).
Study Habits: Frequently engage in group projects, research, and coursework,
relying on laptops for both productivity and connectivity.
Brand Sensitivity: Prefer well-known, trusted brands but open to new entrants if
value or innovation is clear.
Online Shoppers: Likely to research and purchase laptops online, comparing
options via e-commerce platforms like Tiki, Shopee, Lazada, and other online tech
retailers.
Long-Term Investment: Expecting the laptop to last 3-5 years, prioritizing
durability and warranty options.

Pain Points
Battery Life: Many students face issues with battery life during long study
sessions or lectures without easy access to power outlets.
Affordability vs. Performance: Struggling to find a balance between an affordable
price and strong enough performance for academic needs like video conferencing,
research, and software use.
Limited Storage: Storage can quickly become an issue with assignments, projects,
and personal media (photos, videos) taking up space.
After-Sales Support: Limited or slow customer service, making it hard to fix issues
during critical academic periods.

Goals
Academic Productivity: Using the laptop efficiently for attending online classes,
working on assignments, creating presentations, and performing research.
Entertainment & Relaxation: Watching movies, streaming music, and playing
games as part of their lifestyle.
Value for Money: Prioritizing a laptop that provides a balance between affordable
pricing and long-term usability.
Portability: Lightweight and easy to carry around campus, from libraries to
classrooms or cafes.

Distinctive Needs
Performance for Schoolwork: Must handle a wide range of tasks including web
browsing, word processing, basic video editing, and running educational software
without lag.
Connectivity Options: Essential to have reliable Wi-Fi, multiple USB ports, HDMI,
and audio jacks for presentations and connectivity with external devices.
Durability: Laptops need to withstand frequent use, occasional drops, and
transportation between home and campus.
Student-Friendly Pricing & Promotions: Discounts, easy installment plans, or
educational bundles (e.g., free productivity software, extra storage, or warranty
extensions) are highly attractive to this audience.

User Research
Research Focus

Brand Discovery Product Discovery Product Details Cart Check out Confirm & Delivery

Research Goal
B ehaviors, emotions, Key moments and perception of user in shopping experience
Influence factors, expectations and bottlenecks that users are facin
Focus on the Laptop Purchase Experience: Research product, Find source, Laptop’s website purchase.

Some Interview Questions

What aspects of online shopping capture your interest ?

What laptop-selling websites do you know of?
When you visit a laptop-selling website, what information do you look for first?
When you visit a laptop-selling website, what information do you look for first?
What difficulties do you often encounter when using shopping websites?
When using a shopping website, how do you find products that suit your needs during the
product search phase?
What do you typically use your laptop for?
If you want to find information about a product on a website, how do you go about
it?
When choosing a laptop, what do you prioritize the most (price, quality, brand,
reviews)?
What makes you feel assured when placing an order?
For a product like a laptop, which payment method would you use?
After making a payment, what information do you want about the order and while
it’s in transit?

Define

phase

Empathy Map

Says Thinks
"I have never bought a laptop online The first things to pay attention to: Easy-to-
because I don't feel trustworthy. use, Appropriate interface, Shop reviews and
"As a student, I think price is the most credibility
important, and while the price may be a bit Order of what to check first
high, the quality must be good." Pric
Review
Performanc
Brand

Does Fells
First action Feel unsafe when shopping online
Search for produc Shoppee is the website with the invoice that
Check review I am most satisfied with
Payment method: For laptops, it will be COD There are too many ads, which are
(Cash on Delivery)

distracting.

Says Thinks
"I only use websites to compare prices and Choosing a website based on: Reliability
to contact stores for in-person experiences. &Professional appearance (design)
"I think customers often believe that higher The first things to pay attention to:
prices mean better performance. Advertising banners, Categories, Men
"If a website gives me a good impression Order of what to check first
right from the start, there's a high chance I'll Pric
stay and explore further." Review
Performanc
Brand

Does Fells
First action Feel that product images and prices are
Search for produc important
Check review Shoppee is the website with the invoice that
Payment method: For laptops, it will be COD I am most satisfied with
(Cash on Delivery)

Similar product issues that may arise

Price discrepancie
Same brand but different performance

Cause frustration due to inconsistent or

illogical information

User Persona

Interest
Comparing Produc
Priority order when choosing products: Review > Price > Qualit
Users appreciate in a website: Easy to use > Professional > Reviewed

Phi Danh Thinh Influence

20 Hanoi Past experience: People have at least once visited websites to
research products & Learn information about computer
FPT Uni Designer Trusted websites: FPT, Thegioididon
Reference source: Friends, YouTube, Tiktok

Personality Motivation
Tech-savvy Budget-conscious Researching product information before visiting a store
Purchase laptop online
Graphic Designer Gamer

Need & Expectation

Brief Story
Clean Interfac
I’m passionate about creating media publications and Detailed Product informatio
editing videos. As a graphic design student at FPT, I
have to handle heavy graphic tasks, so I’m looking for a Honest Customer revie
laptop that can run software like Adobe and Valorant, Tracking Post-Purchase
alongside other Adobe programs, while multitasking
activities
C urrently, my old laptop can no longer meet my needs
(study, entertainment, etc.), so I’m searching for a new
one to support me
Pain point & Frustration
In my search for the missing piece, I’ve encountered
challenges like not finding contact details, finding
trusted websites, being overwhelmed with too many Confusing Categories: When browsing, some categories may
options, and incomplete information about the laptops
not suit the customer’s preferences, making it difficult to find
I hope to find a place where I can discover the right fit what they need
for me.
Confusing Navigation: The website menu can sometimes be
too broad, including options that don’t match users’ intentions,
which creates frustration
Unwanted Ads: Customers dislike being bombarded with
advertisements and irrelevant offers during the product
discovery phas
Frustration Product Discovery: Some customers feel that the
visuals or product display on the website do not match the real
product, causing dissatisfaction.

Goal
Experience Goal: Reliable Sources

The primary objective when interacting with a website is to find
trustworthy sources for references and potential purchases, with
a preference for options to buy online or pick up in-store
Main Goal: Laptop Use Cases:

Users aim to purchase laptops for purposes such as
Online learning and document handling
Work and graphic design
Gaming
Entertainment like watching movies and listening to music.

Ideate

phase

Pro lem a emen b St t t

"As a sophomore, I need a reliable, user-friendly
shopping platform with a clean and simple interface
that provides detailed product information, honest user
reviews, seamless comparison of related products, and
efficient order management and tracking because I
want to make informed, confident purchasing
decisions and have a smooth, trustworthy shopping
experience from start to finish."

Concept Card
Phase 1,2: Website discovery & Product discovery

Concept: Trusted Shopping Experience

Product Details:

"As a sophomore, I need detailed product information, including technical

specifications, pricing, and because I want to ensure that the product I choose
meets my performance and budget requirements."

Clean design – content Design the header with elements like the menu
as the core, with UI bar, logo, and search bar similar to trusted
supporting it. websites that users commonly use.

Use consistent product

images, element
(lighting, angle, and
image quality).

Phase 3: Product details

Concept: Minimalism detail page

Product Details:

"As a sophomore, I need detailed product information, including technical

specifications, pricing, and because I want to ensure that the product I choose
meets my performance and budget requirements."

Functions: add to C lick 'See More' to view

cart, buy now, information instead of
compare. displaying all

Phase 3: Product details

Concept: Augmented Rating & Feedbacks

User Reviews and Ratings:

"As a sophomore, I need honest and transparent user reviews with clear ratings
to assess both positive and negative feedback because I want to make an
informed decision before purchasing."

By default, the comments will V iew comments by star

display the most recent ones ratings

Phase 3: Product details

Concept: Smart comparison

Related Products:

"As a sophomore, I need to easily compare related products in terms of price,

performance, and brand because I want to evaluate different options that meet
my criteria before making a decision."

Product comparison feature – G PU, CPU, RAM ,Battery...

refer to the two websites:
CellphoneS and Huion.

Phase 4,5 : Cart, Check out

Concept: Quick Cart Review

“As a sophomore, I need to easily view and manage the items in my cart,
including selecting, editing quantities, and applying discount codes, because I
want to purchase only the products I need.”

Refer to the Fix the final price position use Progress bar to
carts of Shopee so that when users scroll help user know where
and Lazada. up to change the options, they are at.
they can always see the
updated amount.

Phase 6: Confirm & Delivery

Concept: Order Tracking & Delivery

“As a sophomore, I need to track my order without having to repeatedly enter a

tracking code, ensure it arrives on time and as described, and be able to check
the product after receiving it because I want a smooth delivery experience and
to make sure the item I purchased matches the description and has no issues.”

You can add a feature for users to see

the date and time for delivery.

Design & Functionalities

To resolve user needs

Minimalism
Informative
Comparable

Clean
Detailed
Trackable
Simple Trustworthy

Design

phase

Information Archi ec ure t t

Actual Screenshot from Figjam file

User Flows

Actual Screenshot from Figjam file

Lo-Fi Wireframes

Home page Promotions and events Laptops y rand bb

Product Comparison

Laptops y needs b

Product detail

Cart
orderer information

Policy

Payment (COD)
Payment (QR)

Payment (VISA)

Confirm
Tracking

Style Guide

01. Colors
B rand olors C

Light Blue / #2189FF Dark Blue / #2667CE

State Co ors l
Success Warning Error
2
# 7A E60 # E2B93B # EB5757

B lac olors k C

Black 1 White
#000000 # FFFFFF

Gre y olors
C

Gra y 1 Gra y 2 Gra y 3 Gray 4 Gra y 5

#3D3D3D #5F5F5F #878787 #CACACA #F7F7F7

Aa
02. Typography
Inter
G oogle Fonts
Inter | 36 px

Headin g 1 Line height: 48 px

Font- weight: 700

Value: Dark color

Use for: oversized text on large display.

Inter | 30 px

Line height: 36 px

Headin 2 Font- weight: 700

Heading
g

Value: Dark color

Use for: Feature intros, top level headers.

Line height and paragraph Inter | 24 px

spacing for heading is Line height: 30 px

1.1 x font size Headin g 3 Font- weight: 700

Value: Gray

Use for: Main titles, use only once per page.

Inter | 20 px

Line height 2 : 4 px

Headin

Aa
g 4 Font- weight: 700

Value: Gray

Use for: Headings that identify key functionality.

Inter | 16 px

Line height: 18 px

Bod Boldy
Font- weight: 700

Value: Gray

Use for: highlighted content, main body typeface

Inter | 16 px

Line height: 18 px

Body Regular Font- weight: 400

Value: Gray

Use for: regular content, main body typeface

Inter | 16 px

Line height: 18 px

ody
Body Text Link Font- weight: 400

B Value: Gray

Use for: regular content, main body typeface

Line height and paragraph Intel | 18 px

spacing for body text is :

1.4 x font size Line height: 20 px

Su tit eb l Font- weight: 700

Value: Lighter gray

Use for: Product card- Product name

Intel | 14 px

Line height: 16 px

Nottice Font- weight: 400

Value: Lighter gray

Use for: notice text, small body text, Product card

- Product code

03. Iconography
Rules 3
1. Live area
2. Save area
20 px

2 px
1

2 3. Full size 24 px

Icon sets Outline icons

fill icons

04. Grid Systems

DEKSTOP HD DEKSTOP TABLET MOBILE

Grid options

Grid options

Grid options

Grid options

Frame:
Frame:
Frame:
Frame:

Desktop 1440 Desktop 1024 Tablet 768 Mobile 430

Number of columns:
Number of columns:
Number of columns:
Number of columns:

12 12 6 4
Column width:
Column width:
Column width:
Column width:

74 px 50 px 88 px 86 px
Gutter width:
Gutter width:
Gutter width:
Gutter width:

24 px 24 px 24 px 16 px

05. Spacing
Levels

8 px 16 px 24 px 32 px 40 px 56 px 72 px 80 px 96 px 120 px

06. Textfields
No Icon
- Icon

La ebl La e bl
Default Form field text Form field text
La ebl La e bl
Hover Form field text Form field text
La ebl La e bl
l
Se ected Form field text
La ebl La e bl
Error Form field text Form field text
Error message Error message
La ebl La e bl
Disabled Form field text Form field text

07. Selectors
Dropdown Checkbox

C ard đồ họa Ram

Ram
C ard đồ họa

Tất cả Ram

GeForce Series
Tabs
GF MX Series
Thanh toán khi isa QR
GF MX Series 2 nhận hàng V

L arge Selectors

25.990.000đ
Breadcrumbs
20.000.000đ
Tên tran g

Tên tran
Hết hàn
g
g

08. Buttons
Pri ary
m Secondar y Tertiary Card FA B

25.990.000đ
Default Button Button Button 20.000.000đ

Hover Button Button Button Mua ngay

Pressed Button Button Button Mua ngay

l
Se ected Button Button

Focused
Button Button Button

Disabled Button Button Button Hết hàn g

09. Cards
Hero slider

Xin Chào
Hã tìm chiếc laptop ưn ý với bạn
y g

Tìm hiểu ngay

Kỉ niệm 70 năm ... Sinh nhật 1 tuổi Sắp diễn ra Sắp diễn ra

Cards

Tên sản phẩm 25.990.000đ

Mã sản phẩm
1 20.000.000đ

Tên sản phẩm 25.990.000đ

Mã sản phẩm
1 20.000.000đ

Danh Huy
Laptop Asus aming G Laptop HP
Th10. 15. 2024
TUF F15 15S
FA506NFR-HN07 FQ5231TU 8U241PA
"Laptop này có thiết kế đẹp, mỏng nhẹ, dễ dàng mang theo
25.990.000đ
khi di chuyển. Pin dùng được cả ngày mà không cần sạc lại.
Hết hàn Mình rất hài lòng với sản phẩm!"
20.000.000đ g

RTX2050 4GB Intel UHD Graphics

R7 7435HS DDR4 3200

16 GB RAM 8GB RAM

Laptop Asus aming G Laptop HP

TUF F15 15S

FA506NFR-HN07 FQ5231TU 8U241PA
25.990.000đ
20.000.000đ Hết hàn g

Final UI
Homepage

Global Navigation

Hero Section

Feature Section

Product List Section

Product List Section

Footer
Promotions

Global Navigation
Breadcrums

Hero Section

Content Section

Product List Section

Footer
Laptop y ...

Global Navigation
Breadcrums

Category Bar
b

Product List Section

Footer
Detailed

Global Navigation
Breadcrums

Product Overviews

Review

Content Section

Product List Section

Footer
Comparison

Global Navigation
Breadcrums

Product Overviews

Content section

Product List Section

Footer
Cart

Global Navigation
Breadcrums

Order Summaries

Footer
Contact

Global Navigation
Progress Bar

Order Summarize

Checkout Form

Footer
Payment

Global Navigation
Progress Bar

Checkout Form

Order Summarize

Footer
Confirm

Global Navigation
Progress Bar

Order Summarize

Footer
Tracking

Global Navigation
Breadcrums

Progress Bar

Order Summarize

Footer

Prototype

https://www.figma.com/proto/kzsuvtt15KcT8QRPxCKJ t/Fina design l l- -

6- - 6
%2 prototype?page id= 54%3A9153 node id= 54-9328 node & - 6 & -
& 7
type=canvas viewport=1 91%2C-2 %2C0.05 t=pNVaZmVS a RKKo 6 & B7 G-
& l - &
1 sca ing=min zoom content sca ing=fixed starting point node - l & - - -
id= 54%3A9328 6

Find Your Perfect Laptop

Conclusion
In this case study, I have explored the design process for a website aimed at enhancing
user experience and meeting their specific needs. By conducting user research, analyzing
competitors, and mapping user journeys, I identified critical challenges and pain points
users currently encounter. This process allowed me to create a more effective and user-
friendly solution.
To ensure that the website meets the needs and expectations of the target audience, I
conducted extensive user research, including creating user personas and empathy
maps. This provided valuable insights into the motivations, frustrations, and goals of
potential users, guiding me toward a simple, user-focused design style.

Additionally, I analyzed some similar websites in the market, which allowed me to identify
opportunities for improvement and integrate unique features such as comparison tools
and tracking systems. These features aim to enhance the overall user experience and
provide greater functionality tailored to their needs.
Finally, I developed user flows and an information architecture that provides a clear and
intuitive path for users to complete their tasks within the website.
In conclusion, I have designed a website that addresses users' needs for simplicity,
functionality, and convenience. My design decisions were guided by thorough user
research, empathy mapping. The website includes user-focused features such as
comparison tools and tracking systems to enhance the experience. This case study
demonstrates how a user-centric approach can lead to an effective and valuable
product that aligns with the expectations of the target audience.

Thank You
Find out More