Free Bunny
Mobile UI/UX Design, Case Study
2021
Project Brief
Free Bunny is an app for people who seek to purchase cruelty-free products online and in stores. This is my first UX case study that is associated with Google's UX Design Certificate from Coursera.
My Role
User research, wire-framing, prototype, iteration, and the creation of the final high-quality design screens.
Duration
July - August 2021
The Problem
Target users of the Free Bunny app face difficulty in finding and purchasing cruelty-free cosmetics and hygiene products, both in stores and online. They feel disappointed with the fact that it takes hours of research to find the products they need.
Goal
My goal was to create an app that is easy to use for all users and allows them to effortlessly search and purchase ethically created products, as well as discover and share cruelty-free brands with their friends.
User Experience
Research Methods
I prepared a survey with Jotform and distributed it to multiple groups of vegan and cruelty-free makeup enthusiasts. Using such a survey and obtaining real data certainly helped me to understand the main pain points of people who are familiar with cruelty-free products and animal testing overall.
Personas
According to the results of my survey, there were several types of users, each with its own set of requirements. Because of the multiple insights and common patterns that emerged from the users’ comments, I was able to create two personas, which are fictional characters that reflect the data.
Focusing on two main users allowed me to stay focused on their demands and avoid becoming distracted whenever a new feature or idea pops up.
User Journey Map
Furthermore, I created a script for one of my personas. The technique helped me figure out how to tailor the user’s experience to the expectations and build user-friendly solutions.
User Flow Chart
I had a hazy concept of how the app would work after doing some research and describing user sentiments and experiences. Mapping out basic step-by-step flow assisted me to create outlines and see how users will create their path.
Wireframes
The skeletal framework of the app is shown by this visual guide. It enhanced me in to organize the interface pieces so that I could concentrate on the functionality rather than the aesthetics. Furthermore, the clarity of wireframes allows me to swiftly test concepts without becoming entangled in the details.
Storyboard
I made a storyboard to describe my user’s app experience. This is an excellent tool for imagining how the product will be utilized in a larger context. It’s a cost-effective and efficient way to capture, relate to, and explore the app in the real world.
Visual Identity
Color & Typography
Going with a well-contrasted color scheme and selecting purple as the primary color helped me shaping the app’s visual identity. The main intention was to give it a fresh, rich, and modern feeling.
Nunito is a free Google font designed by Vernon Adams. It’s a well-balanced sans serif typeface superfamily, and rounded edges add a little playfulness to the design.
Icons & Illustrations
Icons and illustrations are a huge part of the visual identity since they convey ideas and notions that in some cases cannot be conveyed using words. For this app, they play a critical role to lead the users besides product and brand photographs.
Name & Logo
The main reason to call it “Free Bunny” is a fun reference to PETA’s official app, “Bunny Free”. For the logo, I wanted it to be simple and easy to recognize, as well as giving it a warm feeling to the user by putting a smile on the bunny illustration.
Hi-Fidelity Mockups
Onboarding Flow
The goal of onboarding flow in Free Bunny is to collect user information, that includes asking whether they follow a vegetarian lifestyle, and what kind of products they purchase regularly.
Scanning Barcodes
This element is the heart of the app. After onboarding, users are able to see a “scan code” indicator, which opens the phone’s camera and leads them to scan the barcode of a product. The next step is to see the product page with details, read reviews of it, and see where to find it.
Notifications
I chose to provide consumers with notifications of discounts, special offers, and the actions of their friends for added convenience. The major goal is to keep users engaged with the app and to keep them informed about opportunities that may be of interest to them.
Product Categories
The rest of the app includes product pages, a comprehensive list of brands that create cruelty-free and/or vegan goods, friends feed, related articles, general statistics on the user’s consumption habits, and a simple profile settings page.
Read the full case study published on Bootcamp and Download the "Free Bunny UI Kit" from Figma Community!
Tools used for this study
Jotform: User survey, research, data visualization
- Figma: User interface design, other design assets, GIF, Figma community for device mockups and iOS UI kits
- Figjam: User journey map, user flowchart, wireframing
- CamScanner: Scanning sketches and storyboard