ROLE: UI/UX, Visual Design
As a beauty tech company, eSalon creates customized at-home hair color and delivers it to your door. It combines high tech, artistry and personalization granting it a 4x Allure Award Winner for Best Home Hair Color. eSalon offers an online subscription based model that’s slowing making its way as a brick and mortar salon.
SELECTED PROJECT No. 1: Color Mastery
TEAM
Product team of 4; VP of Product, Product Lead, UI/UX Designer (myself), UI/ Visual designer. Dev team of 3.
ROLE
As the UI/UX designer on the project, I collaborated with the product and creative/marketing teams. Ideation, taxonomy and categorization of the editorial content came for the Brand Director of the creative team. The product team defined how that content would be translated to web and mobile. I created user flows, wireframes, pixel perfect visual design, styleguide and sketch libraries. I managed the developers for the build and QA. I also presented my process and final design to company stakeholders.
CHALLENGE
As a young up and coming brand, eSalon depended on 3rd party advertorials and influencers to drive traffic to the site. Key search words like, ‘hair color,’ ‘covering grays,’ ‘how-to-color at home,’ etc., were sent to advertorials that outlined such topics with links to eSalon’s product pages. In addition, you-tube beauty influencers were hired to make how-to videos touting various eSalon products, specifically to sell the company’s key product - a subscription plan for custom hair color.
How can eSalon become a trusted brand and destination for hair care content to drive sales and traffic to the site in addition to creating long term value for its customers?
SOLUTION
Color Mastery - an editorial hub
• Create an editorial platform on the site that showcases eSalon as an authority on hair care content.
• Create original articles and videos that educate, empower and incentivize consumers to use eSalon hair care products
• Customize content according to each user type; new, current subscription user, lapsed user, creating long term value for each customer.
• Strategically place products for purchase within articles and videos.
SELECTED PROJECT No. 2: Company Rebrand
TEAM
Entire Product team; VP of Product, Director of Product, Product Lead, UI/UX Designer, and UI Designer in addition to a dev team of 5.
CHALLENGE
For over a two year period, eSalon worked with a brand experience agency to develop a company wide rebrand. Through extensive industry and user research, the company established a new position, voice and user base that informed it’s new product system, print and packaging design, photography, videos, language for copy and finally a new responsive website. The following were key company foundations that drove the rebrand forward:
•Playful, smart, inclusive, proactive, confident were some of the keywords defining eSalon’s brand.
• Artistry and high tech were the foundations that separated the company as an industry outlier.
•The customer is forward thinking, value driven, and beauty conscious.
A new brand library has been established for all the creative avenues for the company. How will this be translated to the eSalon’s responsive website while adhereing to best user practices?
SOLUTION
• Establish a strong communication line with Creative/Marketing team for translating the new visual language from print/packaging to screen.
• Keep the new company voice, energy and user definitions in mind when defining these new visual patterns and guides.
• Keep best practices for web and mobile in mind when creating new templates, interactivity and styleguides.
ROLE
As the UI/UX designer, it was my job to establish the new design direction for web, tablet and mobile. I completed a competitive audit, established a new grid, color palette, typography, photography, video usage in addition to interactive functionalities. I redesigned selected pages defined by the VP of Product and reskinned others. I also worked with dev to build test pages to see how these new fonts and colors would work prior to the site wide redesign. I presented to stakeholders and C-level management on my findings with pleased approval. I also created a working styleguide and sketch libraries for the product, dev and creative teams to work from.
Below is a small selection of the styleguide created in addition to selected pages showing the new rebrand language for eSalon’s new responsive site.
Visit the full site at eSalon.com.