Keep your collection clean.
What is Eco-llection?
Eco-llection is an app that helps people find which products are clean and cruelty-free while in the store. Users are also able to save their favorite products to different lists, such as My Shelf, Favorites, and Want To Try.
Roles + Responsibilities
- Sole researcher, Visual Design, Prototyping, User Testing
- Figma, Google Slides, Google Forms, Notion
Target Audience
- Ages 18-50
- Cosmetic/Skincare Lovers
- Gender: Female, Male, Gender Non-Diverse
- Common job titles: Student, Entry-level, Management
The Problem
Cosmetics lovers are struggling to find out if their favorite products are clean and cruelty-free. They are having to spend hours researching online and not getting clear answers.
The Solution
I created an app that helps cosmetic lovers find out if the product they found in store (through Barcode scanning) or what they searched for is clean and cruelty-free. This takes the hassle out of spending hours upon hours searching various websites.
Discovery + Research
These findings during the discovery phase drove my user-centered process. I utilized competitor reviews and user surveys and realized that there was an opportunity to create an app that these users needed and add a feature that other competitors weren’t utilizing.
The user survey was sent out to members of a Discord community and through a Slack channel. The survey had 25 participants.
User Survey Testing
Most participants use Google to find out if the products they are purchasing are clean and cruelty-free.
- 44% of participants frequently purchase beauty products.
- 40% of participants use Google to find out about clean and cruelty-free beauty products.
- 28% of participants use the Leaping Bunny Logo to determine if a product is cruelty-free.
44% of participants are frustrated with the lack of information about the ingredients in beauty products.
User Pain Points
Users need to be able to find out if the products they are buying in-store are clean, cruelty-free, and eco-friendly. They also are frustrated at the lack of information on ingredients in the products.
Competitive Analysis
I chose the apps Think Dirty and CosmEthics for my competitive research and analysis. I found that while both apps were well designed and laid out there were some opportunities for Eco-llection to have a better-designed menu screen and add a dictionary of ingredients where the user can find out exactly what each ingredient is and if it is safe to use.
Think Dirty
- Strengths: Love the categories for inclusive brands, POC-owned brands, etc
- Weaknesses: Would like a menu with categories in text form. Not just having to scroll to find them.
- Opportunities: Could have a light/dark version of the app. Hamburger menu
- Threats: Has a nicely laid out design. A lot of information about products that are considered clean beauty
CosmEthics
- Strengths: Well designed app
- Weaknesses: Would have liked the hamburger menu to have the dictionary option
- Opportunities: Have a button or menu item for a dictionary of ingredients.
- Threats: Has it all
The Information
User Stories
- As a user, I want to scan barcodes of products so I can find out if they are clean and cruelty-free.
- As a user, I want to save products that I want to try so they are easy to find.
- As a user, I want to be able to click on a product’s ingredient and find out what it means so that I can make an informed decision.
User Persona
My research indicated that there were three different personas. We have:
- Nina Jane, who is a 20-year-old student who cares about the environment and wants to find clean beauty products.
- Jordan Cooper is a 27-year-old, who is in their first entry-level job. They are wanting to change their entire beauty collection to be clean and eco-friendly products.
- Mae Johnson is a 36-year-old mom, who works outside of the home as a manager. She is wanting to make all of the products in her house as clean and eco-friendly as possible for her and her family.
User Flow
The second step in the process is creating a user flow. These are important in understanding the flow that a user will take through the product and gives a guideline to follow during the iteration process.
In this case, I wanted to make sure the user would be able to do three things: Scan a Barcode, Save Products to a List, and Click on the Ingredient to find out the definition.
Site Map
The next step that I took was creating a site map. The site map works together with the user flow and is a simpler version that shows the pages and dynamic data that goes into the website or app. Creating the site map helped me when I began designing the low-fidelity wireframes, as I had something in place to go off of.
Wireframes Sketches
After working on the user flow and site maps, it was time for me to begin sketching. For this project, I made sure to use my iPad and Apple Pencil to see if they helped inspire me to complete a bunch of sketches, rather than just a couple. I found that I enjoyed that process much better and was able to complete 8 sketch designs before going into Figma and laying out the low-fidelity wireframes.
Low Fidelity Wireframes
Using the site map and user flow, I moved on to creating Low-Fidelity wireframes. I wanted to focus on laying out the app before I began putting in the content. I also waited on any branding colors for my next iteration.
Branding, Logo, + Design
The next step was putting the branding together. I went through a few ideas for the name but I finally landed on Eco-llection as the app is a collection of products that are eco-friendly, cruelty-free, and clean. Once I figured out the name it was a breeze putting the color palette and logo together. With the color palette, I really wanted to focus on green, which is a color that I always think of when I think about the Earth and being eco-friendly.
Higher Fidelity Wireframes
In this iteration, I added all of the key branding elements. I also added all of the content to each page. For this process, I really enjoyed learning how to use the masking tool in Figma for the photos. I also added the lists page in this iteration, which allows the user to save their favorite products into their own user-created list.
Testing
After creating the high-fidelity wireframe, it was time to move on to user testing.
I conducted two interviews over Zoom and Facetime and the interviews were part of the testing for the prototype. Due to COVID and time constraints, it was best to host the testing over Zoom and Facetime. The interviewees were recorded using the prototype and spoke aloud their thoughts as they navigated through.
Zoom Interview One
- This participant joined us on a recorded zoom call and spoke their thoughts aloud as they went through the app.
- They mainly noted that they enjoyed the different lists that they could create.
Zoom Interview Two
- This participant joined us on a recorded Facetime call and also spoke their thoughts aloud as they went through the app.
- Their favorite part of the app was being able to look up the different ingredients and getting a clear definition of them.
Tasks Tested
The tasks that were tested were creating an account, adding item to a list, and searching for a product.
What I Learned: Design
From my first design to this project, I was able to use everything that I had learned to create a well-rounded app. I was able to focus on looking at the entire picture and thinking through the app as a system, rather than different pages interacting together.
What I Learned: The Conclusion
- Iteration is key! You will not be able to create a perfect app or design right off the bat.
- Sketch, sketch, and more sketches. I found it was easier for me to layout my app in a program once I had done a few sketches. For this project, I made sure to use my iPad and Apple Pencil to see if they helped inspire me to complete a bunch of sketches, rather than just a couple. I found that I enjoyed that process much better and was able to complete 8 sketch designs before going into Figma and laying out the low-fidelity wireframes.
Prototype
Previous post
ten things you probably didn’t know about me
Next post
All Aboard Bus App