Week 15A

Today we talked to Professor Pannafino about our progress so far.  Below is the feedback we received:

  • Something based on specific ingredients
  • The visuals are working
    • Halfway there
    • Limited by the Mac OS style display
      • Could there be a “sort by” etc. option? Health, time, difficulty, etc.
      • Different shapes, different ideations
      • Think of Blue Apron sheets
        • Show all ingredients
    • Organization and structure is there, but try to have different ideations
    • Variation
  • Needs indication of temperature – not just low, medium, and high
    • Thermometer, more detail
    • Think about which colors mean what
  • Push some of the ideas of future design
    • Where do they use vocal commands, etc.
  • Be precise with the Cheffrey illustrations
    • Don’t be like Clippy – people didn’t really like Clippy

We went through and decided who is going to do revisions on which screens:

  • Alyssa
    • Heating screens (Gabi’s original files)
  • Erica
    • Cheffrey screens (Sara’s original files)
  • Gabi
    • Recipe screens (filtering, etc.) (Group original files)
  • Megan
    • My Cookbook screens (Alyssa’s original files)
  • Sara
    • Ingredients/utensils screens (Erica and Megan’s original files)


On Monday, I reformatted the cooktop screens that Gabi worked on.  Below is a comparison of the 2:

I took the general ideas of Gabi’s and tried to combine them with some of the elements of the other screens.  I also wanted to work on tongue scanning technology that would read tastebuds and dietary preferences and suggest recipes based on that, but unfortunately did not have a chance to work on it so I plan on working on it tomorrow night.


Tonight, I worked on refining the volumetric displays with Cheffrey. Before I began, I referenced current voice recognition technologies. The main three I referenced in my designs were Siri, Cortana, and Google Assistant. Below are pictures I used for inspiration:

Screen Shot 2016-12-06 at 9.48.16 PM.png
This is some inspiration I used for layering sound waves. There are different levels of sound such as the voice that is speaking directly to the interface and other background noises. I thought this would help to show that the interface recognizes these different levels but is smart enough to know which level to listen to.
Screen Shot 2016-12-06 at 9.49.14 PM.png
Here is a picture of Siri’s home screen. The screen displays a simple prompt which reads “What can I help you with?” and an inactive sound wave, showing that the interface is waiting for you to respond.
Screen Shot 2016-12-06 at 9.49.41 PM.png
Here is a picture of Cortana by Microsoft. Similar to Siri, Cortana also asks “What can I help you with?” with a prompt that gives the user a suggested question to ask.
Screen Shot 2016-12-06 at 9.48.30 PM.png
Finally, this is a portion of Google Assistant that displays the word “Listening…” as you are talking to it. I thought this was smart to show some sort of indication that the interface is actively listening to what you’re saying as you are speaking.
Screen Shot 2016-12-06 at 9.46.57 PM.png
This is the projection the user would see after he or she activates that interface by placing his or her hand on the countertop. The interface and Cheffrey, the assistant, greets you and asks if there is anything he can help you with.
Screen Shot 2016-12-06 at 9.47.13 PM.png
This design shows what the projection would look like as you are talking to it. Cheffrey changes slightly and the screen indicates that he is listening. Your words appear in quotes in the center of the screen and the sound waves also reinforce that the interface is being spoken to.
Screen Shot 2016-12-06 at 9.47.39 PM.png
This is a prompt you would see displayed at the end of your cooking session. What you are finished, Cheffrey asks if you would like to add the recipe to your cookbook and the sound waves are unmoving, waiting for the user to respond.


Today in class, because we were told that our interface was not futuristic enough, I created the cooktop/pot cleaner. Below is what it would look like:

Screen Shot 2016-12-05 at 5.09.41 PM.png
This cleaner would use laser-technology to clean even the toughest of grimes off of your cooktops, pots, pans, mixing bowls, and even utensils. As you can see, the cleaning laser is moving from left to right- cleaning the pans, and cooktop in its path.

Outside of class this week we were also asked to create some variation of what was done for this class. Below is a bit of a change from what Alyssa did before:

Screen Shot 2016-12-05 at 6.20.17 PM.pngScreen Shot 2016-12-05 at 6.18.28 PM.pngScreen Shot 2016-12-05 at 6.18.35 PM.pngScreen Shot 2016-12-05 at 6.18.43 PM.png

Screen Shot 2016-12-05 at 6.18.50 PM.pngScreen Shot 2016-12-05 at 6.19.36 PM.pngScreen Shot 2016-12-05 at 6.19.42 PM.png

screen-shot-2016-12-05-at-6-19-56-pmScreen Shot 2016-12-05 at 6.20.10 PM.pngScreen Shot 2016-12-05 at 6.20.17 PM.png


Before I began working on my variations of Alyssa’s “my cookbook” screens, I did some research both from the book and online. From both, I wanted to focus my variations more on style and layout to try to give more of a futuristic look while still keeping key layout features, like layers.

Above, the left image is the original screen Alyssa made and to the right is the image research I did. I pulled photos of vlumetric projects to understand how elements worked with each other and find commonalities. I also slightly adjusted the color palette. From the reading, there was a color swatch survey of the most prominent colors used in scify interfaces for each year. I took a screenshot of the colors and pulled one that I thought would work best. From there I did varying shades and tints to give a full palette (while adjusting the original as needed). The following are the screen variations I made.

For these first variations, I worked more with color. As you can see, each column is a different layout and each row has a different style. The style difference between the first and second row is in the elements inside of the outermost retangle. The first column is a different layout that incorporates overlapping layers, the second is a simple organized, and the third is similar to what we already had, but with the new style.
For these, I tried the dark colors with a mix of lighter ones for more contrast. For the background I found a lot of futuristic interfaces have a “light source” type of look where either the bottom is the lightest or the top and bottom edges are. I tried to incorporate this in my variations. The difference between rows is the amount of Gaussian blur on the outermost edge. The columns are difference in layout.
For these I completely removed the Gaussian blur but kept the glow in the background. The top row is the same as the previous image, but without the blur effect in the background. The bottom has some line work on the top and bottom to add to the “extra” elements the book talks a lot about.
For the top and bottom rows, I increased the opacity on the background to 100% as opposed to the 85% I was using for everything else. The top row has the light-gradient in a different location while still keeping the line work. The second row is similar to the image before with adding the line work, but I also added glow to the lines to make it pop more. The third row is the same as the second however has 100% opacity in the background.
Screen Shot 2016-12-07 at 11.21.45 AM.png
Lastly, I took a photo we had of Gabi’s apartment with the countertop and wall and tried to one of the screens in context.


We were told to come up with a few more ideations for our UI designs, so we all switched screens and tried to design them slightly differently. I added the list of ingredients to the side, slightly changed how the counter reads the ingredients (eggs), and took out directions and step because I felt they might not be needed.

Erica’s original design
My ideation

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