Designing for Customer Retention and Revenue
A UX/ UI Redesign for Remy New York, a Philanthropic B2C Hair Extension Company Empowering Women & Children in Vietnam
My Role: UX/UI Designer, Team Lead of 5
Sample Product Page
About Page
Log In Screen
Checkout Modal
Hair Extentsions Page
Our Mission Tab of About Page
Add Payment Method
Press Coverage Page
ABOUT CLIENT
Premium, Ethically Sourced Hair Extensions
Remy New York is a fair trade company focused on supplying ethically-sourced hair extensions and hair care products. Their mission is to use women’s hair to help empower and improve the lives of women and children in Vietnam.
THE PROBLEM
Remy New York did not have a competitive or functional website.
Remy New York’s previous UI was hindering it from standing out against high-end competitor beauty brands and communicating the quality of its products to its customers. As a result, our team was initially tasked with developing a minimalist and luxury UI for their website. After an evaluation of the wireframes the client provided for the redesign, I recognized usability issues that I felt would ultimately hinder the client from achieving his business goals.
THE SOLUTION
A beautiful, modern website with opportunities for customer engagement, and additional revenue.
I pushed to expand the scope of the project to include UX redesign in order to increase sales and opportunities for engagement with the REMY Brand. With client buy-in, our team created a fully functional prototype and a detailed developer handoff for the client to create his new beautiful, modern, and minimalist website.
TABLE OF CONTENTS
CLIENT GOALS
Client Desires a Luxury, Minimalist Aesthetic.
The client expressed a desire for the site to be user-friendly, aesthetically pleasing, and minimalist. The client also aspired to convey a sense of luxury and took inspiration from esteemed brands such as Balenciaga and Tom Ford.
EXISTING MATERIALS
Exploring Remy’s Branding, Wireframes, and Existing Website
The client already had an existing fully live website. He had also already had mid-fidelity wireframes and branding done by an outside organization. I studied each product, as well as the intention behind each of these designs, and began to think of ways to blend the three together.
COMPETITIVE ANALYSIS (UI)
Prominent Beauty Brands Value Minimalism and Bold Imagery.
Our team conducted a competitive analysis of various luxury beauty e-commerce websites, direct competitors named by the client, and inspiration the client named. This process allowed us to gauge themes/ features that are competitive in this space and draw inspiration for our eventual design.
Summary of UI Themes:
White Background, black text
Large, bold images of models and the products
Sophisticated, elegant, and easy-to-read typography
“Feminine” accent colors - using pinks, reds, and light purples.
Slight Rounding on Buttons
UX ANALYSIS
Wireframes are Lacking Content and Organization, Which May Translate to Missed Opportunities for Customer Retention and Sales.
After studying the content and organization of other named competitors and clients named inspiration, I found the clients inherited wireframes and the existing REMY website did not meet market standards in the following areas :
Summary of Issue Areas:
Information Architecture - portions of the navigation bar such as “Explore and “Insider” felt unintuitive and outside of standard practice within the market
Customer Engagement - the home page lacked opportunities for customers to view content and products (ie. “Best Sellers”, More about Remy’s Mission, and
Customer Retention - the inherited assets lacked ways for the customer to remain connected to the brand via social media & newsletters
Missed Opportunities for Additional Funding - inherited wireframes lacked a clear way for user to donate to Remy’s work
Though scope of this project was confined to final UI of the website, I felt that the issues spotted in the wireframes provided would hinder the client in achieving his business goals and ultimately impact the quality of the UI.
PUSH FOR UX REDESIGN
Flagging Missed Opportunities for Revenue and Engagement
I facilitated a meeting with the client to walk him through the additional UX issues I had observed and to expand the scope of the project to include a UX redesign. Once the client was on board, I conducted an informal competitive analysis of other mission-driven organizations in order to understand how similar organizations were compelling users to engage with and support their brands. Later, I redesigned the screens I felt could use the most improvement. Here are the changes I made:
-
The inherited wireframe for the home page didn’t include much content for the user to engage with.
I added multiple sections for the user to easily view products, learn about the company, watch videos about REMY’s mission, and engagement with REMY either through social media or its newsletter. This approach ultimately will translate to more opportunities for sales, engagement with REMY’s products and brand. This approach is also inline with market standards for e-commerce brands and mission driven organizations.
Before
After
-
Issue #1: The inherited navigation bar had two tabs that lacked clarity in purpose: “Explore” and “Insider”. The “Insider” page was about industry secrets the client had learned about the hair care industry, and the “Explore” page was designed to have tips for selecting certain products
Solution: Move the “insider” page to an “about” page, since the content of that page spoke to how and why Remy’s hair was superior in quality and more ethical in its acquisition. I also scrapped the “Explore” page, as the page felt out of place and not required by the client
Issue #2: The inherited wireframes scrapped the “About” page from the navigation bar. In my opinion, Remy’s mission and origin story. This is crucial to connecting with potential customers and differentiating itself from other competitors.
Solution: I chose to change the navigation bar and add a tab “About:’ I also placed a second navigation bar within the About page to organize all of the relevant information about Remy in other places on the page (ie Press Coverage, How the company Started ex.)
Issue #3: Content on the Insider page is long and difficult to read
Solution: Use accordion folders to organize the information and ease for the reader
Before
After
-
Though the client expressed he was in need of a donate page, the inherited wireframes eliminated this page from the nav bar of the original website and instead opted to have it be a section at the bottom of the home screen. I believe the “hidden” nature of the donate page will translate to missed opportunities for additional funding for Remy NY.
As a result, I re-introduced a donate page back into the navigation bar for accessibility and prominence on the website. I also changed the language from “Donate” to “Get involved” as this language tends to be more frequently used in the non-profit space.
Before
After
With approval from the client, our team revisited the UI.
INITIAL UI ITERATIONS
Considering Client Branding, Competitor UI Standards, and Accessibility
At this stage, I instructed each team member to create their initial UI iterations based on our UI research and the client’s branding for the client to select from. Below are my initial designs based on the original wireframes provided. I chose to stray from the bold color choices in client branding to avoid contrast issues and stick to selections that mimicked the market and client needs (minimalist, simple, and elegant). Ultimately, the client selected the iteration with a black banner for our team to further iterate on.
Original Branding Provided by the Client
My Initial Iterations Considering Branding, Competitor UI Standards and Accessibility ( ie Color Contrast)
DESIGN SYSTEM
More Iterations & Finalizing Design System
After multiple iterations, we settled on beautiful minimalist iconography and typography. It was important that the font we selected for the site match the logo from the client branding. From there, we created a design system and implemented text, color, and grid styles in Figma for consistency.
SHIFTING DIRECTIONS
Uncertainty Around Content = Move Away from Accent Color
The client informed us he was changing his content and was uncertain about the direction it might go in. As a result, we leaned away from a pink accent color so the client would have more flexibility when adding content to his site in the future. I pushed to incorporate content that displayed the source of the hair and the real people that a customer’s purchase would serve to connect with the customer and communicate the brand's authenticity.
Hair Extentsions Page
Our Mission Tab of About Page
Log In Screen
About Page
Sample Product Page
Checkout Modal
Add Payment Method
Home Page
Press Coverage Page
Payment Methods Page
DEVELOPER HANDOFF
Detailed Annotations & Measurements
I delegated each team member to leave detailed annotations of each interaction using the “Annotate It” plug-in as well as pixel measurements using the “Measure” Plug-in. We also prepared and organized all components in the prototype by purpose and left detailed notes about the usage of each.
CONCLUSION
Reflections
I felt so honored to have been a part of such a meaningful project with an amazing cause. Reflecting on this process, here is what I learned and what have done differently:
Lessons
Boost Morale When Things Go Left - There were several points in this project when we ran into some roadblocks. In those moments, it was crucial for me to create space for the team to voice their concerns and problem-solve.
Manage Client Expectations - Since we moved to expand the scope of the project it was important for me to set clear definitions of scope and articulate design decisions.
Opportunities for Improvement
Fleshing Out the Details: Due to time constraints, there were some aspects of the website we were unable to flesh out such as the integration with Shopify during checkout. I would have loved to sort through those specifics with the client.
Next Steps
The client will move to develop the website. I’m eager to follow up with him to measure the impact of the redesign. In the meantime, I would encourage the client to add more content, connect their social media accounts to the website and eventually incorporate UGC content to establish reputability amongst their customer base.