Amika
View Live Site︎︎︎ ︎︎︎ ︎︎︎
Role—
Lead Digital Designer
Activities—
Interaction Design, User Interface Design, Brand development, Design system, Prototyping, A/B Testing, Visual Quality Assurance, Market Research, Low-fi and High fidelity Prototyping
Intro—
Amika is a haircare company that focuses on creating effective products for every hair type, texture, and style. Their brand ethos is to bend the rules while being a friend to your hair and planet. As the sole digital designer, my role was to create a design system from scratch. Collaborate with eCommerce managers, brand team, third party developers to bring this vision to life.
The goal was to reimagine the amika experience on a digital platform. Layouts and typography are extensions of the iconic product packaging with vibrant colors and graphic shapes.
I created micro interactions that capture the essence of the company. The strategy was to create an end-to-end shopping experience while thinking about potential customers and the back end CMS, where projects could be scaled with fewer complications.
Homepage
The homepage consists of several content blocks. It has been designed in a modular frame work so that eCommerce managers can restructure the modules based on higher user engagement.
Before landing on the current homepage structure, I tested different layouts through heat maps and other user metrics.
Product display cards have a default and hover state. The user can also choose product size and sign-up for out of stock products.
Product Display Page with subscription integration
A modular collections landingpage
The brief was to create a landing page for each collection that was deeply informative. A place where storytelling, campaign imagery, video, clinical testing stats, reviews, ingredient details and so much more come together.
This page has playful moments in several modules like scroll triggered, and hover state interactions.
View Page Live ︎︎︎
Mobile designs for collections landing page.
I designed a templatized system that works for all eleven collections. A modular approach allows each page to be designed based on the available content.
View Page Live ︎︎︎
Cart Design incorporates a progress bar, offers section, account login, recommended products, subscription integrations, samples, and disclaimer text
The cart has a modular systems approach. It allows subscription integration to be added to the cart design as a second layer.
The challenge was to fit a large amount of information within the existing design system. I also needed to consider long product names, descriptions, sizes and sale price indication.
About Page
It is a bold moment where the amika wordmark comes front and centre. Through the cursor interaction the logo is triggered to go back to the navigation bar and vice versa.
A two step Search Optimization
It starts with a micro-interaction. Having a dropdown that is prominent but doesn’t take up the entire page was crucial. Some feedbacks from users included feeling trapped when the search takes up the whole screen.
After the user starts typing in the search field, results show up dynamically. Only if the user presses the enter key, it takes them to a seperate results landing page.
404 Error Page
The error page is usually an unexpected moment. Through a playful interaction, I added a moment of suprise to bring back brand expression.
By incorporating banners and a back to homepage CTA allows users to resume their journey.