<p>Published on <a href="https://blog.prototypr.io/ux-design-food-adventures-app-2e4a4ee8068d?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Jessica Chang </p>
<h4>Designing a mobile app for food-lovers and their friends</h4>
<p><em>This project was created for </em><a href="http://redacademy.com"><em>Red Academy</em></a><em>’s UX Design Foundations course in June 2017. The task was to create a UX design for a mobile app. I created </em><strong><em>Food Adventures</em></strong><em>, a “trip planner” for food. This is my first UX project.</em></p>
<h3>Food glorious food.</h3>
<p>In coming up with an idea for a mobile app to design, my first instinct was to create something related to food. Whenever I plan to meet up with friends or family, we always go out to eat. It’s the thing we do for fun.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/500/1*l18wvGEoSvSpk3FQay5U7A.gif">Food? Yes, please.</p>
<h3><strong>The problem.</strong></h3>
<p>Recent university graduates, my friends and I find it harder and harder to meet up. As we transition into a new stage of our lives (complete with full-time jobs, graduate school applications, and existential crises), we find it more difficult to plan get-togethers that match our busy schedules and cater all of our needs. Additionally, we’re huge believers of the “round 2”. We often go to at least one more place, often dessert, before going our separate ways. This creates further issues as we make decisions about where to go and how to get there (and possibly getting lost along the way).</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Hx8h5Kw90mgUv8p9SfLtZA.png"></p>
<h3>The idea.</h3>
<p><strong>Food Adventures </strong>is mobile app for foodies to explore new places and plan food-centered excursions with their friends.</p>
<h3>Figuring out the user.</h3>
<p>In order to create a better solution, I first needed to better understand the user and their problem. I used two tools, the User-Centered Design Canvas and the Customer Journey Map, to give me direction as I headed into user research. This clarified my once vague idea into one with potential features and user types.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*OM7BmeMbiCEav1Durssk8A.png"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*-2NmXGoMcVcZz6JXUi6Bqw.png"></p>
<h3>User Research.</h3>
<h4>Depth Interviews</h4>
<p>I created a few open-ended interview questions to get to know my target audience. I was looking to understand their thought processes as they plan food outings with friends. I wanted to see both what helped and frustrated them during this planning process. This also was a chance to verify/disprove ideas and assumptions I had made while creating my customer journey map and user-centered design canvas.</p>
<p>I interviewed five individuals in total: a 24 year old female, a 22 year old female, a 25 year old male, a 23 year old female, and a 28 year old male. These individuals were all tech-savvy mobile app users who enjoy food and going out to eat.</p>
<p><em>Interview questions:</em></p>
<ol>
<li>When (i.e. what occasion) do you plan where to go to eat?</li>
<li>How do you decide where to eat? (What criteria do you use? What catches your eye? What tools do you use?)</li>
<li>You want to meet up with friends. What frustrates you about making these plans?</li>
<li>What is special to you about going to eat with others? (How does it make you feel? Why choose food over other activities?)</li>
</ol>
<h4>Surveys</h4>
<p><em>You may view my survey </em><a href="https://goo.gl/forms/ZNyXJ01SHbuEOQxA2"><strong><em>here</em></strong></a><em>.</em></p>
<p>I surveyed 26 people. Majority of this population was 18–24, frequent social media users, and had full-time jobs. As I was interested in seeing what potential users of the app would want, I tried to send my survey to people who like to go out to eat and have an interest in food. True to this, 92% of them go out to eat at least once per week. A younger population, these individuals were somewhat concerned with price (most of them rated their concern a 5 or 6 out of 7). This lined up with my interviewees, who said they try to eat cheap unless it was for a special occasion. I also learned that tracking and making lists of places they’ve been/ wanted to go wasn’t as important as I thought.</p>
<h4>Key findings</h4>
<p>Based on my depth interviews and survey responses here are some of my key findings:</p>
<ul>
<li><strong><em>The app should have an easy-to-use filtered search.</em> </strong>A common problem was finding it difficult to search based on specific group dynamics and other desired features, such as an ability to take reservations. While platforms such as Yelp have filtered searches, they find it hard to use or unreliable. My survey results helped me identify price, location, food quality, cuisine types as important criteria.</li>
<li><strong><em>The design should allow for lots of photos. </em></strong>Three of five interviewees used Instagram as a tool to discover new restaurants. This allowed them to see pictures and see other’s opinions. While the survey results indicated that presentation wasn’t necessary for an enjoyable experience, they are often first drawn in by photos when searching up places to eat and expressed an interest in food photography.</li>
<li><strong><em>Finding a time is a huge problem for them.</em></strong> In the interviews, most interviewees mentioned that figuring out when to meet was a huge frustration for them. A few mentioned tools like polls or similar might be useful to navigate everyone’s busy schedules.</li>
<li><strong><em>There should be a way to share plans.</em></strong><em> </em>Most interviewees mentioned the of use group chats on applications like WhatsApp and Line to organize get-togethers. However, these group chats often become populated with side topics, leading to possible confusion among the group. One interviewee said, “often people will have restate plans over and over again for people who missed it like 300 messages earlier.” From this I knew the app would need a way to share plans with other people.</li>
<li><strong><em>The app should have the ability to include multiple locations.</em></strong><em> </em>Many interviewees enjoyed going for dessert, an activity, or some other location in addition to a meal. This is often because these interviewees have full-time jobs are more available on the weekends, which leads them to plan full days of activities rather than just one meal. However, three mentioned that their irritation at having to search each of these places individually and then piece together a plan that’s convenient and affordable for everyone.</li>
<li><strong><em>Maps are important for everyone.</em> </strong>Whether they are directionally challenged or want to plan out a route for a multiple locations, being able to visual see where they want to go and how to get there is important for every user. Interviewees who particularly enjoyed trying new places found maps especially important and used them both spontaneously, on-the-go and beforehand to plan.</li>
</ul>
<h3>Persona.</h3>
<p>Based on my user research, I developed the following persona.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/770/1*IMYb1dxxYWHY52OQqAQ9Jg.png"></p>
<h3>Features.</h3>
<p>Using my research and developed persona, I narrowed down the features I wanted the Food Adventures app to have.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/780/1*-0PeNGekIImUQ1s45IXB2A.png"></p>
<h3>Competitive analysis.</h3>
<h4><em>Yelp, Trip Advisor, Zomato, Google Maps</em></h4>
<p>(insert comparative table or graph)</p>
<h4>Competitive advantage</h4>
<p>The app stands out from the competition due to it’s focus on “food first” planning. The “find a time” aspect is a unique feature that helps busy users input their availability and matches it with others to make planning easier. Additionally, it has ratings for different factors such as food quality and service so that users can make more informed decisions.</p>
<h3>Prototyping.</h3>
<p>After understanding my users, their goals, and the features I wanted to include, I was ready to start designing my first prototypes. I started with user flows and paper prototypes before generating a set of initial wireframes.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*7BS44se0IWU5GJs5n-R9cw.png">Early wireframes and user flow sketches</p>
<p>I tested my paper prototypes and wireframes with potential users. What I learned from my paper prototypes, is that found a bottom-tab navigation to be “in the way” and “would rather see more of the screen”. As a result, my first wireframes included a hamburger menu instead. Another comment was that users wished they saw more information about each restaurant, which I added in later prototypes.</p>
<h4>Prototype</h4>
<p>Based on feedback from my initial wireframes, I created my first prototype in InVision. I chose red, as it is considered one of the most appetizing colours. In addition to the red, I wanted to the design to be simple with whites and greys so that food photos, which appeal to our users so much, can be better showcased.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/862/1*fAkpyB-zhm0ArDaVHuTEWA.png">A selection of screens from the app design</p>
<p><em>You can view my first InVision prototype </em><a href="https://invis.io/Z5C7M0ED2"><strong><em>here.</em></strong></a></p>
<h3>User testing.</h3>
<p>I did some user testing with 7 people to understand how I could improve on my app design. I looked to see users first impressions, clarity and intuitiveness of the app, and how well the features solved their problems and fulfilled their needs.</p>
<h4><em>First Impressions</em></h4>
<p>Users called it “clean” and “visually appealing”, enjoying the simplicity of each screen. They really liked the use of images and the red made it “fun”. The use of lots of food imagery from the start “makes [them] want to explore the app”. The food search made it obvious that the app was something like Yelp, but the hidden menu made it less obvious what other features the app contained.</p>
<h4>Navigation</h4>
<p>Early testing from paper prototypes indicated that because users wanted to see more photos and more of the screen when searching for food options. When testing with the paper prototypes, I had asked them to complete a goal. This led them from screen to screen without needing to use navigation. In this situation, a hidden hamburger menu seemed to work for users.</p>
<p>However, when testing later prototypes in InVision, users found it more difficult and slow to switch between features. One user even said, “I don’t really like the hidden menu. It’d be nice to have something on the screen to make it easier to find things.” Based on this, I decided to switch to a bottom-tab bar navigation. This worked well as I only had 4 items in my menu to begin with. Some quick testing showed that users found it faster and easier to find things with this new navigation.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/724/1*BlFqkLv340qfj8qRi3KYXQ.png"></p>
<h4>Search</h4>
<p>A few users pointed out that the search was slightly confusing. In my prototype, when you go to search, the app takes you right to an advanced filtered search. One user said, “…It threw me off. Rather than going straight into advanced search it’d be nice to have something more basic with I could just type in a name.”</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*x3fpNFf1WvsVvVAF00oghw.png"></p>
<h4>Map</h4>
<p>Users noted that they found it “confusing” and “weird” that the maps don’t label the locations right away. Originally I designed it so that when you click on a point, a label will appear, which you can then click again to view a full profile.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/693/1*gXklrXGBUXyLTFsl1dJChg.png"></p>
<h4>Using the app</h4>
<p>Majority of the screens didn’t require any scrolling and had few options. This made it easier for them to get to the next step in the user flow. However, it wasn’t always clear to users right away what the next step was going to be until they got to that screen. This was especially apparent in the “Find a time” feature. It was obvious that some of the user flows and features would need to be improved for easier use.</p>
<p><em>You can view my second InVision prototype </em><a href="https://invis.io/Z5C7M0ED2/"><strong><em>here</em></strong></a><em>.</em></p>
<h3>Next steps.</h3>
<ol>
<li>Should explore and test to see how new navigation can be optimized with other elements such as the scrolling search results. For example, perhaps the navigation would not need to screens such as the map screen, where it might get in the way.</li>
<li>Based on feedback, some users found the “find a time” feature a bit clunky. This feature would be something to test and improve user flows.</li>
<li>“My plan” could use more options to create multiple plans for various excursions and events.</li>
</ol>
<p><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=2e4a4ee8068d" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="https://blog.prototypr.io/ux-design-food-adventures-app-2e4a4ee8068d">UX Design | Food Adventures App — A Case Study</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


UX Design | Food Adventures App — A Case Study

Designing a mobile app for food-lovers and their friends

Top Stories