Globalization shows no signs of stopping and international influence has reverberated at every level, from governments to businesses to individuals. 

With increased mobility comes a sense of longing for home. How does one fill this gap? Personally, the best medicine for homesickness has been food from my home. Tasting flavors from my childhood brings a sense of comfort and belonging even if I am halfway across the world from my family.

The challenge

However, finding the right ingredients to recreate flavors from home requires time, effort, and oftentimes knowledge of local culture. For the newly arrived or for those with limited resources, looking for food items from home — especially items that are not conventional in their current location — is a problem that affects not only one’s appetite but also their psychological wellbeing. To address this, I posed this overarching question to start off my project: how might we make it easier for people to locate less common food items?

Project goals

• Understand user needs 

• Establish branding for the mobile application, Gather

• Develop an MVP of the mobile application

My role

UX Designer (research, visual design, branding, interaction design, usability testing)

Timeline

4 weeks (80 hours)

Research Plan

As an expat myself, I had many assumptions going into the research phase. Drafting a research plan helps me minimize bias by forcing me to declare my assumptions. Research can also feel as though it is never “finished”. By documenting and referencing a research plan at the beginning, during, and end of this phase, the finish line is clear and informs me when I can move on to the next step in the design process.

*for research, the following keywords were mainly used to follow industry standards: ethnic, foreign, and international food 

Market research

To get a quick onboarding of the overall state of the ethnic food market, I conducted secondary research starting with market research. My aim was to understand who was consuming these food items and how and why this has changed in the past decade.

For the MVP of the app, the geographic focus was narrowed to Europe. 

Competitive analysis 

To analyze the strengths and weaknesses of competitors and identify gaps in the market, I examined companies that specialize in or supply international food items. 

Overall, competitors that focus solely on e-commerce (i.e. Amazon) compete primarily on price and convenience due to their lack of brick-and-mortar stores. However, this, in turn, became other competitors’ strengths: in-store shopping is still widely preferred in Europe for food items, especially for products that aren’t as familiar to the local population.

Provisional personas

Meet the Millennial, the Local European, and Recently Arrived Worker, each with a set of unique backgrounds, desires, and frustrations related to international food. These three personas are provisional representations of who I think Gather’s users will be based on market research. 

In addition to serving as a benchmark in the design process, defining personas at this stage helps me prepare for the next step: recruiting people for user interviews.

Primary research

People’s relationship to food is strongly tied to their identity, culture, and sense of belonging; it is only natural, then, that we want to talk about it. To respect a tight timeline and keep a clear focus, an interview guide was drafted to help keep interviews goal-oriented. With 10 open-ended questions, I aimed to understand and uncover people’s goals, frustrations, and emotions related to searching for international food in Europe. 

User Interviews

After a total of six interviews over video calls with people from Finland, Holland, Spain, and Germany, transcripts were created to document and prepare for synthesis and analysis. 

Empathy map

How do we make sense of over five pages of data collected from interviews? 

An empathy map allows for sequential and systematic analysis and helps me to visualize patterns in a sea of data. Patterns lead to key insights about Gather’s users, which in turn reveal core needs: 

User Persona

Once core needs were revealed through an empathy map, I personified my findings into a persona. Alice is an embodiment of key characteristics of our target audience -- in other words, there is a bit of Alice in all of us who seek uncommon food items. 

Alice moved from Hong Kong to Madrid with her family. She tries to recreate familiar tastes from her childhood, even though her job as a Financial Analyst occupies a lot of her time. Her young child has developed an allergy to lactose products which further motivates Alice to cook Cantonese dishes at home.

Having uncovered the core needs of the people for whom to design, the next steps will be to identify the problems for which we will solve. To transition from the research phase to defining our problem space, the following formula was used: User + [user need], because [insight]. 

Each problem statement, or Point-of-View (POV) statement, was then converted into a How-Might-We (HMW) statement to pave the way for ideating solutions. 

Using the mind-mapping method, two rounds of three-minute brainstorming sessions were conducted for each HMW statement. Visualizing new and related ideas helps me to understand how each idea is connected and to note down possible solutions as they come up. 

Project goals

While our users’ needs should be front and center of our process, considering commercial success, as well as the ease (or difficulty) of building the product, is essential for success. User goals, business needs, and technical constraints were collated to identify the "sweet spot of innovation” for Gather. Accuracy — specificity and correctness of information — is essential for users to accomplish their goals and for Gather to engage and retain users. From a technical point of view, building Gather for iOS will help narrow the technical focus and allow developers to tap into the device’s services such as location and push notification to provide accurate information. 

Product roadmap

Having understood our overarching goal, I revisited the solutions generated during brainstorming and prioritized them according to effort (time required to implement) and impact. Limited resources such as time and budget are allocated optimally and efficiently using this method. The most important feature, which must be included in the MVP of Gather, is the search function: this allows users to accomplish many of their goals and research provides high confidence of its impact. 

