Work

About

Overview

Research

Through user interviews, I transformed the insights into empathy maps to gain deeper insights into the target users and their needs. The findings revealed that a significant number of target users view online shopping as a pleasurable and soothing activity, serving as a respite from their academic or professional responsibilities. However, they expressed frustration with the overwhelming and confusing interfaces of many shopping websites. As a result, what should have been a gratifying experience turned into a source of difficulty, undermining the intended relaxation purpose.

Findings

01

02

03

Navigation

Checkout process

Experience

Users struggled with the website's navigation system. The menus were unclear, making it challenging for users to find specific categories or browse through the available products. Lack of intuitive navigation hindered their ability to quickly and efficiently explore the site..

Users expressed frustration with the checkout process, finding it to be lengthy and confusing. They encountered multiple steps, unnecessary form fields, and unclear instructions, leading to a cumbersome and time-consuming experience.

Online shopping websites don’t provide an engaging browsing experience

Starting The Designing

Sitemap

Taking into account the users' primary pain point of difficulty with website navigation, I leveraged this insight to develop a well-structured sitemap. The aim was to strategically organize the information architecture in a manner that would enhance the overall ease of navigation on the website. The chosen structure was carefully crafted to ensure simplicity and user-friendliness, streamlining the browsing experience for visitors.

Paper Wireframes

I created paper wireframes for each app screen, addressing user pain points regarding navigation, browsing, and checkout flow. The variations of the home screen wireframes on the right prioritize an improved browsing experience.

Paper wireframe screen size variation(s)

To accommodate Chiao's Shirts' customers who access the website using different devices, I began designing additional screen sizes to ensure full responsiveness of the site.

Digital Wireframes

Transitioning from paper to digital wireframes allowed for a clear visualization of how the redesign could effectively tackle user pain points and enhance the overall user experience.

A crucial aspect of my strategy involved prioritizing the placement of useful buttons and strategically positioning visual elements on the home page.

Easy access to shop products

The homepage is designed to facilitate effortless browsing by featuring a carousel of images and navigation menu options.

Digital wireframe screen size variation(s)

Low-fidelity prototype

I developed a low-fidelity prototype by linking all the screens associated with the primary user flow of adding an item to the cart and proceeding with the checkout process.

​

Throughout this stage, I received valuable feedback from my team members regarding button placement and page organization. I attentively listened to their suggestions and incorporated several changes that specifically addressed user pain points identified during the design process.

Refining The Designing

Mockups

Taking the insights from the usability study into account, I implemented changes to enhance the checkout flow of the site. One of these changes involved adding a straightforward "plus" and "minus" option to enable users to easily edit the quantity of items in their cart. This provided users with greater flexibility to modify their cart without the need for a cumbersome process of adding or removing items.

Before usability study

After usability study

To further simplify the checkout flow for users, I introduced a checkbox that enabled them to conveniently use the same address for both billing and shipping information.

Before usability study

After usability study

Mockups screen size variation(s)

In my mockups, I took into account various screen sizes to ensure the browsing experience is optimized for different devices, including mobile and tablet. Considering that users access the website from a variety of devices, it was crucial to prioritize a seamless experience across different screen sizes.

Conclusion

Impact

According to feedback from our target users, the design of the website was found to be intuitive, enabling easy navigation. The inclusion of images enhanced the overall engagement, and the design effectively established a clear visual hierarchy.

What I learned

Through my experience, I realized that even minor design adjustments can significantly influence the user experience. The key lesson for me was to prioritize the genuine needs of the users when generating design ideas and implementing solutions.