When international students just come to America it is a pain for them to order foods in restaurants. First, it is hard for them identify the tasty foods from the menu. Second, they don’t understand the social norm in America. And they even may have problems with their oral communication with servers. So our team want to develop a solution to solve this problem.
Users can see what foods their friends recommend them on this page. If users like the food he can send flowers to their friends. If they don't like the food they can throw egg, tomatoes or the food back to their friends. And there would be an animation, makink friends' interaction more engaging. Users can also change the tab to see what foods they recommend to their friends.
The roulette icon floats on every main section page. By clicking it the roulette page pop up. And the sytem will recommend users tasty foods based on users' food restriction and preference. Users can also easily move the roulette icon around by dragginh it.
The ordering process of different restaurants or even the differend foods varies. Here we provide the most detailed instructions on ordering. Users only need to follow guidance and complete the ordering step by step. Then they can rate the foods, write reviews or recomend it to friends.
To understand the target user and user needs we conducted contexual interviews and analyze the results through affinity mapping. Afterwards, we further conducted survey to confirm our hypothesis and generate persona. CHECK RESEARCH DETAILS.
To narrow down the problem scope, we conducted task analysis of several on-campus restaraunts to understand the procedure of on-campus dining experience. From the task analysis (check images) we could see the dining experience varied case by case. For instance, in restaurant like Panda Express, customers need to wait in line and order their dishes step by step. But in restaurant like Waffle House customers need to sit at a table and wait for the waiter. These differences could cause confusion for new coming student. But what are the specific questions encountered by students?
Contexual Interview and Affinity Mapping
To gather specific problems students have with on-campus dining and the reason behind them, we did 9 contexual interviews and post interviews. Then through affinity mapping we found:
To validate the insights from affinity mapping we choose to conduct a survey on it which was released on Quatrics and got 60 effective responses. Results showed that the top 3 concerns for foods are price, flavor and friends' recommendation. And here are some important statistics about it.
Through solid research we concluded important user needs. Here are the three most important findings.
Reflection of Persona
We build the persona based on the survey result. In the process assigning the persona name\gender\nationality we gradually build a clear image of our target user and understand their personality. These images help us predict their response to our design. That is what they will think, feel, say and do with our design. This feeling was really amazing!
We first translate the user needs to our design needs and here are three most important design needs:
We then conducted a brainstorming session to generate creative ideas. We did a great job that we finally have 40+ ideas. However, we can’t implement all of them so we started to critique this ideas based on its feasibility and efficiency. We also held a design sprint to collect feedback (with low-fi prototype) from our peers and finally we decided to go with a gamification (roulette) mobile app idea. First, people can easily get access to a mobile app since all the students have their smartphone and bring it everywhere. Second, students feel more immersive in a game setting. Third, we got feedback saying roulette will be super helpful helping them deciding their dining.
In the design sprint we only had a rough prototype to collect feedback. It satisfied the major user needs we found in research. However, how the features should be grouped together? In other words, what’s the ideal information architecture? To understand it we further conducted a card sorting.
Based on the results, we designed the information architecture as below.
Reflection of Design Process
There are always no clear boundary between research and design. Even when we came to the design phase, sometimes we were still unsure about some important research questions. At this time, randomly making a design decision is not a good idea. So it's really important to come up with quick and dirty research to support design. For example there we didn't understand how user would group different features of our app. So we quickly created an online study making use of an online tool Optimal Workshop, and quickly diffused it through asking students who sat near us whether they'd like to help us. After analysis the result we came up with a reasonable information structure.
In our team I am the only design background student so I took the design lead responsibility. But our team members also expressed their interest designing the pages. So I carefully read the ios design guideline, designed the UI kit and several Sample pages for them to make sure the design could be consistent. And I conducted the final adjustment of our design.
Reflection of UIKit Design
when I was designing the UI kit I was confused at where to start. So I decided to carefully read the IOS design guideline to get inspirations. The design guideline introduces important concepts like direct manipulation, feedback, metaphors, user control, etc. I am familiar of most of the ideas but there are still some impressive opinions. For instance, the design guideline talked about the color scheme and the lighting condition, saying there always should be two color theme. One is used in high light condition while the other is used in dark environment.
However, there are still explosive information in IOS design guideline so I also searched and learned how the other designers designed their UI kit and what components should be included. Combining both of them, I confidently designed the UI kit. But when it came to the detailed app page design. I found my “confident” UI kit lacked some components needed, resulting in my team members’ self-create design elements which bring inconsistency to our app. At this time I would go back to the UI kit and added the needed component. Through this process I understood that UI kit is not just about providing typography, icons, buttons. It is generated from branding and will further affect the usability. Especially when you collaborate with people who are not experienced in design, providing appropriate components suit for your product is crucial. Otherwise your partner couldn’t accurate get the visual language and make inconsistent design.
Before official start of the detailed design page we decided to conduct a preliminary research to avoid possible severe problems. We designed a set of important tasks as below. We measured the task time and task success and asked participants to conduct think-aloud. The result was unexpected but valuable. And we conducted design iterations based on the feedback.
According to the usability test, we found 3 of 3 of participants reported they had navigation problems. They said they had "no idea where they were". They couldn’t clearly and confidently know where to go to another section (usually it took a while for them to understand the hamburger menu). This finding made us reflect on the hamburger menu design and finally replaced it with the tab design.
We also asked participants what they felt about the avatar. They reported that the single avatar page seemed unrelated to the other elements. They were confused. After we explained the coins they earned by recommendations could be used for customizing avatar they said they would rather have coupons. Their feedback drove us to think about the avatar design. It didn't work in they way we expected and against the minimalism principle. So we finally decided to remove it and made the concise profile page.
When we conducted our usability testing. Users hold very different opinions for the friends' interaction. Some of them thought it is too rude to throw back the dishes to their friends While others think it's really funny and interesting. Through discussion, we decided to keep this "throw back" function, but we also add a function to allow users to send flowers and say thank you to their friends.
We were asked many times "what are the differences between you and Yelp?". It was not very clear at the begining of the process. However, through research we gradually understand the biggest difference: Potluck is based on social interaction. That is, user and their friends can enjoy playing with each other through recommending foods and responding them. And we also provide a value to help them make a decision on what to eat through roulette. And we also tried to provide recommendations based on people's food preference which was not valued by Yelp.