#B2C

#Redeisgn

#Teamwork

E-commerce App Redesign(HongMall)

E-commerce App Redesign(HongMall)

E-commerce App Redesign(HongMall)

E-commerce App Redesign(HongMall)

E-commerce App Redesign(HongMall)

E-commerce App Redesign(HongMall)

This is the case study on the UI/UX redesign of HongMall app, an e-commerce platform. The redesign process involved user research, competitor analysis, and iterative design to enhance user experience. Key improvements included a more intuitive navigation system, streamlined checkout process, and personalized recommendations, all aimed at improving customer satisfaction and engagement with the platform.

This is the case study on the UI/UX redesign of HongMall app, an e-commerce platform. The redesign process involved user research, competitor analysis, and iterative design to enhance user experience. Key improvements included a more intuitive navigation system, streamlined checkout process, and personalized recommendations, all aimed at improving customer satisfaction and engagement with the platform.

This is the case study on the UI/UX redesign of HongMall app, an e-commerce platform. The redesign process involved user research, competitor analysis, and iterative design to enhance user experience. Key improvements included a more intuitive navigation system, streamlined checkout process, and personalized recommendations, all aimed at improving customer satisfaction and engagement with the platform.

This is the case study on the UI/UX redesign of HongMall app, an e-commerce platform. The redesign process involved user research, competitor analysis, and iterative design to enhance user experience. Key improvements included a more intuitive navigation system, streamlined checkout process, and personalized recommendations, all aimed at improving customer satisfaction and engagement with the platform.

This is the case study on the UI/UX redesign of HongMall app, an e-commerce platform. The redesign process involved user research, competitor analysis, and iterative design to enhance user experience. Key improvements included a more intuitive navigation system, streamlined checkout process, and personalized recommendations, all aimed at improving customer satisfaction and engagement with the platform.

This is the case study on the UI/UX redesign of HongMall app, an e-commerce platform. The redesign process involved user research, competitor analysis, and iterative design to enhance user experience. Key improvements included a more intuitive navigation system, streamlined checkout process, and personalized recommendations, all aimed at improving customer satisfaction and engagement with the platform.

Aug 2022 - Feb2023

Timeline

UIUX Designer/Researcher

Role

Aug 2022 - Feb2023

Timeline

UIUX Designer/Researcher

Role

Tools

Tools

Figma

Asana

Background

Background

