The Final Video Prototype

Video Prototype for “Lose It!”

Sunny Cui

--

HCDE 451|Assignment 6: Video Prototype

The Challenge:

As a UX designer, my task this week is to create a video promotion prototype that outlines the functionality of a health/fitness application. The application I chose is “Lose It!”, a calorie counting app that helps you to track food calories and stay motivated to make smarter diet choices.

The UI of “Lose It!”

“Lose It!” is especially helpful for college students since they tend to prioritize budget and convenience when making food-related choices, which can potentially lead to health issues later in life. This motivated me to create a video prototype for “Lose It!”.

Design:

After choosing the application “Lose It!”, I started to think about the story that I want to tell. I decided to focus on a scenario that makes the user use the app.

Designing the Scenario

I began by designing a scenario. Because I have used the app before, I also reflected on my experience when using the app, for example, tracking how many calories I have consumed, and making sure I consumed the right amount of each macronutrient. Since “Lose It!” is an application targeting young adults who are trying to lose weight, instead of filming a specific user, I decided to only focus on choosing food and demoing the app.

Storyboards:

I started by thinking about the general structure of the video, and the scenes I need to film in order to tell the story clearly. In particular, I wanted to emphasize the feature that allows users to check the nutrition values of their food and record, so I decided to record a one day diet of a user to demonstrate the “calorie counting” feature.

To demonstrate how the “calorie counting” feature, I decided to start by showing a sentence saying “did I eat healthy today?” and then list all the meals the user eat for the day. The food scenes are connected by a clock video clip indicating the change in time, for example: from dinner time to snack time. At the end of the video, I decided to add a scene with plain text stating the name of the app “Lose It!” and a slogan. The image below shows the first storyboard I sketched.

The first storyboard for my video prototype

Filming:

After sketching out the storyboard, I filmed the video on my own with the help of several people. The equipments I used are iPhone XS Max and DJI Osmo Pocket(a 3-axis stabilized handheld camera). I started by shooting a lot of food scenes and eventually selected 2 meals and a cup of coffee for my video. In the first draft of my video prototype, the food scenes are connected by a reverse clock video clip to represent what did the user eat in a day in reverse chronological order. The video below is the first cut of the video prototype edited in iMovie.

The first draft of my video prototype

Analysis:

The effectiveness of my design:

Filming and editing went smoothly, and as expected the first draft has some discrepancies between what I expected and the finished video. For example, my idea changed during editing the video where I used a reverse order to present the meals. Overall, I think the first draft has successfully and effectively conveyed the basic functionality of “Lose It!”; however, I feel like the story can still be improved.

Based on the feedback from my friends and peers, it is easy to understand what the app is about and how to use it, but the story is not very clear to them since there is no narration. My intention was to create a video that is intuitive enough to convey the story, but I think the first draft was not very successful in terms of the storyline.

What worked well:

I received the following feedback about what was done well:

  • the food scenes look really
  • it is easy to understand the functionality of the app
  • the clock clip and it's sound is creative
  • the last scene with the slogan follows the color scheme of the app

What needed improvement:

  • the storyline is not very clear
  • it might be helpful to incorporate a scene with the app interface with the food scene

Second iteration:

Based on the feedback from my peers and my own reflection, I decided to do a second iteration. I mainly changed the storyline and shoot a few new food scenes. I think the main problem of my first video prototype is that I didn’t tell the story clearly.

I brainstormed some ideas and decided to start by showing the text messages between the user and his/her friend, where the users asked his/her friend how to keep a healthy diet, and the friend recommends using “Lose It!” and provides a step by step guide that teaches the user how to use the app via text message. The image below shows the new storyboard.

The refined story

Other than changing the story, I also shoot a few food scenes and learned to use Final Cut Pro(a video editing software). When I was editing the first video, I found that even though iMovie was really easy to use, the effects and functions are really limited. The video below is the final version of my video prototype edited by Final Cut Pro.

The final version of my video prototype

Overall, I think this is an interesting and rewarding project. It not only challenged me to tell a story/demonstrate essential functions of an app in a short amount of time, but also prompted me to learn more about filming and editing videos. I believe these skills are very useful for a UX designer.

--

--