Case Study | Weeks 4 & 5_Bunny Hero

Individual project related to Wellness or Finance

Week 4 came along, and it was time to work on our own for the first (but not last) time. During these two weeks, we had to design from scratch an app or webpage, including both their UX and UI.

Briefing

Find a problem related to wellness or finance and a solution (with an app or a webpage) to that problem.

WEEK 1 — UX DESIGN

The Problem

People interested in not harming animals have difficulties identifying cruelty-free cosmetics and personal hygiene products.

In the European Union, it is forbidden to test these kinds of products in animals, but that doesn’t mean the brands you use don’t test in animals.
In China, it is mandatory to test cosmetics and hygiene products in animals before selling them, making brands that trade in China not cruelty-free.

Research

With the problem defined, it was time to see if users actually feel it as a problem. It was time to do some research with surveys and interviews.
From 82 survey answers and 6 interviews I found the following stats:

82 survey answers and 6 interviews

With this data, I defined the Lean UX Canvas, which, among other tools (such as Empathy Map, Competitive Analysis or Affinity Diagram), helped me define the problem and possible solutions.

The next step was to know our user, using the following tools:
- User Persona
- User Journey
- User Scenario
Our user is a young woman who is interested in the well-being of animals and wants to reduce the number of products tested in animals that she buys. She finds it hard to find those products, and most of the time, she doesn’t know if a product is cruelty-free unless it says it in the package.

Ideate

With all this analysis, it was time to approach a solution. I put down all the different ideas I had in mind in a brainstorming canvas, and synthesize those ideas, keeping the most important ones, with the MoSCoW tool.

Those ideas were:

• Product scanner: This feature would allow users to identify which products are being sold in China (and therefore, are being tested in animals).
• Alternatives: If the product is tested in animals, the platform would give the user a cruelty-free alternative and show him/her where to buy it.
• Search bar: The user would be able to search for a specific product to check its price and where to find it.
• Goals & Awards: This feature would encourage users to buy cruelty-free products, knowing that they are saving lives with their actions, and create their own goals to reduce the number of products tested in animals they buy. Each product would have a number of theoretical “animals saved”, and users could keep track of the lives they’ve saved.

With these features in mind, I knew my project would have to be an app. The next step was to define how that app would look like. First I used a Card-sorting and a Sitemap to know how the site would be organized, then made a Crazy 8 draft, and a User flow to define how the user would navigate in the app.

Prototyping

I drew a low fidelity prototype and tested it, in order to find problems in the design.

Low-fi prototype

With that feedback in mind, I created the mid-fi prototype. I’ve learned from previous projects that the more accurate the mid-fi is the easier it will be to apply UI to it and have a good high fidelity prototype.

Mid-fi prototype

WEEK 2 — UI DESIGN

During the second week, we focused on User Interface. First, I defined the style of my design. To do so, I created a mood board so know the brand attributes of my project, which were:

Mood board

• Joyful
• Adorable
• Fresh
• Chic
• Fun

Bunny Hero logo

And using those attributes I defined the logo and naming, which came up as the result of a brainstorming process.

“Bunny Hero”

I also created an style tile to show a glimpse of what the app would look like:

Style tile

I had a hard time picking colors and the right illustrations, I must admit. But in the end, I managed to find the ones that represent the way I felt they should the essence of the app. In order to make things easier when applying the style to my prototype, I made a UI Kit, that worked as “design rules”.

Before finishing up, I did the landing page of my app, that later on would be very helpful for organizing the presentation:

Landing page

And finally, the High fidelity prototype. Here are some of the screens, that you can also check out in the prototype video.

The prototype video shows how our user, Blanca, starts using Bunny Hero for the first time.

First, she signs up in the app for the first time. As it’s the first time she uses the app, she won’t have saved any animals yet, and won’t have any awards on the home page.
She wants to check if her makeup is cruelty-free, and turns out it’s not, so the app will suggest her an alternative product. She decides to go to a physical store to buy it and the app will show her the closest stores that sell that product.

When she gets to the store that she chose and buys the product, she scanners it so she can add those “animals saved” to her list.

Now the home page is updated and she has her first award.

Next steps

In the future, it will be interesting to have a ranking, where users with more animals saved will appear. Those users could have discounts from the brands appearing in the app.

Conclusion

It was much harder to work alone than I thought, as I missed my partners and the opinion of others would make me doubt again and again. But finally, I realized it had many advantages, as I didn’t have to convince others of my ideas and did what I thought was right from the start.

I am proud of the final result, but what do you think? If you have any suggestions don’t hesitate on writing to me.

Thanks for reading!