Project Brief
This is my first UX case study that is associated with Google's UX Design Certificate from Coursera.
Designing an app by following core UX design steps:
- Brainstorm, define, design, test, launch
My Role
User research, wire-framing, prototype, iteration, and the creation of the final high-quality design screens.
Project Duration
July - August 2021
Problem
The target users of the FreeBunny 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.
Research Methods
See the survey here
The Survey
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.
Demography of Users: Survey answers demonstrate that participants are mostly female, who don’t have any preferences when It comes to food consumption. It also shows on this survey report that their age average is between 18–24.
Survey Outcome: It shows that most of the users buy cosmetics and personal hygiene products over a wide time range (monthly, once in 2–3 months). They also seem to keep their budget under €50, which is less than the average monthly spend on only cosmetic products among female customers in the UK. Takeaway: Price of the product and money could be a crucial point when It comes to deciding what to purchase for the user, due to budget limitations.
Where do they buy related products, and whether they use an app for it
Survey Outcome: When It comes to criteria, users firstly seek functionality, price as second, and cruelty-free as third. → Other entries include criteria such as Quality, vegan, size, packaging and not being harmful to health. It’s also distinct that users prefer free shipping and discounts for their online shopping experience.
Survey Outcome: Users state that It’s not easy to find cruelty-free cosmetic products online, besides multiple websites and blogs dedicated to such purposes over the internet.
Takeaway: Websites and blogs dedicated to this issue seem not user-friendly, they do have troublesome responsive layouts as well. It might be easier to search and find desired products over a mobile device, under a native app system.
User 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 Flowchart
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.
Sketches
This was my first attempt to create lo-fi wireframes according to my user flowchart.
This was my first attempt to create lo-fi wireframes according to my user flowchart.
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 Research
Mood board
Before getting started with the visual design, I created a mood board where I collected various mobile app designs that I like, and other cosmetics and product purchasing apps into one place for inspiration.
Color Scheme
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.
Typography
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.
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.
Final Design Screens
Onboarding Flow
The goal of onboarding flow in Free Bunny is to collect user information, includes asking whether they follow a vegetarian lifestyle, and what kind of products they purchase regularly.
Scanning Barcode
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 & Others
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.
Conclusion
The process of creating the app has been both tough and gratifying. It enabled me to delve more deeply into the needs, thoughts, habits, and expectations of users. I had to overcome a number of challenges, including building user flows and journey maps, which I had never done before. I was able to step outside of my comfort zone, which is visual aspects of UX design, and develop new skills through empathizing with the user and understanding what they need and why they need it.
What’s next for Free Bunny?
- Research of possible features
- Usability test of the prototype with users
- Improve user flow
- Demo implementation of the design with a developer friend
Download 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
Thank you for reading!