MyVeggieDiary

MyVeggieDiary is part of an idea that I had in mind for a while. Even though I have a bigger vision for this project, I’ll be focusing on the core feature for the MVP. The plan is to do everything – from design to code – myself and playing with different tools along the way.

“Pick a simple problem and solve it really well”

Problem

Lets say you have decided to eat less meat – for any reason. Most resources out there assume you are already educated and dedicated to follow your chosen diet, but like a lot of people, you are not.

You tried to give up meat completely but then your body suffered because you weren’t consciously making educated decisions on getting your daily protein.

Or maybe you don’t want to give up meat altogether. You just think it will be better to eat less of it, but feel like it has to be “either all or nothing”.

The Idea

My Veggie Diary gives you a helping hand on your path to a less-meat diet wheter it’s vegetarianism, pescaterianism or even having meat only once per week. And it wants you to feel good about your diet choice, so no judging if you don’t turn vegan in a week!

MyVeggieDiary helps you turn vegetarian bit by bit.

I have broken the project down to 3 phases. Phase 1 – the MVP – is a diary that simply allows people to keep daily track of types of protein they have without bogging them down with too much detail. I’ll be expanding the feature set after I build and release (!) the first version – happy to tell more in person.

Process

As always started with paper sketches to explore different variations quickly.

Screen Shot 2016-12-31 at 16.24.31.png

ideation – paper sketches

For this project I used different prototyping tools at different stages of the project, depending on the fidelity I’m aiming for. Static prototypes are great to quickly validate the designs at early stages. Adobe Comp was great for creating wireframes on mobile – but when I’m back on my computer nothing beats Sketch + Marvel combination for creating quick prototypes for validating screen flows and layout. Once the layout is decided and the assets are created in Sketch, I prefer to utilize a more powerful prototyping tool like Axure.

wireframes-4.png

Wireframe Iterations

To keep it simple for the users, I allowed people to add one main protein per meal and let the app figure out the ‘diet’ user followed that day. Users can see at a glance, for how long they have been meat-free, or if there are recurring patterns in their eating habits. The data entered at this stage will also be used in the additional features in the future, but will get to that later.

MyVeggieDiary is enjoyable and non-judgemantal no matter what diet you choose to follow.

User Testing Takeaways

In wireframes, the ‘diet’ followed per day was displayed with icons. This presented a challenge, as the icons weren’t clear in small scale and users couldn’t always associate the icons with the corresponding diet type. Having only an icon to show both diet type and protein was confusing to users. I solved this problem by assigning colour codes to diet types in the high fidelity prototype.

screen-shot-2017-01-02-at-13-34-38

Visual Design

Colour coding proved itself as a great solution as it also allows scalability. User testing frequently showed that people wanted to see more protein options – for example a cheese icon to represent proteins allowed in a vegetarian diet wasn’t enough, people asked for eggs. When I expand the protein icon set, colour codes will help users associate different proteins to certain diet types very easily.

Colour Codes.png

visual design iterations.png

high-fidelity prototype iterations

protein-iconsI also made the icons from scratch in Sketch and moved onto high fidelity prototyping with Axure.

The developer in me often gets frustrated with the limitations of static prototypes when testing with users, and I find Axure great for keeping states and passing data.

Prototype

Prototype (view from mobile)

Next Steps

  • Working on micro-interactions using more advanced prototyping tools, possibly Origami.
  • Expanding the protein options.
  • Prototype with code. Considering Ionic Framework + Cordova for this.