Week 14 Outside of Class

We started to take our sketches and render them on the computer and started with the recipe selection. We took Sara’s original design and combined her elements with Alyssa’s typography/color selection.

Agreeing that Sara’s design had too much information on it, we removed most of the elements but kept difficulty, and time so the user can see more than just the image and title of the recipe.

Sara’s first attempt
Screen Shot 2016-12-02 at 4.07.59 PM.png
Alyssa’s typography/colors

After looking at this, we decided to create the following:

Screen Shot 2016-12-02 at 4.04.22 PM.png

Based on the readings, we decided to bring in elements they discussed: glowing, dark colors, and layering.  We also went with strictly lowercase typography.

We then broke down who would make each screen over the weekend:

  • Alyssa
    • My cookbook (map, achievements, recipes)
  • Erica
    • Ingredient collection
  • Gabi
    • Countertop UI/pullout menu (heating/cooling on cooktop)
  • Megan
    • Utensil collection
  • Sara
    • Screens with Cheffrey on them (welcome screens, soundwave screens, etc.)


Screen Designs

I worked on creating the “My Cookbook” menu.  This consisted of screens for recipes the user has saved, achievements (aka skills the user has learned/mastered), and a recipe map of locations where the recipes a user has created originated from.  I just touched on each of the screens, but I think from something like this, we get an idea of what each of these menus would look like.

Screen Shot 2016-12-04 at 5.56.35 PM.png

Logo Sketching

During class on Wednesday, I was drawing on the chalkboard while we came up with ideas for our screens.  As a group, we decided we really liked the phrase “What’s Cookin'” (because “What’s Crackin'” was too egg-specific).  Based on this, I decided to play around with different perspectives and angles of the lettering of the phrase “what’s cookin'” for our interface’s title.  Sara worked on the illustration for the logo, and we plan on putting the two together to create the finalized logo.


Refined Flowchart

Screen Shot 2016-12-04 at 6.32.17 PM.png

Screen Shot 2016-12-04 at 6.33.43 PM.png
UI Design for Step 1: Gather Ingredients. The top artboards show the volumetric projections on the wall with pictures, names, and amounts of each ingredient needed. The bottom artboards show what the ingredients look like when placed on the countertop.


This week outside of class I focused on creating the slide-out menu that would appear on the cooktop that would allow you to change the temperature settings of each item you have placed on the cooktop. Below is what I have come up with:

The menu (bottom right) would only show up as a small white tab. The user would slide it out with their finger.
This is what the menu would look like once it is slide out. Very simple.
The user would then select the pot that they wish to edit. This is a nice safety feature- if the interface skipped this step and allowed the user to simpy glide their finger along the surface anytime to change the temperature it is almost a definite that they would end up changing it by accident at some point.
Once the user has selected the pot or pan that they wish to change the temerature of, they simply need to glide their finger from left to right to turn the temperature up. It will tell them beside their finger if they are changing it to “low”, “medium”, or “high”. Just in case they wish to hit a level between “low” and “medium” or “medium” and “high”, a thermometer will show up on the right side when they are changing the temperature settings. It will disappear when they are done.
Screen Shot 2016-12-04 at 10.22.46 PM.png
The farther the user glides their finger, the hotter the cook top will become.


Along with the obvious heat settings, this cooktop also had cooling capabilities. All the user needs to do is select the item on the counter (using the pullout menu) that they wish to cool and drag their finger from right to left instead of frem left to right.
Again, the farther they drag their finger, the cooler it will become. Also, the cooler the setting, the higher the thermometer goes.


Screen Shot 2016-12-04 at 10.29.26 PM.png
This cooktop will also measure how much time you still have left to cook/cool something. The timer will click away until the circe is hollow and your food is done.
Screen Shot 2016-12-04 at 10.32.31 PM.png
If the user wishes to find out how much time is left, they can simply tap the timer- and the time in minutes/hours/seconds will appear.

This week I was also asked to take pictures of the space that we will be filming. Below are some images of options:


Refined Storyboard

UI Design for Step 2: Gather Utensils. Top artboards are the volumetric projections on the wall and bottom artboards are what it would look like on the countertop.


I might want to un-center Cheffrey’s quotes and move them closer to the top-right of the screen. I also haven’t decided where to put the voice wave element that shows the user that his or her words are being heard by Cheffrey.

UI design for welcome screen
UI design for starting prompt
UI design for adding to cookbook prompt
UI design for adding to cookbook with sound waves when the user speaks to Cheffrey

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s