User testing the food ordering app.

Video documentation of the user testing.

I did some user testing for my food ordering app that I had designed last week. I had five users perform different tasks, talking through each of the decisions they were making. At the end, each user offered up some advice about what would make the experience more intuitive.

Since we didn’t need to test a working prototype, I decided to perform these initial tests using my laptop rather than a touch screen iPad. I created a Keynote presentation with invisible buttons that users could click to simulate the interface and flow of the app.

Screen Shot 2016-03-02 at 1.13.17 AM

The testing setup

I set up my laptop at a desk at ITP and invited five people to test my app for 5-10 minutes. I used the same script for each user, explaining the idea and providing directions for the test. I reminded users to talk out loud as much as possible while they were testing the app.

I assigned three tasks for each user to perform:

  1. Add a chicken sandwich with pesto to your shopping cart.
  2. Add a tea with milk and honey to your shopping cart.
  3. Go to checkout and purchase your items.

Screen Shot 2016-03-02 at 1.06.40 AM

The user feedback

Everyone agreed that the interface was clean, well-designed, and easy to navigate. They had no problem completing the tasks. All the users, however, expressed a desire to be able to navigate more quickly around the app rather than going back and forth between screens. Several users suggested adding a sidebar menu.

Another problem that arose during the test had to do with the last stage of the payment process. The prompt says “Does everything look right?” but there is no summary of the order for the user to review before clicking “Yes, place my order.” Users said that the flow was a little confusing. One user tried going back to his order to check.

app 9

Informing the next iteration

The user testing helped me decide how to improve my app. I had anticipated that people would ask about adding a sidebar menu – after all, that was something we had discussed in class – but I had not anticipated the adverse reaction to the payment slide. In the next iteration, I would add a sidebar menu that could be accessed at any time. I would also add a summary of the order on the last slide.

Designing a food ordering app for the airplane.

cover-image

For this week’s assignment, we were challenged to design a seat-back experience for ordering food on a screen. The scenario is as follows: An airline has introduced a new system for ordering and paying for food from the screen behind each seat. There are several different types of food and drink offered, but there are also extras like condiments that can be added to an order.

From our initial flow diagram, Annie, Daniel and I determined that it was important that the user have the ability to call an attendant if there were any questions about the ordering system. We grouped food items together to ease the user experience. Inspired by the Seamless experience, we also decided that it would be beneficial if the user could see his or her cart on every page. Here is what our diagram looked like:

IMG_3694After sitting down with my flow diagram, I started brainstorming some ideas for the wireframes. I thought about the user in this scenario. Everyone flies on airplanes, so the app would need to be accessible to users from a range of ages and backgrounds. Many people are unfamiliar with the iPad app interface altogether and so it would be important to make the experience as intuitive as possible.

FullSizeRenderOne method to make the app more intuitive is to make the pictures very large. Visual cues help us identify options more quickly, so I decided to overlay the text on large images of the food.

First, the user is asked if she would like to order something. If not, then the screen powers down so she won’t be bothered.panel-1Once the user touches the type of food/drink she would like to order, the available options in that category will appear in a horizontal scroll that you can browse. The user always has the option of going backwards and changing her order.

It was important to me that the user was able to add extras like salad dressing or condiments without having to click around. As you can see, she can quickly check the appropriate boxes when she is adding a food item.

panel-2When she is ready to pay, the user clicks the “checkout” cart in the top right-hand corner. The app will guide her through the payment process. There is the option of adding special instructions or paying with either card or cash. panel-3

If the user is confused and needs help, she is directed to a page to call an attendant. If the order was placed successfully, she’ll receive a completion page.

panel-4

Flying on an airplane is not a pleasant experience. With this design, I aimed to make one aspect of the airline experience a little more comforting, with large images and a simple, minimalist design.

Wireframing the goal-tracking app.

Untitled-7

Last week, we designed a physical object that could function as a counter triggered by the end user. Inspired by the classic pomodoro timer, I prototyped a counter that required a twist to move up or down.

This week, I prototyped the app version of my counter with some wireframes. I started the design process by collecting my thoughts about the user of this app: Who is he or she? What would he or she be using this app for? What are the primary functions of this app?

FullSizeRender-3

I decided that I wanted to build an app that allowed the user to set simple numerical goals for herself and then track those goals over time.

I had a lot of ideas about how to make goal-setting a more positive experience. For instance, studies have shown that individuals are more successful at achieving their goals when they frame the experience as an accomplishment rather than a punishment. I thought about adding metrics so that the user could track his/her goals over time.

FullSizeRender

FullSizeRender-1

The app that I conceived has three major components: adding goals, tracking goals, and reviewing metrics. I wanted to make sure those tasks remained central and accessible at all times, so I decided to add a button on the bottom of the screen for “report” and a plus sign for adding a new goal. Here’s the design I came up with:

timer app-1Here is the initial flow: When you open the app (or when you click the + button on the bottom right hand) the app prompts you to add a new goal. You enter the name of the goal, you input the number you would like to reach, and then you can track your progress.

timer app - 2If you click the menu button in the top left hand, this is what the flow would look like. You can set a goal, track a goal, or view overall trends over time.

