Start of glanceability project

Brainstorming and ideation progress:

To start of our project we had a brainstorm session to find out how to represent glanceability in a meaningful way. We needed to decide what devices we wanted to use, for example a smartwatch and a phone. Also, in what context we wanted the displays to be used in. To come up with concepts we did another brainstorm session, the goal for this to write down as many concepts and ideas as possible, where glanceable feedback could be utilized. We wrote on post-it notes, with a 10 minute time constraint. After some discussion we chose the three best scenarios, which were:

  • Cyclist delivering food
  • Architect / engineer
  • Chef

Then each person had three votes, to vote on the one we liked the most. The concept we decided to work on was to design glanceable feedback for a home cook, to support multitasking while cooking and following a recipe. We tried to map out a user journey but couldn’t figure out how to design the smartwatch UI without many interactions with it. Just having glanceable feedback for following a recipe didn’t feel intuitive, how would the watch know when the person was done with one task, would it be set to a timer? Wouldn’t that just be stressful?

However, after discussion we found that we couldn’t really come up with meaningful glanceable feedback for this scenario. Therefore we changed our direction into helping chefs multitask with the use of a smartwatch and tablet, as they’re working in a hectic environment and have a lot of things going on at the same time. The reason for choosing these devices is because it’s easier for a chef to glance at a smartwatch, compared to for example a phone that the chef would’ve had to pick out from the pocket all the time in order to look at it. Also, tablets have become a more common tool in restaurant kitchens instead of using printers that print out the orders.   

Having this done, we mapped out a user journey on how to help aid a chef with their work. We sketched out the situation in steps, together with some UI sketches for both the tablet and smartwatch. This was the part where we spent most time, which was good. We discussed it thoroughly during the process, questioning our design choices and the possible improvements we could make.

For example, in the start we created interactions for both devices, when an order arrived the chef would press yes/no in order to get the order in to the watch. But we realized that the watch should only be glanceable and that the interaction would disrupt the chefs flow, therefore we chose to create the interaction for the tablet.

We also created too many notifications for the smartwatch, for example incoming orders, expected time, order done and order overdue. This would become a few more when having many order at the same time and would not support the chef with multitasking and communication with his team, instead it would probably become very annoying and strenuous. We decided to give only two different notifications that we thought would be the most important for our design.

Final compressed user journey for tablet and smartwatch, with some steps removed.
Two notifications (bottom of picture)
Shades of color according to order priority