Site map

Just like a geographical map, a mobile site map allows me to quickly visualize the organization within Gather.

The home screen presented a challenge because it housed various features and screens. Since I could plan, amend, and reorganize the layout at this stage without critical implications, I could architect a structure that didn’t require people to dig deep to search for content.

UI Requirements

When working with a team, unspoken and undeclared assumptions may lead to serious misunderstandings. If teams aren’t aligned on what “store screen” is, how can they expect users to know what it entails? A UI requirement document aims to solve this potential issue by documenting the “what” of each screen and feature required to complete key user tasks. 

Task flow

Planning how people can accomplish their goals as effortlessly as possible before starting to build the product is key to providing a positive experience for Gather. To design an efficient experience for busy Alice to locate a niche product in her new home, the number of steps (actions) and screens necessary should be kept at a minimum. 

User flow

While task flows are sequential and uni-directional, it’s very unlikely that everyone will have the same journey when interacting with the mobile app. With Gather’s user flow, we identify decision points and possible deviations from task flows. 

When searching for Kewpie mayonnaise, will users always enter the brand name? Perhaps not, but I still need to ensure that they don’t encounter a dead end and can continue their journey in the app.

Low-fidelity wireframe sketches

Low-fidelity wireframe sketches were created to start visualizing how our mobile app would look in the hands of our users. After initial research into the Human Interaction Guideline, key screens were sketched out and annotated. Decisions around design patterns to use were preliminarily made at this stage; for instance, the search screen was designed as a sheet modal so Alice could explore search results in map and list view. 

mid-fidelity prototype

Low-fidelity wireframes were digitized and connections were added to simulate a real-life mobile application. 

For Gather, I decided to test using mid-fidelity prototypes. Apart from the overall versatility of mid-fidelity wireframes, the subject at hand -- food -- tends to elicit a highly emotional response from people. By purposefully omitting images, color, and other visual elements, I hoped to help users focus on the overall experience of the app. 

Usability test

After creating a usability testing plan where test objectives, scripts, and expectations were outlined, I recruited and interviewed six participants who reside in Spain and had looked for an international food item in the recent past. They were asked to complete a total of three tasks on the mid-fidelity prototype while thinking aloud.

Affinity mapping

To process and analyze the data gathered from usability tests, I followed a similar pattern to empathy mapping and clustered sticky notes according to patterns in an affinity map. 

Overall, all participants liked the core idea of the app -- to make it easier to find international food items -- but the purpose of the product became unclear especially after completing task three (find a recipe). This process led me to a high-level decision to eliminate the recipe feature for the MVP and develop the core solution first.

Priority revisions

My affinity map revealed five insights related to pain points and frustrations, which were then converted into concrete design recommendations. Four low effort, high impact revisions were implemented immediately. 

One high effort, high impact recommendation, which was to allow users to filter and order search results by price and distance from current location, will be added to the roadmap for future iterations. 

branding

Before starting the high-fidelity prototype, I created a mood board on Pinterest to begin defining the direction of Gather’s visual design. The following adjectives were selected as Gather’s brand attributes, as they are most representative of what Alice seeks and aims to accomplish when using the app: 

• Comforting: Alice seeks childhood flavors that comfort her

• Exploratory: people use food to explore new cultures

• Collaborative: locating niche products is a team effort

• Approachable: using Gather shouldn’t be intimidating

• Welcoming: the Gather community welcomes new food lovers

Branding elements were then concretely defined on Gather’s style tile. Orange was chosen as the brand color; a mix of passionate red and friendly and optimistic yellow, orange embodies Gather’s core use case, which is to find comfort and explore new territories through food. Bonus points: it also stirs your appetite!

Final prototype

Finally, designs were brought to life by applying branding to mid-fidelity wireframes. The high-fidelity prototype is the most accurate representation of the MVP of the app and after a final run-through of the interactions, the designs will be ready for handoff. 

07 - Final thoughts

The completion of the final prototype marks the end of this project. For next steps, I will meet with key stakeholders to discuss implementation. Specifically, this will include meeting with the developer to share the final version of the prototype and review key design patterns, how they should behave, and set expectations for timelines and QA. 

Learnings  

• Terminology: selecting the right words to use for the project was personally challenging. “Foreign and ethnic food” is conventionally used for studies and research papers; however, these words tend to create a sense of alienation and exclusion for people for whom these foods are native and imply a power difference.  Nor did “International” feel representative of the object of our users’ search. Ultimately, I used “international” and “foreign” food items. 

• Mobile prototype: one observation I feel is important to note down is that most participants had never interacted with a mobile app prototype on their laptop and thus were at times confused with what they were or were not able to do. Luckily, I became aware of this during the first usability test and for subsequent tests, I could distinguish this from errors participants made while interacting with the prototype.

See more projects