Pixel Perfect Purchasing : E-commerce UI Reborn
Unveiling a cutting-edge redesign for old E-Commerce brand App. PChome 24h Shopping is a well-known electronic brand in Taiwan, but even after having an app for many years, it still suffered from low brand awareness and poor usability .This redesign has revolutionized user experience and enhanced customer satisfaction. The project has also established the Design Guideline for the first time.
Role
UI/UX Designer
Contributions
UI/UX Design
UXR
Project
EC App
2 Month
Team
Project Manager
Dev Team
Discovery & Gather Feedback
Our team started from the app store reviewing to understand what stop user from purchasing, what they thought about this products, their user experiences. We collected more than 100 responses to figure out what can hugely change their experience. Here’s the 3 most pain points summarize from our users:
anonymous user
“
the style, feel and layout remind me of something I would have seen ten or more years ago.
”
anonymous user
“
It’s not very intuitive, and difficult to navigate. Really terrible using experience.
”
anonymous user
“
Just like stuck lots of website interface inside an app, rather than a native one.
”
The Challenge
“ This app do not has a clear sitemap, and all the older 320px design needs to be scaled up to 375px, which will require proportional layout adjustments and style updates.”
How to Start
Base on where our user having issues, our team’s next step is to audit the pain point across every pages. You can't start a redesign without knowing a full picture. It is crucial to have a comprehensive understanding of the entire application. Therefore, we initiated the process by creating a sitemap as the first step. We divided the project into segments and proceeded to complete each part.
I had to check every issue by going through every page. Let's pick this category page as an example and dive into the interface.
1
4
5
6
7
2
3
Must improve issues !!
Click range is unclear:
This can be due to a variety of factors, such as small buttons, lack of contrast between clickable elements and the background, or inconsistent use of color.
Color contrast is not sharp enough.
This can make it difficult to read text, identify clickable elements, or understand the overall layout of the interface. Foreground components mixed with background components.
There is no uniform spacing, and the interface configuration is confusing.
The overall layout is not well-organized. This can make it difficult to find what you are looking for, or to understand how to use the interface.
Unable to identify the click area, too many prompts.
Elements on the screen that look like they can be clicked, but only a few of them actually works. This can be confusing and frustrating for users, and make it difficult to complete tasks.
Price cannot be highlighted and is not attractive enough.
As a e-commerce app, prices on the interface are not standing out can make it difficult to see the prices, or to compare prices between different products.
Blocks are divided too finely.
Interface is divided into too many small blocks. It is difficult to see the overall layout of the interface, or to find what you are looking for.
Design Guideline
The color scheme of the app is revamped to optimize screen color contrast. The font size hierarchy is refined for improved clarity and readability, The Guideline define the whole style and basic layout .
regular
Medium
Bold
regular Italic
Bold Italic
Title 1
Title 2
Title 3
Body 1
Body 2
Body 3
Caption 1
Amount-L1
Amount-L2
Amount-M1
Amount-M2
Amount-S1
Amount-S2
Typography
Screens
while maintaining a consistent design style across the website. The interface design is modernized to enhance browsing experience and facilitate future block optimization. Here is the Old Version v.s. New version.
Maintain consistency in the operating area to reduce complexity and prioritize intuitive operation. Re-layout the information considering its importance, reduce the sense of warning, and unify the prompt display specifications.
Enhanced Contrast Ratio to Complying WCAG
Throughout the process, valuable insights were gained from user feedback, usability testing, and data analysis. Users expressed frustration with the app's navigation and found certain features confusing. The project team identified key pain points and focused on improving the app's information architecture and visual design.
The next step involves implementing a more intuitive navigation system, simplifying the onboarding process, and incorporating interactive elements to enhance user engagement.
Additionally, personalized recommendations and a streamlined checkout process will be introduced to improve user satisfaction and retention. Continuous user testing and feedback loops will be established to ensure the redesign meets the users' needs and results in a seamless and delightful B2C app experience.