SnackIndex Snack Foods Application Concept GRC 462 - Senior Project Ren Blanding
IRB Statement This project uses research from Cal Poly students as subjects, but the data does not reveal the identify of subjects, nor is the data identifiable to any subject. Users will not be associated with any data points, and therefore this project does not need to be reviewed by the California State Polytechnic University Review Board.
3
Table Of Contents Abstract 4 About Ren
5
Problem Statement
6
Project Objectives
7
Timeline 8 Background Research
9
Competitive Landscape
11
Process 16 User Flows
17
Low Fidelity Wireframes
18
Medium Fidelity Wireframes
20
Usability Testing
23
Branding 25 UI Kit
26
High Fidelity Wireframes
27
Prototype 29 Reflections 30 Sources 31
4
Abstract SnackIndex is an application concept all about sharing, rating, and recommending snacks from around the world! Our aim is to remove the barriers that stop people from trying new foods, and in doing so, create an inclusive environment where users can come together to expand their global palate, regardless of allergies or dietary restriction.
5
About Ren Hello there! I am Ren Blanding, a graphic communication major concentrating in web and digital media, based out of Sacramento, CA. I’ve always been passionate about the ways in which people interact with the designs around them, and how we as creators can facilitate extraordinary experiences. I’m also a firm believer in exploring the world’s cultures through food, and I’m always looking to find new things to try!
6
Problem Statement There is currently no application that allows users to rate snacks from different countries as there are for movies, music, and beers. With that in mind, there is an opportunity to help users explore foods and cultures that they might not have otherwise been aware of. This opportunity will be explored through creating an application concept that will allow users to recommend and review snacks from different cultures. This prototype will allow me to exercise skills in the field of UI/UX that I have learned in different classes and projects, and fuse them into one deliverable product.
7
Project Objectives Accesibility − Screens must be well design and tested for usability and accesibility to ensure that all users can comfortably and intuitively use the application.
Learning Prototyping − Moveable prototypes will be complex in order to demonstrate the application in action
Creating Branding Guidelines − Branding must effectively communicate the application’s purpose and be visually appealing
8
Timeline Week 1: Research & brainstorming Week 2: Compeitive research Week 3: Create and conduct interviews,
revise user flows
Week 4: Begin medium fidelity wireframes Week 5: Medium Fidelity Wireframes, draft
project proposal
Week 6: Finish medium fidelity wireframes,
branding and usability testing
Week 7: Conclude usability testing, revise wireframes after testing
Week 8: High fidelity wireframes and prototyping Week 9: Animations and editing for senior project presentation
Week 10: Process book
9
Background Research Ethnic foods are increasing in popularity within the United States, as tastes diversify. Retail sales of ethnic foods from 2013 to 2018 increased by 1.5 billion dollars in the United States.[1] As well as an increase in sales of ethnic foods, Americans are snacking more than ever, with snacks comprising up to a quarter of their caloric intake.[2] As tastes change, markets have also adapted. Grocery stores now carry snacks from other countries, such as Takis and Pocky.[3] Seventy percent of Americans consider the quality of their grocer’s ethnic foods section as an important factor in choosing their primary grocery store.[1] Snack foods are looking to expand in new markets by offering more varieties in flavor as well, but there are still a lot of roadblocks to reaching consumers in the ethnic foods market. Many consumers report having dietary restrictions, with my survey reporting 61% of responders having dietary restrictions and 20% of Americans reporting a dietary restriction. [4][5]
10
61% of people will try unfamiliar foods if it’s recommended to them by a trusted source
1 in 5
Adults in the United States have a dietary restriction or food allergy
Retail sales of Ethnic Foods have grown by $1.2 billion between 2013 and 2018
Because products may not always be in English, it can be a struggle to quickly determine whether or not a food item is safe to consume, or even if the product is something they want.[6] Even if growing trends suggest that ethnic foods are becoming more and more popular, an application focused on them will have to account for these factors in order for it to find customers that would be willing to use it. As it stands, there are many snacks that people would be willing to try so long as a friend recommended it to them according to my surveys, even if they were uneasy about trying ethnic foods for a variety of reasons.[4] As for the competition this application is up against, it is very important to note that there aren’t a lot of direct competitors. However, that doesn’t mean that there isn’t a lot to learn from its analogues and indirect competitors, which will be explained more in detail below.
11
Competitive Landscape Taquitos - (Direct Competitor)
Taquitos is notable in being one of two websites that I could find that was designed to review snacks from around the world. Even though it fills the niche I am trying to create an application for, the engagement for this site is incredibly low, as it averages two page views a day.[7] The website is very dated from a UI/UX standpoint, with only half the screen being used on the desktop site, as well as an excessive amount of text on the pages, with no room for organization. Because of the dated look, it’s not only hard to access information on the site, it’s difficult to know whether the information is current or even trustworthy. It’s also not clear who or what is responsible for the reviews, making the reviews as trustworthy as review blogs are.[8]
12
Bokksu - (Indirect Competitor)
Bokksu is a subscription service in which customers receive a crate of hand-picked snacks every month, curated by the company. On first impression, the site is beautifully designed and very inviting. The design is minimal and takes inspiration from Japan while being its own entity. The manner in which subscription boxes are a competitor to the snack application is in its goal of getting users to try Japanese snacks. There are some constraints in the medium, however. Users do not get to choose what snacks they receive, which is both a positive and a negative, though the application will be more about giving users freedom to choose what they want. The other limitation that Bokksu has is their selection. While admirable in its partnership with artisan Japanese confectioners, those are not products that the average user can be expected to get their hands on, making those snacks a hard sell to my audience. My application will try to be more
13
accessible to users by cataloguing snacks that can be purchased at ethnic markets or even their local grocer.[9]
Rate Your Music
Rate Your Music (RYM) is a very conceptually similar site where users curate, rate, and recommend each other music from all around the world. While the draw of the site makes a strong case for users to stick around and continue using it, the application itself is very poorly disorganized and has not been updated for a long time. Finding any music that isn’t randomly highlighted on the home page or known to you previously is an immense challenge, which makes what should be an important aspect of the site very unappealing to use. The user interface is not friendly towards new users, and it’s often a complete challenge to do something as simple as recommending an album for your friends. That said, the ability to catalogue your own reviews in an organized manner is a huge boon for those who like to listen to and rate albums, which is what
14
keeps users returning to the site even if the user experience and interface are infamously subpar. There was an intended update called Soniqs, which was supposed to fix the UX/UI from the ground up, but most users stick to the original site as Soniqs has not been updated. [10] Even after an overhaul in November, the RYM experience still needs more fine tuning to reach more users.
Conclusions With the investigations into consumer trends, there are two strengths and weaknesses to keep in mind when creating the product, gathered through analyzing the competitive landscape of the snack application
Strengths Allow users to easily generate content for you. One of Rate Your Music’s best features is the community and its vigilance in cataloguing music. The creators do not have to make all the listings and significant development time could be spent improving other aspects of the application. Make identifying snacks as easy as possible. One important barrier to cross for snacks from other places is to make sure that the information
15
is accessible in English so that users can make informed decisions about the snacks they’d like to purchase without risking dissatisfaction or a health emergency if their diet doesn’t allow for certain food items.
Weaknesses Keep the Halo Effect in mind when designing your product. The trustworthiness, perceived quality, and engagement of an application are correlated with the quality of the application’s design. This goes both ways, so making sure the application is visually appealing to its users is a high priority. Don’t make users fight the interface. Many successful applications that are analogous to the snack application fail to make the overall experience enjoyable because any additional features beyond the very core functions of the application are painful to execute as a user. Usability can coexist with aesthetics so long as the design of the application is user focused.
16
Process The following applications were used in the completion of this project: − After Effects
− Acrobat DC
− Illustrator
− Apps.Diagram
− Premiere Pro − Indesign
− Figma
− Notion
17
User Flows Originally, the project comprised of a development team where I was going to design the application’s front end in React Native, a JavaScript Framework. This team disbanded due to scheduling issues with my project partner, and I changed the application to be a concept and not a fully working product. This is the final version, that was revised with the prototype in mind. The Flowchart was created in Apps.Diagrams, then stylized in Adobe Illustrator to fit the branding once that was finalized.
18
Low Fidelity Wireframes Because of the difference in project scope from the conception of the project to the final form, the sketched screens for the wireframe were wildly different from the final product. The inital development steps involved making only a few screens at a time, making them in Figma, then making the actual screens work in React. Because of this, there are not very many detailed sketches in the initial phases of the application’s design.
Inital sketeches were small as to communicate some basic ideas of the overall screens
19
Sketches of the main menu and login pages, very different from the final screens.
Early versions of the search and profile pages, the search page would eventually merge with the menu.
20
Medium Fidelity Wireframes This was the phase of the project where the most time was spent. Having partially begun this in the summer with different project objectives in mind, the project had to be revised from this point onward to be a solo project. Though having some initial screens done in advance through Figma might seem to make the work easier, it provided additional challenge in having to make constant revisions to the application and decide on how to make the design more user friendly as opposed to being easier to code. The user flow was revised to include more screens, and these needed to be accounted for as well. I had initially devised 10 screens, though the total would expand to 19 before usability testing was done. At this point, no branding was devised, as I wanted to focus as much as possible on the layout of the user elements. I felt it was more efficient to guarantee the usability of the project before dedicating development time fully into the branding of the application. As such, there is minimal styling of the screens, only Europa font as a holdover from the initial wireframes.
21
The original screens were not as detailed, and lacked the compatibility feature that is a mainstay of the final product.
The final version of the wireframes introduces the compatibilty functions that are now a core of the app, as well as more screens and onboarding.
22
Screen Comparison (Old vs New)
From the old to the new, the screens had to be revised to ensure that dietary restriction information was easily visible for users who depend on this data. As well as that, the screens had to account for the features of the application that were not present in the original iteration, such as a notification system. Error handling was also revised so that a user could navigate to any part of the application from almost any screen. The differences can be seen below, from the old to the new screens, in that order.
23
Usability Testing After finishing the medium fidelity wireframes, I drafted the interview questions and testing for the application through Notion, a journaling and note taking application. Notion was incredibly helpful in organizing the questions and the responses from the users. Users were tasked with navigating through basic application functions with minimal directions given, with only the basic function of the application given to each user before starting. Due to the COVID-19 pandemic, the testing had to be altered significantly from its ideal state. Ideally, I would have been able to work in a one-on-one environment with the user and have them test the application through Figma Mirror. Figma Mirror is the application version of figma that allows for remote use of wireframes, which was used extensively throughout the project for visualizing screens in a more native environment. Since users were not able to meet up with me for these interviews, I had to create meeting in applications such as Discord or Zoom, and have users screen share the use of the prototype. This meant that I was unable to focus on their facial expression or notice the nuances of their use of the screen.
24
Thankfully, Figma allows you to see the cursor in the prototype, so I was able to notice if users struggled to pinpoint any parts of the user tasks. The tasks given were: − Onboarding, with allergy preferences
− Discovering a new type of snacks (drinks) − Search for a specific snack using the
search feature − A friend sent you a snack recommendation − Share a snack suggestion with someone else − Search for a friend − Add a friend − Additional thoughts branding With all of these tasks, I was able to get 4 users and their feedback on the application’s usability. One of the most helpful instances of feedback came from a user with dietary restrictions, who struggled with the interface of the application and found the originial screens to be lacking for accesibility from
25
the perspective of someone who couldn’t try all the snacks on offer. With their feedback, I was able to devise some solutions that better accounted for a more inclusive user experience in the revisions. With the screens optimized for usability, I was able to then move on towards branding the project.
Branding With the foundation of the application done, branding had to be completed in order to finalize the screens and finish the prototyping. For the purposes of a global theme, I wanted the brand to be represented by a food item that had international recognition, and could be identified as a snack even if the exact food item was not familiar to the user. With that in mind, the choice for the logo was castella, a Japanese dessert bread that is based off of the Portuguese pao de quiejo. The logo was not only multicultural but a personal choice that felt close to home with my family being close in proximity to where it is most famously made in Japan. Other users who could not identify the snack were able to recognize it as bread or cheese, which was close enough to the original
26
dessert. The colors all followed the same scheme, though they also were tested repeatedly to ensure that the theme could maintain AAA color contrast for web compliance using the Figma plugin A11y. The other colors were used to communicate the safety levels of the food items that users would come across.
UI Kit The UI Kit was rather simplistic in nature as the application was very text based and not so dependent on icons to communicate the app components. With that said, icons were sized according to Apple’s Human Interface Design specifications, with 44px buttons throughout, as well as a 16px body text. Special focus on the components was made to ensure the safety of food items from a quick glance.
27
High Fidelity Wireframes With the UI Kit and Branding finished, all that was left to do with the wireframes before the prototyping was to apply these styles and complete the visuals for the application. To access a full view of these screens and prototype, use the QR code to access the full figma document.
28
Overview of High Fidelity Wireframes
Home page and snack results screens
29
Prototype
The prototype was completed using Figma’s smart prototyping tools. Initially, I had proposed a more advanced prototype created in Origami Studio. However, due to Origami Studio being in beta, and the Figma to Origami plugin not working, I was unable to move my application into Origami. Considering my alternatives, moving my prototype into After Effects but had a similar result. Because of this failure, I decided to flesh out the animation as best as possible in Figma. Since I still wanted to demonstrate prototyping skills, I decided to animate my slides in After Effects and use the last of my project time in order to make my showcase presentation as nice as possible. Because a lot of slide animations follow the same principles as animations in applications, it fit well with the project scope and was a good learning experience. 30
Reflections This project was an overall success, with my UX/UI skillsets tested over the past 10 weeks. I found that I learned more about adaptability and working with new, unfamiliar programs than I did about specific UI/UX skills (though I did feel that the practice was valuable). Learning to roll with the setbacks, delays, and unfamiliarity of new software such as After Effects was a great lesson in learning on the job. The largest struggle in this project was dealing with scope and feature creep over time, as I constantly found myself frustrated at how many features needed to be added or changed to better fit the vision of the project. This led to a struggle in time management as I kept adding more things and using more programs to finish the project. The medium fidelity wireframes took two weeks longer than initially estimated as a result of this feature creep. One of the biggest lessons I learned from all of this was in the developer’s mantra of “underpromise, overdeliver”. I overpromised, and I underdelivered by suggesting that I could complete the prototypes in a program I didn’t know the viability of. I know in the future not to do that, though I am happy to report that I was able to overcome that issue.
31
Sources U.S. retail sales of ethnic foods, 2013-2018. (2014, January 01). Retrieved October 09, 2020, from https:// www.statista.com/statistics/324422/us-retail-sales-ofethnic-foods/ Dunford, E., & Popkin, B. (2017, July 27). Disparities in Snacking Trends in US Adults over a 35 Year Period from 1977 to 2012. Retrieved October 09, 2020, from https:// www.ncbi.nlm.nih.gov/pmc/articles/PMC5579603/ Kim, W. (2020, May 26). What The Asian Snacks Boom Says About Asian Americans. Retrieved October 06, 2020, from https://www.refinery29.com/enus/2020/05/9747283/asian-snacks-trend Food Allergies & Intolerances in the United States 2019. (2020, February 05). Retrieved October 09, 2020, from https://www.statista.com/forecasts/1093511/foodallergies-and-or-food-intolerances-in-the-us Blanding, R. (2020, October 02). [GRC 462 Senior Project] Snack Survey. Retrieved October 09, 2020, from https://forms.office.com/Pages/ ResponsePage.aspx?id=2wING578lUSVNx03nMoq5xME1B1j6dKoZRMGZO8A_ xUN0UyTzBWUk9KUU81OE9VTjhaWTc4RTVEQy4u Selwyn, J. (2000). Taquitos.net - Snack Food Reviews. Retrieved October 08, 2020, from https://www.taquitos. net/
32
Taquitos.net Competitive Analysis, Marketing Mix and Traffic - Alexa. (n.d.). Retrieved October 08, 2020, from https://www.alexa.com/siteinfo/taquitos.net#card_ overlap Nielsen, J., & Cardello, J. (2013, November 09). Halo Effect: Definition and Impact on Web User Experience. Retrieved October 09, 2020, from https://www.nngroup. com/articles/halo-effect/ Authentic Japanese Snack & Candy Subscription Box. (n.d.). Retrieved October 09, 2020, from https://www. bokksu.com/ Amsbury, J. (2018, December 03). RateYourMusic Case Study: An Examination of RYM’s UX Flaws. Retrieved October 09, 2020, from https://medium.com/@ justicedsn/rateyourmusic-case-study-an-examination-ofryms-ux-flaws-dca7f724462b
