Planet Friendly Meal Planner

2018

Background

During the last two weeks of my UX/UI Design Academy at Codaisseur we were assigned a real project with the graduates from the Code Academy to design and build a MVP for a startup. Our briefing was to develop a meal planner that balances nutritional and sustainable ingredients, helping people to plan their meals in a better way. Also in this tool, the user has to be able to create a shopping list for the ingredients and send it to the local supermarket.

Product Owner:

Karin Thomas

Developers:

Hoan Phung, Sabina Dhaugoda, Alina Rusu, David Behal

My roles:

Brainstorm and wireframes; User flow; UI and Branding; Prototyping

Discovery and Information Architecture

As we had just a two-week sprint to plan and develop our MVP, I started looking for some competitors to understand the behavior of users who search for recipes online. I also started creating a sitemap so the team could make a realistic decision about what would be feasible

Site Map

So with that, I created three job stories for the MVP and defined two personas for our users:

Personas

"As a user, I want to register on the planet friendly meal planner to have better options for my meals"
"When I log in in my meal planner, I want have my meal options for the week planned so I just order the shopping list "
"When I plan my meals, I want to be able to print my shopping list so I can bring it to the supermarket with me"

We also defined secondary goals, mainly assigned to me, so we could give more to our product owner for testing:

  • ✔ Design all the look and feel for all pages;
  • ✔ Design also a landing page for the project with an online mockup;
  • ✔ A style guide for the process.
Wireframes

To help the developers I designed the wireframes for the MVP and presented to the P.O. as soon as possible to validate the idea and user flow. For research, I did two quick user tests and approved this concept. With that, I had some time to work on branding and start the design of the UI.

Style Guide and UI

As we started from scratch, we decided to keep the name of the original idea (it's long, I know!) to test the MVP. It was not the easiest name to come up with a logo, but we kept one with only typography to be clear to the testers.

Color Hieararchy

As I had a short time, I picked all the components and organized in a style guide to help the developers on the styling. For the design, I picked tones of green to connect the sustainability and worked with the white spaces to balance all the information. I tried also to keep it in the images with white spaces and use it as well to communicate the seasonal ingredients to the user (having seasonal ingredients on your meals helps the environment because it has a smaller footprint).

Style Guide

MVP Pages

MVP Screens

With those pages, the developers could do a working MVP to present on our demo night.

Demo Mockup

For the presentation for users, I designed the landing page and the other pages to testers to have more information and understand more the product.

All Screens

Wrap Up

After two weeks of intense work, we had a proper MVP for testing. As I could advance more in my work, I was able to map some other needs and prepare myself for future research if needed. But for this project, organization and meeting the sprints expectations were crucial on the process.

Demo Night

More Projects

Loading content...