How would the glanceable feedback be implemented and designed in the smartwatch?
We also spent time on discussing and sketching ideas for how the UI would look, we looked in to colors, shading colors, numbers and the interaction for the tablet. Each order will get their own color (same color as in the tablet), so that it is easy to distinguish orders that should be prioritized. To visualise time in the smartwatch, we first thought of having shading color according to priority (each order have a specific color), but when putting ourselves in the chef’s perspective, shading color wouldn’t be easy to interpret or even see by just glancing. We tried this by having Nefeli showing me, Martin and Jesper the sketch in 5 seconds, so that we would glance at it. Instead we changed it to solid color that increases with time, which was easier to understand when glancing. We took some inspiration from Google’s design guidelines (https://designguidelines.withgoogle.com/wearos/) which helped us during sketching and designing, like the example above where we changed the shading color to a more clear, solid color.

Google’s design guidelines

Prototyping and sketching

After deciding how the prototypes would look like we divided the work as we were four people, in order to be as effective as possible.

Me and Jesper started working on the physical prototypes (smartwatch and tablet) and Nefeli sketched out the UI for the devices. Me and Jesper chose to make a MDF frame with the laser cutter for both the smartwatch and tablet, as it was the fastest way for us to create our prototype. We wanted a solid frame since we would pull the interface through it and also to have a good representation of the prototype. We made a few prototypes for both the tablet and smartwatch, with different measurements in order to get a good feel of how it would feel and look if it actually existed. We also had to consider how the paper interface would be pulled through it, but eventually we found a way that worked great!
When having the knowledge of working with the laser cutter, it is nice to work with. It is really fast and it is possible to make really detailed and real-like looking prototypes. I would definitely use it again when making hi-fi prototypes.

MDF prototype of the tablet

Throughout the prototyping phase we met up to discuss the progress and the possible ways to visualize and implement the physical prototypes together with the interface. This was a great way to keep up with each other’s work and if changes had to be made. For example, when creating the interface for the smartwatch, the first idea was to have the classical clock face, having the clock face we had to put hour-numbers to signify the time. As we wanted the order numbers implemented as well (so that the chef knows which order is coupled with the color and time) we found that we had to put the order number inside the order timer. It felt to cluttered and hard to understand when glancing at it. We wanted the order number to be on the clock face, outside of the color indication but still coupled with it, using the same color so that it is easy to distinguish and understand. 

Here’s the complete UI for the smartwatch:

Sketches of the smartwatch UI, with different iterations (e.g analog to digital)

Here’s the complete UI for the tablet:

Physical prototype (MDF) and the tablet UI showing different steps

Video prototyping and presentation preparation

We discovered that chefs are not allowed to use watches, due to hygiene rules. We actually had not thought of this before, maybe it should’ve been obvious as there are so many rules about hygiene in a restaurant kitchen. Therefore we had to rethink and questioned ourselves where or in what situation our idea would be necessary and important. We arrived at “what if the chef is deaf?” – in this situation glanceable feedback could be very important and helpful. This could’ve been devastating for a project, but luckily it did not change our concept. However, we did have to consider this when editing the video, for example by having no audio when the video is shot from first-person perspective. Learned lesson from this is that it would be necessary to research the context we’re designing for.

Video

Before we started shooting the video, we decided create some kind of story with the video, explaining the concept and purpose of the smartwatch and tablet. Making a video prototype with a story is challenging. You have to think of ways to show how the prototype works, how to interact with it and in addition, making the viewer understand what the video is about in just a short period of time. It was a tough challenge to make this video, in every scene we had to try a lot of different angles to get the best shot. At the same time we had to think about distracting background and how the light was. I hope that the video is understandable for the viewers. A problem that occurred while filming, was that our tablet interface was made on long piece of paper, showing how the interface changed after interacting with it. Therefore we had to hide it using things from my kitchen. It wasn’t optimal and but I think we made it look ok.

When the video shooting was done, we divided the tasks again for editing and presentation preparation. I edited the video with feedback from the rest of the group, so that we were on the same page on how it would run. With the video we wanted to portray the experience of the hearing impaired chef while and working and multitasking in a hectic restaurant kitchen. However, since the video was shot in my kitchen (which doesn’t look like a professional kitchen) we used background sound of a restaurant kitchen because we wanted to give a more realistic scenario of a chef working in restaurant kitchen with the smartwatch. Also, to make it clear of how this is experienced from the chefs perspective, we cut out the background sound when you see it from first-person view. In addition, we used a vibration sound so that the viewer understand when a notification pops up in the smartwatch. For some shots, text had to be used as explanation because we felt we had to make more clear what happened on the smartwatch.

Smartwatch prototype

Making paper and video prototypes is a great way to convey an idea, in an inexpensive and time efficient way. A video can easily be done using one’s phone and some lights that are available at home! The hard part is to make it look professional, that demands experience or that you hire a professional.

I think the group dynamic is, and have been, great. While in the design process we have challenged our ideas together, trying to see it from different perspectives in order to make them better. We’ve encountered some problems (e.g hygiene rules) during the project but I think we’ve conquered them in a good way, by discussing and working as a team. That also helped us to stay on the same page during the project.

Learning outcomes:

  • Research the context we’re designing for, in order to not miss out on important things such as hygiene rules in kitchens.
  • Making paper and video prototypes is a great way to convey an idea in an inexpensive and time efficient way.
  • Bodystorming is a good way to find flaws in the design and prototype, as you try it out and act as it actually exists. It is also a good way to look at the project through different perspectives. For example, the small test we made by glancing at the sketch using shaded colors helped us understand that it was hard to distinguish the priorities, which led us to improve it by applying solid color.
  • When inexperienced designing for a device (e.g smartwatch in our case), it can be a great opportunity to look at design guidelines for inspiration.

Here’s the full video prototype that we created!

Presentation and critique

Some feedback that we got from the presentation:

  • We should have explained the system a bit better as for someone who is completely unknown to how an order system works it can be confusing. Give a little more context to the system, then flashing the prototype a bit.
  • David could not understand that the kitchen was working in a big scale since it was a lonely chef with no one else around.

Reflections about the presentation:

We could’ve set the context in a better way. We thought of going to a real restaurant that my cousin own but that did not work out, also we could’ve thought of using the uni restaurant. However, given the constrained environment of my kitchen we tried to do it with sound, but could’ve used more people than only one in the video that we created, so that it would be more apparent that the situation was in a big scale kitchen.

Some groups made the interaction clear by using overlaying paper for their buttons or whatever symbols they used, so that it could be pulled in or out from the device. We just used static sketches. We could’ve done this with the tablet to make the interaction clearer on the video. However, it would have been difficult to achieve with the watch on the arm, without showing the person pulling the paper.

It was nice to realise that the audience understood why we cut out the background sound when we switched to the first-person view. We thought of explaining this before but left it to see if people noticed it. It showed that it is important to explain the context during the presentation before the video is shown.

Lämna en kommentar