Side project
UX & UI / Visual design
Ethical Eaters is an app for environmentally conscious user who wants to measure their corbon footprint based on their food choices.
Lifestyle decisions affect our carbon footprint, including food that we decide on consuming. There are many websites on the market that offer calculating an overall carbon footprint but none offered individual categories to go into if you’re not ready to change the entire lifestyle, especially none concentrated on what impact food makes.
The goal is to create a simple app that will coalculate daily meat consumption, showing the user what their carbon footprint is depending on the livestock they have chosen for their meal.
I conducted two rounds of usability studies each including a group of four busy professionals. Findings from the first study helped evolve the features to have more practicality for the user. The second study used a high-fidelity prototype and revealed what aspects of the mockup needed refining.
1. Branding & design system
I was inspired by fruits and vegetables for the color palette, especially by the eggplant, but I wanted to keep the look light and bright. So after brightening the two main colors and playing around with accessibility values, I ended up with a nice retro vibe theme. To add more depth to interactive components I included gradient combinations that really made those visuals pop. I wanted to included both Serif and San-serif fonts, to add more character to the design. Serif headlines add the sophistication and the lightness where san-serif is used on smaller call outs and default text.
2. Illustration & iconography
When approaching this project I wanted to create illustration as the visual support. Originally I was planning to create cartoon characters but after few failed attempts I ended up creating minimalistic flat illustration. Adding to minimalism and simplicity I have decided to only use the brand colors and the tint variants instead of using full color spectrum.
The idea behind outlined icons as the primary use is that:
1. They don’t take away importance from the content on the screen
2. Changing to filled icon in activated state helps accessibility & emphasize where the user is in the app.
Since this was a side project, it was never deployed and I don’t have any other matrics besides the user testing I have done. But few take aways were:
