Go back to all product design projects

Retail Rehab

“Usability rules the web. Simply stated, if the customer can't find a product, then he or she will not buy it.”
— Jakob Nielson

Web Design, UX/UI Design, Graphic Design for Women's Apparel Brand

Brief

Retail Rehab is a women's clothing retailer and subdivision of a women's apparel line. They needed a e-commerce website, which had to be integrated in with Facebook’s shopping catalog feature in order to integrate online shopping with their Instagram page. The proposal for this UX/UI project was drafted in order to convince stakeholders that creating a retail e-comm site for a wholesale clothing brand would be beneficial for increasing sales and decreasing the amount of leftover inventory.

The problem

As a wholesale clothing line that sells to various retailers across the globe, there are designs that sell out, and some that don’t. The designs that sell out are leftover in inventory, which is essentially like sitting money. I presented this issue to the company stakeholders and offered an alternative solution to relying solely on the wholesale market.

Pain points

Upon starting their Instagram account and collecting user feedback from direct messages and comments, the client came to realize that there was a need for customers to have access to single sizes rather than the wholesale pack. Some of the users and stakeholder’s pain points were:

  • No access to current stockists
  • Many of Rehab Lab’s wholesale buyers had brick-and-mortar stores and did not offer all of their designs.
  • Not all styles available to retail shoppers
  • Wholesale buyers purchase specific designs to fit their market, but Rehab Lab as a brand has its own unique brand identity that people want to purchase individually. Having access to all designs seemed to be a common need among users who wanted to purchase single pieces of Rehab Lab’s designs.
  • Leftover inventory = negative revenue
  • Fashion trends come and go as quick as the seasons change, so leftover inventory is negative revenue. To combat this, selling inventory directly to consumers was a solution to make up for the cost of production.

IA & brainstorming sketch

Once I handled the information architecture of the site, I created a wireframe sketch to visualize the IA.

  • Home
  • Landing page with image banners and a rundown of the types of products and in-season features/fashion trends
  • Shop
  • Subcategories: Tops, Bottoms, Outerwear, Swim, Sets
  • About
  • Info about location, contact form, and brand identity

Lo-fi wireframe

User test and findings

After prototyping the lo-fi wireframe, I tested it on fellow colleagues to test whether the flow of the site was intuitive and easy to browse with. What I found was that:

  • 75% reported dislike of the shop categories placed at the top
  • Users reported it was clunky and did not move along with page scrolling
  • 100% liked the use of visuals on Home page
  • 25% did not click through onto the Contact page

Market research

I researched popular women’s clothing website and interviewed users to understand what traits about certain websites they liked and suited their needs. Sites like Fashionnova.com was one of the least favored due to the lack of menu/category options and filters. Whereas Revolve.com’s information architecture was preferred due to its simple yet effectivelayout of information, specifically the left side drop down menu.

Design shift

After getting approval from stakeholders on the sketch and lo-fi wireframe, I created the high-fi prototype using Squarespace’s easy to use, plug-n-play platform. We chose this platform because hiring a web developer was not within budget, so using my graphic design and UX/UI skills, I composited the site together altering the lo-fi wireframe plan to better suit what users expect from this apparel retail e-commerce site.

After testing the initial prototype and getting feedback from users, I shifted from the center menu layout (see "Lo-fi wireframe") to a left flushed drop down menu design, akin to the popular retail sites I researched. Due to Squarespace's rigidity, there were certain features I couldn't not include (i.e. filter search, collapsable menu column, favorite, share).

Key takeaways

The key takeaways from this case study are:

  • Designs can always be improved
  • Although the final product is dissimilar to the original sketches and wireframe, I’m glad I shifted the layout of the site from top center menu to left flushed drop down column menu. Stakeholders and testers agreed that the User Experience of the updated design was more intuitive and easier to navigate through.
  • Location, location, location
  • I learned that the location of the navigation menu and the accessibility of having the menu follow along with scrolling was important to users.

After creating the 2nd prototype, I conducted A/B testing on users. Half of the group interacted with the first prototype (Group A), and and the other interacted with the redesigned prototype (Group B). I found that:

It was satisfying to see that improving the UI of the site lead to better user experience. What was even more satisfying about this design experience was that the redesign was considered through testing and research.

Go back to all ux/ui projects