Yogurt World is a quarter-long project. Four people as a team to find and work with clients to create a mobile app design that meets the client’s expectations. We probed deeply into particular topics, such as navigation, graphical display of information, and narrative coherence during the process.
As the lead designer and researcher in the team, I am responsible for the paper/interactive prototype development and iterate by analyzing user feedback. I also participated in the design of research and statistically analyzed the needs of users.
Skills
User research,
User test,
Prototypes design
My role
Researcher
Designer
Prototypes developer
(Physical and Interactive)
Teammates
Zhixian Zhang
Xirui He
Shanhua Hu
It is a course practice project, but this is a new challenge. We had to find clients and design products for them. So we had to plan so as not to waste ten weeks.
User Interviews
Our first challenge is to think about what our app should include for the beginning of a brand new app. This will affect the development of all subsequent plans.
The client had given us a general idea of the types of users he intended to target. We knew it was not enough; we had to get a reality check on our site’s requirements and prove to our client that we have something to say based on facts. Both us and our client may think we know what the users want, but we can be very wrong. So we decided to interview 15 customers. And we would categorize 15 interview participants into three scenarios during ideation.
Competitive Analysis
The research is not enough. We also needed to get inspiration from more competing products and understand how they solve the problem. It was essential to appreciate that a competitive analysis starts with real competitors in modern times and goes beyond sites in the same ‘market’.
We found many useful plans, so we brought those plans to clients and users, hoping to overcome the challenge from their decisions.
Client Proposal
After reorganizing the conversation notes into a client survey, we analyzed the client’s needs and listed the priority list.
CHALLENGE STATEMENT
We found that users want to get full information more conveniently through the App, such as daily updates, activities, and addresses through the research.
And the client hoped that the App could display more comprehensive store-related information, such as store-related stories, hundreds of flavors and toppings, and those nutritional details.
We found this to be a considerable challenge. Users hoped to get information more conveniently by using the App, while the client expected to display more detailed and comprehensive information by the App. These two needs are undoubtedly contradictory.
User scenario
To overcome the challenge, we first need to find solutions by analyzing the needs of users. Through the user interview, we had enough information to make the user scenarios. But we had to set up three personas first.
After deciding persons, We had to bring these personas into the scenario, create user scenarios to understand users’ motivations and needs better, and ideate, iterate and usability-test optimal solutions. We summarized the feature and functionality table by analyzing these scenarios.
Information Architecture
After determining functions by the user scenario, we soon began to build an information architectureto determine the functional specifications. This is also helpful for us to create a paper prototype later.
Through ideation, we determined the basic logic of the App and improved information architecture. Next, we need to think about how to present complex information to users in each section, and this is a breakthrough for us to overcome challenges.
Paper prototype
After research and ideation, we had a preliminary conception of the function and design of yogurt world. We decided to start with mobile design, make a low-resolution sketch to show our ideas to users and clients. This is also convenient for a later iteration.
We soon show low-resolution sketch to users and client. After received a lot of feedback, we recorded those based on the need for improvement. Then we quickly started making iterations
And we have a better understanding of the app’s layout design through user feedback, so we iterated a more detailed version and added functional descriptions.
Through further communication with users and customers, we have received more good feedback. So we thought that this design idea could solve the problems we faced before, so we decided to make an interactive design.
Interactive prototype
Homepage
We used the Gallery to show attractive frozen yogurt pictures. Not only users who use the App would immediately realize the purpose, but also can raise the user’s appetite.
We used the carousel to show today’s flavors/toppings. Users can quickly learn about the day’s menu when they open the App, and the swiping bar help page retains a lot of information while keeping it concise. Users can also click “See All” to view the complete menu.
According to the client demands, we added product-related stories on the homepage to inform users of the store’s primary purpose. And we had also added many features that customers desire to see. We used designed logos to help users view and click to access the corresponding page.
We put the detailed location and the store preview at the end of the homepage. The purpose of placing the location at the end of the homepage is to let users view all the information above while learning the location information.
Menu
We followed the opinions of customers and the client. Putting ‘Build Your Frozen Yogurt’ on the first line of the menu to guide new customers.
We added the detailed menu of flavors and toppings in the second and third line. Customers can not only view each flavor and toppings’ introductions, nutritions facts, and ranking but also the season’s limited-release flavors and share reviews with other customers.
Based on the survey, we found that many customers have difficulty making the combination of frozen yogurt. To help customers solve problems and increase the App’s interactivity, we added ‘Suggested Combination’ in the fourth line. Customers can share their preferred combination and view others’ sharing. Building small communities can increase the time users use the App and help the client attract more customers.
We added the ‘Ingredient’ section at the last line; users can view all foods’ ingredients. We also designed a search mode to help users avoid being bothered by too much information and classes.
About
According to customer requirements and our investigation, adding ‘Our Story’ to the ‘About’ page can better help customers experience the yoghurt world’s concept and start. This will not only attract more customers but also better help customers know yogurt world.
Yogurt World had a long history and desired to tell customers, but customers will be troubled by the vast text and don’t want to read it if we simply arranged all the stories on one page. So we used toggle down design to show the important timeline, and select the significant history to help the shop better publicize. Users can choose the section they are interested in or read in order.
Location
We didn’t add too many features to the ‘Location’ because we didn’t want to mislead users. We put the store’s outlook, exact address, and business hours in the map section based on the survey. For users’ convenience, we added an interactive map to help users view the surrounding area to find the store location faster.
Contact
Collecting feedback from users is a significant part of the iteration. Based on the client’s expectations, we set ‘Contact Us’ as the last section. Users can quickly find and feedback questions or provide expectations in the navigation bar.
User Testing
After completing the interactive prototype, we tested it with different users. We designed various tasks for users under different scenarios and recorded the improvements we need through user feedback.
Reflection
I learned a lot about working with the team to complete a perfected app. Earlier I could do it alone, but I found that my ideas were naive, because everyone on the team would make unique suggestions, many of which I could not do by myself. At first, I was particularly proud of my ideas, but as the team members continued to put forward new ideas, I realized that I had a lot of work to do. If I do it again, I will try to write the design prototype concisely to ensure that future modifications can be more convenient. I am very grateful for this opportunity to work with such an excellent team. I hope next year 187B students spend more time talking with clients, because they know more about the brand than anyone else.