Redesigned Haband.com

Role: UX/UI/Sr. Web Designer
Responsibilities: Auditing competitors, wireframing, and designing the company's landing pages weekly for a better customer shopping experience
on multi-platforms.

Project overview.

— The Challenge

Working as a UX/UI/Sr. Web Designer for Haband had its challenges. Coming into this position and project, I specialized in web design (prototyping and wireframing). The goals of the project were based on UX research, a skill that I was not previously comfortable with. This new customer-based stance made me modify my design process. By becoming familiar with UX research with testing and meeting customer pain points, I was able to overcome this challenge. Today, I continue growing my skill as a UX researcher by taking courses at Google.

— The Goal

The main goal was to update the homepage to make it clean, easy-to-shop, and aligned with the catalog and social media while still maintaining the Haband culture.

Bluestem Brands encompasses seven dynamic eCommerce retail brands and I had the great opportunity to work with two, Haband and Blair.
Haband started from the ties business and expanded to a retail eCommerce clothing company offering styles for men and women. I was hired to redesign the website to bring a more up-to-date and organized look and feel but still keep the same culture and not completely scare customers away. This project required research, brainstorming, wireframing, prototyping, and testing. I was fortunate to be a part of the team that led this project. I collaborated with teams to find all the customer's pain points and what users need for Haband to stand out among competitors' websites. As of now, Haband's customer visitors have been increasing from lower than 5% up to more than 20% conversion rate.

User Research Summary.

We conducted user research based on the company’s search terms, insights, and site metrics that track conversions and user flow. which I then turned into empathy maps to better understand the target user and their needs. I discovered that many target users started switching from catalog orders to web orders but still get frustrated about how to. However, many retailer websites are overwhelming and confusing to navigate, which frustrated many target users. This caused a normally enjoyable shopping experience to become challenging for them, and stop them from the next purchase and opt-out from emailing list.

User Research: Emphaty map

Sitemap

Empathized with what customers really need and defined the problem based on researches.

Difficulty with website navigation was a primary pain point for users, so I used that knowledge to create a sitemap. 

My goal here was to make strategic information architecture decisions that would improve overall website navigation. The structure I chose was designed to make things simple and easy to use.

Paper Wireframes

Low-fidelity wireframes

High-fidelity wireframes

System designed

User Behavior Analytics

Accessibility considerations

Takeaways

What I learned

I learned that design thinking is very important for Haband(empathize, define, ideate, prototype, and test). It is most useful to tackle problems that are ill-defined or unknown. It also helps me to understand what Haband’s users need.

Previous
Previous

Flower Shop

Next
Next

Web Elements Design