Petal

Cruelty-free Beauty

Petal is a mobile e-commerce application that helps users conveniently identify and buy cruelty-free and/or vegan cosmetics. Currently, it takes many hours of research to purchase even one item. Petal aims to reduce the effort it takes by providing an efficient web experience that includes all information a user might need to look for on their purchasing journey.

I began by interviewing several participants to identify how users currently shop, where they find pain points along the way, and to identify the problem that needs solving. Participants were between the ages of 19 and 58 and a half were interviewed on the phone while the other half were interviewed in person. I spent approximately 30 minutes with each participant.

Then the information was synthesized using affinity mapping. I wrote down quotes and points of interest from each participant on sticky notes and arranged them into a map to show us what their common experiences were. It became apparent that it was very difficult to determine if a product was classified as cruelty-free or vegan and users were required to research for several hours per product. Users also had difficulty comparing these products against each other for other buying considerations such as price and quality. Others required specific types of ingredients (organic) while others did not, and some required cruelty-free and vegan labels while others only required one or the other. This information was then used to craft two distinct personas, one who was a diligent researcher and one who was a glam beauty addict. These personas would help to make judgments on wireframe decisions moving forward.

Five competitors were then analyzed. Three of these specifically sold makeup. Amazon was also included in the analysis as they are a major eCommerce presence that the audience is already accustomed to along with Facebook who the audience currently uses as a tool to research products.

A user flow was created to help determine the steps the audience might go through while using the Petal app. This information was used to help determine which features the audience would expect and which features might be a nice-to-have or would be a lower priority.

Then, the content that might need to exist on the site was mapped out and an open card sorting technique was used to help determine the best way to organize the navigation. Several more participants helped during this step and while they labeled some categories differently, most cards were grouped together in similar ways. This information was used to create the sitemap.

From there, ideas were sketched out into wireframes. Next, the wireframes were recreated digitally in Sketch. Interactivity was added so the prototype could be tested in real-time. Participants tested the app as I observed. This information helped clarify where users might get hung up in the flow. Pain points were corrected and retested until the experience felt seamless.

Finishing touches such as personalization and onboarding were accounted for. Lastly, a visual design was applied.