Overview icon showing a book

Overview

A group project to design an web app for people who need help in the kitchen expecially when it comes to dietary and/or financial restrictions.

Output icon showing a list with checkboxes and a pencil

Output

  • Logo and Branding
  • Interactive prototype
  • Final coded web app
Details icon showing a pencil and a ruler in a container

Details

    Duration

  • 2 months
  • Tools & Software

  • Adobe XD
  • Adobe Illustrator
  • Github
  • Atom
Mood board showing a color scheme, font choices and inspiration for the design and layout.
Simplistic moodboard

Throughout this project, we worked on a team to make a small web app prototype. We struggled with figuring out an idea that was unique yet easy to be coded using HTML. Then we thought about college students and an app that they could use. Something that needs to be solved is college students and their cooking skills when it comes to dietary or financial restrictions. Having something that could help them cook with whatever is in the fridge but with a twist at poking fun at the user so they can learn to laugh at themselves to keep on trying.

Multiple variations of logos and colours
Logo variations

For the logo, I wanted it to be straight forward and clear so that this app will make the user eat in and not to eat out. When we came up with the idea, I had a clear vision of the logo concept, which rarely comes to me. So here is my process of creating the logo and also deciding that yellow wasn't the right colour and I changed to orange. As I felt orange was more suitable to use as it's more appetizing and it gives off a warm feeling, so first-hand users aren't intimidated.

Rough sketch of what the home screen of the app would look like
Rough sketch done by Raquel Alves
The start of the home page and figuring out the colours for the app in Adobe XD
Figuring out the colour scheme in Adobe XD

When we figured out the brand, my team members sketched out the multiple screens for the app. After they were done, I dived into Adobe XD and began with figuring out the home screen layout and what other colours worked well with the orange.

Shows the home page of the recipe app and also the layout of the navigation
Final home page screen

As I was playing around with many colours, I decided to go very minimalistic with them, so everything is effortless and easy to understand. The pops of the orange and mint colours are used lightly to brighten up the layout, so it's not too simple with just grey.

Humourous pop up screen that the user recieves when they complete a recipe
Humourous recipe completion pop up screen

What's unique about this app is the humour used throughout which no other app does. It breaks the tension between the user and their cooking skills to get them back in the kitchen more often.

User testing of signing out
User testing of removing a bookmark

After completing the interactive prototype Jennifer Sommerfeld and I went to do usability testing. Everything was pretty easy for the users to do except for a few things that didn't come to mind. I then fixed them up and sent the finished file to be coded.

Tablet mockup showing what the french toast recipe would look like when clicked on
French toast recipe screen on a tablet mockup

The Accomplished Objectives

Making A Recipe App Unique

There are many cooking apps out there, but most of them don't have any personality for the user to connect with to make it easier. Something that makes them feel better by laughing at themselves, so they don't take their cooking skills too seriously. When something gets burnt, or it doesn't taste right, they will laugh at themselves then get back up and try it again. Hopefully not burning down the kitchen in the process.

Coded Web App

When doing this design, I had to keep in mind the limitations that HTML has, especially with a time frame. It was difficult not to get lost in making a super intricate design as the end goal was to create a pattern library. The pattern library was coded by Raquel Alves to be able to build the web app and it was a success.