In the early stage of the app launch, it played a certain role (attracting traffic, cultivating users' habits, etc.), which provided a foundation for the subsequent promotion and development. However, as users slowly developed their knowledge and habits of using the platform, the negative impact of the above pain points on the user experience gradually appeared!

In the early stage of the app launch, it played a certain role (attracting traffic, cultivating users' habits, etc.), which provided a foundation for the subsequent promotion and development. However, as users slowly developed their knowledge and habits of using the platform, the negative impact of the above pain points on the user experience gradually appeared!

Pain points

Pain points

Based on a survey of a random sample of app users and our interaction analyzing data, we've found out that...

Based on a survey of a random sample of app users and our interaction analyzing data, we've found out that...

1

The information is cluttered and difficult to read.

1

The information is cluttered and difficult to read.

1

The information is cluttered and difficult to read.

2

The layout of functions is illogical and confusing, making it not user-friendly.

2

The layout of functions is illogical and confusing, making it not user-friendly.

2

The layout of functions is illogical and confusing, making it not user-friendly.

3

Personalized recommendations are incomplete

3

Personalized recommendations are incomplete

3

Personalized recommendations are incomplete

Project Goal

Project Goal

How might we improve HongMall's current features to offer a more welcoming experience for newcomers, taking into account the positive effects on all users?

As the company expands, we have a significant opportunity to attract new customers. Therefore, we should focus on strategies that not only welcome newcomers but also positively affect our wider community of users.

How might we improve HongMall's current features to offer a more welcoming experience for newcomers, taking into account the positive effects on all users?

As the company expands, we have a significant opportunity to attract new customers. Therefore, we should focus on strategies that not only welcome newcomers but also positively affect our wider community of users.

Experience Map

Experience Map

This journey map highlights ongoing issues with navigating product listings, accessing features, and reading product details. Remarkably, each of the 20 participants faced these obstacles at least once during their interactions with the platform.

This journey map highlights ongoing issues with navigating product listings, accessing features, and reading product details. Remarkably, each of the 20 participants faced these obstacles at least once during their interactions with the platform.

Solutions

Solutions

Information Organization

Information Organization

Current Version

New Design

"I find it uneasy to review my information on 'My Page'. Everything is so cluttered and confusing, I'm not even sure where to start looking."

Challenge

Ensure users can quickly and easily find what they need.

Approach

After interviewing 20 participants, we recognized that our previous design was confusing and the arrangement of features was complex. In response, we've reorganized the entire page to categorize information more clearly and redesigned the layout, incorporating icons to help users quickly grasp the functions.

Current Version

New Design

"I can't figure out where to click to check my shipping status. The page layout forces me to spend too much time reading through the details."

Challenge

Direct users to the information they seek and streamline order-related interactions.

Approach

After discussing with participants, we discovered that the old page layout dispersed information too broadly, making it difficult for users to quickly find what they were looking for. Additionally, it lacked a feature for promptly checking order delivery status, hindering consumers from efficiently tracking the status of their purchases.

Testing & Iterations

Testing & Iterations

Evaluating participant preferences and feasibility

Evaluating participant preferences and feasibility

We thoroughly tested how easy it was to use our website, focusing on how users search for things, get information, and move around the site. We decided which features were most important based on what users need. After working with our website developers, we confirmed that our design plan was possible. We then used data on how people interact with our site to organize features better and change the layout of the page, all with the goal of making the website more user-friendly.

We thoroughly tested how easy it was to use our website, focusing on how users search for things, get information, and move around the site. We decided which features were most important based on what users need. After working with our website developers, we confirmed that our design plan was possible. We then used data on how people interact with our site to organize features better and change the layout of the page, all with the goal of making the website more user-friendly.

Testing Insights

"How can we reorganize the page's information to make it easier for users to quickly find and access the features they need?"

Condensing Information

Organize and Highlight Key Insights: Strategically structure information to spotlight critical data and tailor visualizations for optimal clarity.

Ease of Access to Product Features

Enhancing the user experience in e-commerce by ensuring product features are easily discoverable and accessible within our design framework.

Comprehensive Product Feature Set

Ensuring the full spectrum of product-related features is seamlessly integrated, offering a complete and cohesive e-commerce experience.

Solutions

Solutions

Information Architecture

Information Architecture

Current Version

New Design

"I need a clearer method to view product details. The promotion badges are quite confusing and sometimes interfere with my ability to read the information."

Challenge

Streamlining Information Architecture: Methodically structuring the layout to prioritize and label key information, enhancing user comprehension of essential data swiftly.

Approach

Implementing special markers for pivotal information to minimize search time and facilitate rapid access to product details. Organizing badges efficiently ensures users quickly grasp promotional events, fostering purchasing motivation.

Current Version

New Design

Some of the information I'm interested in isn't immediately visible; I have to navigate to the detail page to access it."

Challenge

Optimizing Product Card Content

Approach

Evaluating the necessity of information displayed on product cards to ensure that crucial details are emphasized, streamlining the shopping experience by enabling quicker decision-making and encouraging user engagement with promotions.

Testing & Iterations

Testing & Iterations

“ Can you get the information on the page?”

“ Can you get the information on the page?”

We tested how easy it is to read and move around different online shopping sites to see how well users can understand and remember information. We worked closely with the team that builds our site, considering how long things take to make and how much they cost, to pick the best version. This chosen version then guided us in creating our product pages, making sure they are user-friendly and doable within our time and budget limits.

We tested how easy it is to read and move around different online shopping sites to see how well users can understand and remember information. We worked closely with the team that builds our site, considering how long things take to make and how much they cost, to pick the best version. This chosen version then guided us in creating our product pages, making sure they are user-friendly and doable within our time and budget limits.

Part 1 Product details page

Part 1 Product details page

Part 2 Product cards

Part 2 Product cards

Testing Insights

"How do you ensure that consumers notice key information, like a sale or promotion, right off the bat?"

Understanding user requirements

Make sure users can instantly find the key information they need when looking at products, making their experience smoother. Mark important details clearly to catch their eye right away.

Optimizing information architecture

Simplify and reorder the information on product cards to make the product list clearer and more user-friendly.

Enhancing with features

Incorporate User-Requested Features: Enhance the displayed information by adding functionalities tailored to consumer preferences, such as implementing arrival notifications

Solutions

Solutions

Personalized Recommendations for Deal List

Personalized Recommendations for Deal List

Current Version

New Design

I'd like to see a wider selection of related items. Currently, when I browse after searching, there aren't many options available, forcing me to search again for related items."

Challenge

Incorporating products related to the searched item on the page.

Approach

One solution we're implementing to address the app's need for personalized recommendations involves enhancing our product search project. We're expanding the range of related items based on the search term and incorporating broader categories into the product list in an interactive manner.

Testing & Iterations

Testing & Iterations

"Would you like to view products related to your search?"

"Would you like to view products related to your search?"

Our challenge was figuring out how to improve personalization for our customers during their shopping experience. Additionally, deciding where to place interactions for related products was crucial, taking into account customer preferences.

Our challenge was figuring out how to improve personalization for our customers during their shopping experience. Additionally, deciding where to place interactions for related products was crucial, taking into account customer preferences.

Testing Insights

"How can we boost the chances of users viewing products and tailor the service to each user without disrupting the efficiency of their current browsing and consumption?"

Association of words

Enhance the search term's associative function to offer related products alongside the searched item. For instance, searching for 'coffee' could also display options like coffee cups, coffee machines, and coffee makers.

Enhance the hierarchy of the categorization

Improving category options to guide users to other relevant categories and product brands.

Requirement for additional data gathering

Through the collection of additional data and the analysis of user behavior using A/B testing and similar methods, we aim to enhance user-friendliness by delivering personalized information."

A Successful Release

The UI redesign was introduced in February 2023, receiving overwhelmingly positive feedback. Users have praised the new features, noting how they improve their workflow.

The UI redesign was introduced in February 2023, receiving overwhelmingly positive feedback. Users have praised the new features, noting how they improve their workflow.

“The new badge feature is incredibly useful for content management! We can set it up independently, eliminating the need to rely on our design colleagues to create badges for each campaign.”

——— Operation Team Leader

——— Operation Team Leader

——— Operation Team Leader

“The entire platform is now cleaner and more efficient for customers to navigate. The layout of our new product detail page is attracting more users to our app.”

“The entire platform is now cleaner and more efficient for customers to navigate. The layout of our new product detail page is attracting more users to our app.”

“The entire platform is now cleaner and more efficient for customers to navigate. The layout of our new product detail page is attracting more users to our app.”

——— HongMall CEO

——— HongMall CEO

This enhanced app design is specifically crafted to boost the efficiency and productivity of our operations team, saving time and streamlining tasks for both our operation and design teams. I'm eagerly looking forward to the next phase of updates for the app's home page, confident that it will continue to evolve and better cater to our team's needs.

This enhanced app design is specifically crafted to boost the efficiency and productivity of our operations team, saving time and streamlining tasks for both our operation and design teams. I'm eagerly looking forward to the next phase of updates for the app's home page, confident that it will continue to evolve and better cater to our team's needs.

This enhanced app design is specifically crafted to boost the efficiency and productivity of our operations team, saving time and streamlining tasks for both our operation and design teams. I'm eagerly looking forward to the next phase of updates for the app's home page, confident that it will continue to evolve and better cater to our team's needs.

This enhanced app design is specifically crafted to boost the efficiency and productivity of our operations team, saving time and streamlining tasks for both our operation and design teams. I'm eagerly looking forward to the next phase of updates for the app's home page, confident that it will continue to evolve and better cater to our team's needs.

This enhanced app design is specifically crafted to boost the efficiency and productivity of our operations team, saving time and streamlining tasks for both our operation and design teams. I'm eagerly looking forward to the next phase of updates for the app's home page, confident that it will continue to evolve and better cater to our team's needs.

This enhanced app design is specifically crafted to boost the efficiency and productivity of our operations team, saving time and streamlining tasks for both our operation and design teams. I'm eagerly looking forward to the next phase of updates for the app's home page, confident that it will continue to evolve and better cater to our team's needs.

Takeaways

Working closely with fellow designers and engineers, our collaboration centered on pinpointing typographic hierarchies for each page while tackling technical limitations. This strategic approach played a pivotal role in successfully rolling out the entire new app design in time for our 7th anniversary. As we move forward to the next iteration, my objective is to gather additional user feedback and utilize it to fine-tune our shopping experience, enriching its functionality and user appeal in line with user preferences.



Working closely with fellow designers and engineers, our collaboration centered on pinpointing typographic hierarchies for each page while tackling technical limitations. This strategic approach played a pivotal role in successfully rolling out the entire new app design in time for our 7th anniversary. As we move forward to the next iteration, my objective is to gather additional user feedback and utilize it to fine-tune our shopping experience, enriching its functionality and user appeal in line with user preferences.

Working closely with fellow designers and engineers, our collaboration centered on pinpointing typographic hierarchies for each page while tackling technical limitations. This strategic approach played a pivotal role in successfully rolling out the entire new app design in time for our 7th anniversary. As we move forward to the next iteration, my objective is to gather additional user feedback and utilize it to fine-tune our shopping experience, enriching its functionality and user appeal in line with user preferences.

Working closely with fellow designers and engineers, our collaboration centered on pinpointing typographic hierarchies for each page while tackling technical limitations. This strategic approach played a pivotal role in successfully rolling out the entire new app design in time for our 7th anniversary. As we move forward to the next iteration, my objective is to gather additional user feedback and utilize it to fine-tune our shopping experience, enriching its functionality and user appeal in line with user preferences.

Working closely with fellow designers and engineers, our collaboration centered on pinpointing typographic hierarchies for each page while tackling technical limitations. This strategic approach played a pivotal role in successfully rolling out the entire new app design in time for our 7th anniversary. As we move forward to the next iteration, my objective is to gather additional user feedback and utilize it to fine-tune our shopping experience, enriching its functionality and user appeal in line with user preferences.

Made by Jingwen Zhang

jingwencatzhang@gmail.com

Made by Jingwen Zhang

jingwencatzhang@gmail.com

Made by Jingwen Zhang

jingwencatzhang@gmail.com

Made by Jingwen Zhang

jingwencatzhang@gmail.com