Kim Harris
UX designer

Luster's Pink

A Staple in the Natural Hair Community

Being a natural hair Instagram influencer I have been able to work with several brands over the the past 5 years. Luster's Pink has been apart of my personal haircare routine since I was a child. 

Recently they launched a new product and it prompted me to take a look at their brand website lusterspink.com to see how they have updated the site. To my surprise the site has not been updated for quite some time. The site navigation and layout is very outdated, leaving more to be desired for the overall experience 

Challenges:

1. Update navigation of Luster's Pink's expansive online product inventory

2. Keep newest product launch at the forefront of the site

3. Update typography and brand color usage 

My Role:

As Designer for my project, I was involved in the entire process, including the overall strategy, user research, website hierarchy and visual designs. 

Timeframe: 

One week

1.0 Research
Luster's Pink - UI

Site Audit

In order to better understand the current site in more detail I performed a site audit. This allowed me to rate and and prioritize the site features by different criteria.

Top priorities & areas for improvement:

1. Update site layout and company branding

2. Update navigation for easy use across the site

3. Add CTA's 

Luster's Pink - UI

Branding & Social Media Presence

To better understand Luster's Pink brand image, I analyzed their social media platforms. They have a significant following across Facebook, Instagram and Twitter. These accounts allowed me to get a better perception of the brand identity through logos and branded communications.

Facebook - 145k likes & 144k followers

Instagram - 36k followers

Twitter - 1200 followers

Luster's Pink - UI

Competitor Comparison Analysis 

A look at the field highlighted where Luster's Pink was falling short. Out of the direct competitors I analyzed, 3 out of 4 have at the very least an updated website design. Other places where Luster's Pink fell short in comparison to the competition are:

1. Good Color, Typography, & Alignment

2. Simple hierarchy & Navigation

3. CTA's on each page

4. Easy Happy Path

Luster's Pink - UI

Current Site Navigation Hierarchy 

The current navigation tab is overloaded with options that could easily be re-ordered for optimal organization and utility. 

Luster's Pink - UI

Existing Site

Before we go into my design solutions, here is a view into what the lusterspink.com site looks like today.

2.0 Solutions
Luster's Pink - UI

New Landing Page

Hero Image - I chose a high resolution image of a woman with her natural afro with a Pink background. This speaks to the retro piece of Luster's Pinks history. Visitors immediately have an option to explore Luster's Pink's vast collection.

Best Sellers - This space gives visitors an opportunity to scroll through what other people are buying - let's be honest, people want what other people have. With an "add to cart" option directly from the home page, no extra steps are needed for conversions.

Product Promotion Carousel - Here is where Luster's Pink can show case their newest product's and marketing launches. Each image will have an CTA - maximizing potential sales. 

Social Media Corner - Social media has become a big way for Luster's Pink to connect with their customers and promote their latest products. Having this direct from Instagram feed is a great way to show how real people are using their products. This also gives customers a chance to interact with their social pages.

Luster's Pink - UI

Menu & Submenu Design

Luster's Pink has a lengthy catalog of products that they maintain under the Pink umbrella. In order to give customers optimal browsing I designed a submenu in the top navigation drop down. This allows customers to browse categories and see where product are in the collections. 

Luster's Pink - UI

Product Highlight / Quick view

Quick view allows customers to get additional product information without navigating to a new page. If they want to continue browsing where they left off, it's an easy click of the close button.

Luster's Pink - UI

Product Detail Page

This is the full product detail page that will be consistent across each item in the catalog. Consistent top navigation bar with breadcrumbs that show you exactly where you are on the site. Recommendations are highlighted and suggested for further sale conversions. 

Luster's Pink - UI

Responsive Design

Responsive design is key for any e-commerce website. Customers use all different types of methods for searching and shopping online. My designs for Luster's Pink caters to users on any medium.

3.0 Visual Designs
Luster's Pink - UI
4.0 Prototype
Luster's Pink - UI

Next Steps

1. Build out remaining product pages & navigation

2. Test happy trail with clients & iterate