CASE STUDY — 2018

Clean Beauty Shopping with the Buff Beauty App

 
BuffBeautyCo-desktop-mobile-mockup.png

The current beauty market, is primarily comprised of large beauty retailers like Sephora, ULTA, and e.l.f cosmetics, who are offering clean beauty products because of the increasing concern of chemicals found in many existing and popular products. Therefore, finding retailers that only sold clean beauty products specifically devoted to makeup and skincare are very limited and often are placed alongside products that are outside of this category.

MY ROLE

UX/UI Designer: user research, design, branding and testing.

TEAM

This project was a design concept was a personal exercise used to practice designing for responsive websites.

HYPOTHESIS

People interested in clean beauty and skincare products would use this app because they care about the mission and trust that the products identified within the clean beauty category, and will not need to be concerned that another recommended product is or is not also a clean beauty product.

RESEARCH

After surveying 10 participants between 30 - 40 years of age, within North America, and analyzing current beauty apps, I noted that filtering functions were extremely important for customers to quickly find products relevant to them. Filters helping customers shop by their skin concerns within both makeup and skincare categories, with presets to automatically filter results based on profile settings made shopping easy and quick.

BuffBeauty-desktop.png

The UX Design with Wireframes & Mockups

To ensure that users found the app to be user-friendly, components commonly found in beauty apps were added to the design. This included large photos clearly showing a product, how many people loved a product, pricing, current items in a person’s basket, and clear filters.

User testing was required to confirm user flows. To review feedback, please click here.

Brand Development

The Logo Design needed to represent the Buff Beauty Company mission to help clean beauty seekers find the right products that can take them from day to night, and easy weekend looks.

Buff Beauty was the name of a rose that I found while researching types of roses for a wedding. Meanwhile Buff was used in the beauty industry to describe skin exfoliation and makeup blending.

The color palette used shades and tones depicting skin colors and further emphasized the natural concept.

Seen in the Logo and in headers across the app, the Oswald font was chosen to depict a sense of boldness and strength to empower those using our products.

Color Palette

#E3D3CF

#E3D3CF

#42382F

#42382F

#39AEA9

#FBE0CD

#EB6750

#EB6750

#DCC2AC

#DCC2AC

 

Typography: Oswald & Open Sans

BuffBeauty-Typography.png

APPLYING THE PALETTE

Navigation

Challenge: Ensuring that the filtering system did not generate false results or an empty results page

Goal: Creating a filtering system that did not confuse users and generated correct results

Solution: A split filtering system. In the first dropdown, users would be able to see common product filter selections by price, recency, trending, and rating. The second dropdown, was a more personalized approach, filtering product pages by brand, product benefit, and color.

Checkout

BuffBeauty-cart.png

Challenge: Ensuring that the add to cart, checkout, and purchase confirmation experience reduced the possibility of users selecting options they did not intend to select, and checking out efficiently.

Goal: Making the checkout process easy, quick, accurate, and readable.

Solution: Using familiar checkout experiences users are used to seeing, which included free shipping options, billing details, and delivery times.

PROJECT RESULTS

USER EXPERIENCE

A major challenge that I encountered during the design of Buff Beauty Co., was designing an interface that took the mobile-first design and was translated to the desktop browser experience as expected for users.

Ensuring that there were clear filtering options that were both familiar, and flexible to the user’s needs. This was useful for users who wanted to simply explore or were very decisive in what they were looking for.

USER INTERFACE

At the time Sephora was a popular app and had a very strong brand identity. I wanted to challenge myself and go the opposite direction and brand the app to represent natural colors that allowed users to create both natural and bold looks.