Zoomers — On the way!
by Zoomers
Introduction
As part of our Human-Computer Interaction course this term, our team “Zoomers” got the opportunity to conduct an entire design process for a project that included design activities, reading reflections, buddy team feedback, and design reports. We conducted this design process through various iterations and phases. These phases included the Define, Empathize, Ideate and finally, the Prototyping & Test phase. At each of these phases, we further developed our product based on user feedback. As a result of these iterations, we came up with a final high fidelity prototype, and we are very excited to share the journey we took to arrive at this last stage.
Empathize and Define
Description of Problem
Observations of users between ages 20 and 35 have found that many consumers do not have an accessible, affordable, and consolidated place to maintain healthy habits. Healthy habits are defined in this scope as physical and mental health concerns, as well as diet. To encourage our users to develop and maintain healthy habits, we also considered how to gamify our users’ experience by incentivizing them, such as with reward points or achievement badges.
Value Proposition
We started by considering services for as many healthy habits that we could brainstorm. These included exercise, diet, sleep, stress management, addiction, and social good. As students studying at various educational levels, we believe we can empathize with our age group regarding the type of bad habits we develop and the desire to find solutions to manage them. We considered developing to differentiate the product, including social media integration, incentives for social good, and accessibility for visual/auditory impairments. We couldn’t think of a better way to encourage millennials and a purpose-driven generation than to provide an incentive system that rewards them with the sense of building a better world!
Persona/Empathy Mappings
Our personas are in the 20–30s demographic each with distinct lifestyles and at different stages in their life. We want to model the behaviour of a typical university student, a younger adult with a busy lifestyle, and an adult who has settled down. We have included the persona we believe matches our product the best below, although we did create two other personas in the design phase.
Persona 1: Gregarious Kay (smoker, overweight)
Description: Kay, 29, salesperson with a busy lifestyle, concerned that eating out at restaurants, smoking, and drinking with her friends are contributing to her weight gain and unhealthy habits. Looks for new motivation and ways to establish healthier habits while maintaining her social life.
Interview and questionnaires
After coming up with personas, we designed a three-question interview and a two-item questionnaire to be conducted with participants from our target demographic (as shown below). The purpose of conducting interviews was to gain a better understanding of our target participants’ needs and identify key user goals to support.
Key Findings from Interviews
We interviewed two people in their 20s and one person in their 30s. The key user goals derived from interviews were maintaining a healthy diet, regular physical activity, consistent time management, and regimented sleep management. All participants said that their existing healthy habits apps were not engaging to use and were not personalized enough to provide meaningful benefits.
Two out of the three participants currently spend no money on healthy living products/services, and one out of the three participants spend $600 a year. The younger participants (20s) pay less on healthy living products compared to the +30-year-old.
Ideate
Design Arguments
Our primary users’ goal was to improve their healthy habits, which we initially narrowed down to physical activity and eating habits. In our design arguments, we identified five features to help our users manage and improve their eating habit. To obtain these features, we looked at the users’ goals and challenges derived from our empathize and define stages of design and voted for best ideas as a team (Figure 4).
User Stories and Storyboards
User Stories
This app’s first goal is to provide our users with an experience similar to Uber eats, but only for their selected diet preferences. This reduces the time that the users need to look for foods they can order (feature 1). The second goal is to gamify the goal setting and habit-making process for users, allowing them to collect reward points as they achieve their goals (feature 2). The other features (shown in the Features section of Figure 1 above) were removed later in the ideate stage, to ensure the app is focused on one problem, instead of many.
(Epic) As a user, I want to order food online but have only options that fit my diet. It takes so long to find meals on Uber Eats that fit my diet.
- As a user, I need to enter my diet. (user story)
- As a user, I want to browse restaurant menus but only see foods that fit my diet. (user story)
- As a user, I want to order my food in a similar experience to Uber Eats. (user story)
- As a user, I want to earn reward points that can go to a discounted meal. (user story)
(Epic) As a user, I want a points/rewards/gamification system to motivate myself to maintain/develop healthy habits and make the process enjoyable.
- As a user, I want to list my healthy habit goals (user story)
- As a user, I want to view the different available rewards for completing goals (user story)
- As a user, I want to collect rewards as healthy habits are exercised (user story)
- As a user, I want to track progress of my goals through (gamification) rewards/points received.
Storyboards
Here we see Joe, who is a University student, thinking about how to eat his next meal in his dorm room / apartment. The app provides guaranteed Paleo options and Joe is able to quickly select one.
Here we see Susan, a new grad who finds it difficult to motivate herself to maintain/develop healthy habits coming out of University. This is mitigated by the app, as she is able to earn rewards and share her accomplishments with friends.
Sketches/User Flows
The goal of the app is to provide options for the user to order food online that fits the user’s diet (which the app queries the user about, in the sign up flow — not shown).
Once the user decides on their diet, the app lists restaurant menus, filtered for the user’s specific diet, in a similar interface to other online delivery apps like Uber Eats or Doordash. Upon selecting a restaurant, they are presented with a screen with all of the items that match their diet in the restaurant. Finally, users are able to add sides and add the item to their cart.
We also want to provide users with a list of articles they can read for redeemable points at the bottom of the screen. For this feature, we designed a set of screens that direct the user from the homepage to the “Earn Points” page and allow them to access the redeeming options quickly.
Features
Feature 1: As a user, I need to decide my diet on the app. I want this so the app can suggest foods that match with my diet (Figure 7).
Feature 2: As a user, I want to see tips and suggestions about food and diet through customizable push notifications. (Figure 8).
Feature 3: As a user, I want to browse restaurant menus but only see foods that fit my diet. It takes so long to find meals on Uber Eats that fit my diet. (Figure 9).
Feature 4: As a user, I want to earn reward points (reading articles/purchase reward points/sharing articles or the app with friends/orders aligned with diet) to go towards a discounted meal. (Figure 10).
Feature 5: As a user, I want to redeem points that can go towards a discounted meal. (Figure 11).
Prototype and Test
Paper Prototypes and Improvements
We first created prototype screens for two of the major features: 1) ordering food and 2) collecting reward points (Figure 12).
Some key changes we made from the TA feedback were to show what the search bar does, to add a daily limit to the number of articles a user can read, and to add a checkout screen (Figure 13).
Paper Prototype Feedback
We interviewed three users who gave us both UI and UX feedback on our two main flows. A summary of the feedback:
- Participants expected to see ingredients on the meal detail screen. Put Ingredients above Nutrition Facts on the Ordering of an Item screen (Figure 14).
- Change ‘View cart……checkout’ button to ‘View Cart and Checkout’.
- Add discount code field in checkout.
- Add a button to the points screen above Points Summary allowing the user to go back to the home page to ‘Earn points’.
- Limit articles to 3 per day
- Better inform how points are earned
After reviewing these feedbacks as a team, we incorporated them into our re-designs and built high fidelity prototypes, prioritizing the pain points from the last interviews.
The High-Fidelity Prototype
We designed our high-fidelity prototype in Figma, by implementing the user feedback from previous design stages and selecting a name, logo, and a color palette for our application. Finally, we refined our prototype based on feedback from the heuristic evaluations and cognitive walkthrough.
Feedback
Finally, we refined our prototype based on feedback from heuristic evaluations with two participants and cognitive walkthrough with one participant.
These refinements included:
- Renaming category labels on the homescreen
- Fixing the checkout bar to the bottom of the screen
- Improving interactions in the prototype. For example, adding interactions to food titles as well as their images
- Improving the visibility of buttons on some of the screens, such as the back button on the Restaurant Menu screen and the star icon on scrollable screens.
Please refer to the demo video to see our final product in action!
Conclusion
Reflections on the Design Process
During the design process, we learned several ideas and philosophies that have reshaped the way we approach problem solving.
In the Define stage of design, we learned, in the hard way, through feedback after “failing” to not fixate on symptoms, but instead find the root of the problem and build from there. We learned the three magic words “How might we…” to guide our questions and dig to the core of the problems. We were initially fixated on getting people to essentially eat more veggies. But the root was that students lacked motivation and found it a hassle to prepare their food plus with the limitations a diet entailed. Asking “How might we… make it easier to eat diet compatible food” led us to our idea.
In our Ideate phase, we learned from the design gods at IDEO: “Enlightened trial and error succeeds over the planning of the lone genius”. It was better to have two iterations on a quick initial idea, than to have only one iteration of a longer baked idea. Although we didn’t have time to do more design iterations, the feedback we would have applied to our second iteration contained changes we wouldn’t have anticipated if we just tried to brainstorm the perfect product for a month.
Enlightened trial and error succeeds over the planning of the lone genius
Current Limitations & Future
Our app would currently lack the restaurant critical mass to offer enough diet-filtered results to hungry students. It also lacks a delivery/driver infrastructure that is essential to making this a real product. The points system would also need to be funded either by own resources or special deals with restaurants, both of which we lack right now.
Working with this idea made it easy for our team to design a user interface, which was the first time for any member on this team. Since the idea was very similar to food delivery apps, we could borrow a lot of existing ideas and focus more on the design process without getting stuck on implementation.
We probably will not be carrying forward with this idea, as it seems too niche for the market it’s in. It is also essentially UberEats with a diet-filter option. With that being said, we will all likely carry on the design principles we learned into all the future products we work on during our careers.
