Ethical Eaters App

Side project: Product Designer

About the project

Ethical Eaters is an app for environmentally conscious user who wants to measure their corbon footprint based on their food choices.

Problem

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.

Goal

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.

Discovery & Research

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. Users want to see more details in the history window and the ability to edit past entires.
  2. Users want the ability to choose measurement units when entering their data, as well as the ability to set a default unit.
  3. Users want very easy signup.

Design Process

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.

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.

Conclusion

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:

  1. Seeing that users were very interested in more interactivity with the data inputs. Having more control and flexibility to edit history data at anytime.
  2. Getting back into creating digital illustration was fun. I was able to discover where I need to improve and practice other illustration styles to expand on that skill.
  3. I chose bright colors so it was a nice exercise manipulating those colors for accessibility yet keeping closely to the color theme I had in mind.