Measuring time in coffee spoons.

counter
For I have known them all already, known them all:
Have known the evenings, mornings, afternoons,
I have measured out my life with coffee spoons.
 
– T.S. Eliot, excerpt from “The Love Song of J. Alfred Prufrock”

For this week’s UX assignment, we had to design a physical object that would sit on someone’s desktop and would function as a marker of time. The timer had to be manually triggered by the end user as a tool to count something. Here was one of the user personas with which we were provided:

Jon is a Sales Rep for Google. His job is stressful and he has developed a bad habit of drinking too much coffee. He is trying to cut back because he can’t sleep at night. This winter he is up to 4-5 cups a day. Jon loves coffee and doesn’t want to quit, he just wants to scale back from almost 30 cups a week  to a limit of 15 cups per week. Jon is looking for a way to easily track his coffee consumption by counting the number of cups he drinks each week.

The title for this blog post was inspired by this persona. Also, did you know that nineteenth-century French writer Honore de Balzac allegedly drank 50 cups of coffee daily? Anyway, that’s beside the point. The idea is that Jon should be able to use the counter to track how many cups of coffee he is drinking weekly.

I thought a lot about the tools we collectively use to measure time. I knew that whatever I decided to design, it would be best if I chose something in which the interaction was something with which the user was already familiar. I was immediately reminded of the classic pomodoro kitchen timer my mom used to use when she cooked. Essentially a tomato-shaped timer, the user would twist the tomato to the desired number of minutes and then leave it on the tabletop.

The reason the timer is so useful is because it is so simple. The twist motion is one that we are familiar with from twisting off lids and the numbers are clearly marked. For my project, I decided to design an update to the simple pomodoro in which the user would manually twist the object to change the counter.

I found this beautiful bamboo salt box online that I wanted to model my counter after. I felt that no matter how the counter functioned, it was important that the physical object be aesthetically pleasing, an object that someone would want to keep on their desk.

In terms of the interaction, here is my initial sketch of how one would use the counter by twisting the top:
FullSizeRender

Etched on the counter would be an arrow on the bottom and numbers on the top. That way the user could easily turn the counter in order to count. That way, the user could set goals for him or herself as needed (for instance, weekly coffee consumption by the cup). Here is what my version of the pomodoro would look like:

counter

The design of everyday objects.

“The human mind,” writes Donald Norman, “is exquisitely tailored to make sense of the world. Give it the slightest clue and off it goes, providing explanation, rationalization, understanding.” The most delightful objects are ones that are designed with an eye for human psychology.

A good design interaction.

These days I can’t leave my house without clutching at my left wrist. It’s become a morning routine: brew the espresso, froth the milk, put on my coat, grab my phone, and perform the requisite Jawbone check.

At sixty-six millimeters in width and 19 grams in weight, the Jawbone UP24 resembles a thick, rubber-coated bangle. It monitors not only how many steps I take daily, but also the frequency with which I move during certain times of the day. It dictates what time I sleep (a pulsating buzz at 10:40pm reminds me it’s time to get ready for bed) and it alerts me when I’ve been sedentary for more than 45 minutes. The accompanying UP app connects to the bracelet via bluetooth, invisible waves traveling through the air to communicate bytes of information.

It’s difficult to explain why the Jawbone is such a delightful device. I’ve been wearing it for over a year now and the app has quickly become a regular part of my routine for healthy living.

The Jawbone has a very simple design. There are no screens. There’s only one button and one port to charge. Two modes – sleep mode and activity mode – are indicated by small icons on the band’s side. I think that one of the reasons the device is so successful due to its simple design.

In terms of shape, the Jawbone itself has rounded edges and shapes itself to the crook of my wrist, integrating itself into my body. It doesn’t jiggle when I’m walking or running because its shape is meant to cling to my wrist. Its design is so successful that I often forget I’m even wearing the band.

The UP app, which accompanies the physical bracelet, serves as a repository for all the data the band is tracking. I like it because it gives the user quick snapshot of my physical activity and my eating habits for the day.

A bad design interaction.

Snapchat is an app that I interact with daily. Valued betwen $10-20 billion and boasting over 100 million monthly active users, Snapchat obviously has a product that lots of people are using.

In spite of these statistics, the user experience of the app is not intuitive. First of all, there is no feature (or the feature is buried) for discovering new users on the app. In order to follow other users, you need to either (1) be friends with the user on Facebook or (2) already know the username of the individual you’d like to follow.

Second, users can get “caught” in a Snapchat story without a clear visual cue for exiting. Do you swipe? Do you tap? It’s unclear and I’ve accidentally clicked a new organizations symbol only to get stuck tapping through a series of videos I didn’t want to watch. Here’s what one site had to say about Snapchat’s UX:

Many developers have grappled with the different ways to remove barriers for the user and while not always successful there’s usually at least an attempt made to streamline the experience. But Snapchat doesn’t care about your ideas relating to user experience. It doesn’t want to explain its features. It doesn’t present an architecture that would make sense to anyone without any sense of its logic.

To improve the design of the app, I would suggest adding a button that allows you to search for users by name. I would also add a page for “browsing” or looking at “trending accounts” that you could follow.

ux