A small, authentic handmade tofu shop nestled between tapas bars in the heart of Barcelona. Once a curious site, today Tofu Catalan is a beloved neighborhood institution frequented by Japanese and local residents alike. About 300 packs of tofu are produced, packaged, and sold daily, a careful and specialized process that starts at 4am every day. 

In early 2021, the original owners sold the business to an award-winning tofu maker from the Sendai region of Japan, Jun Sasahara. On the one hand the Sasaharas were excited about their new chapter in Spain; on the other, they knew that the quick timeline for transition and their lack of familiarity with the local language and culture presented a unique set of hardships ahead.

The challenge

Since 2010, Tofu Catalan’s customer base has shifted from mainly Japanese expats to a blend of local residents and the international expat community. Their online presence is currently limited to Facebook and Instagram; their website, available only in Japanese, has not been updated in over 6 months. Having a responsive website would help Tofu Catalan improve current customers’ experience and grow their business by attracting new customers. 

Project goals

• Create a responsive website for Tofu Catalan

• Consider user and business goals

• Expand and solidify current branding

• Create a unique feature that improves customers’ experience

My role

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

Timeline

4 weeks (80 hours)

In a country where authoritarianism prevailed until late 20th century, how did a tiny tofu shop manage to become a treasured institution? With research, I set out to understand the niche tofu market and the people who consume it. 

Research Plan

To launch the research phase, a research plan was drafted to define objectives and methods. Assumptions were also explicitly declared in order to validate or invalidate them, especially ones that present the highest risk. By setting expectations before research, I am able to align with stakeholders on what we will aim to uncover and how we will use this material to shape subsequent phases. 

Project goals:

• Understand dietary and food consumption trends in the last decade

• Learn about Tofu Catalan’s main competitors and their strengths and weaknesses

• Identify Tofu Catalan’s target audience

• Understand customers’ current needs, goals, frustrations, and motivations

Assumptions: 

• Tofu Catalan’s main source of marketing is through word of mouth

• The story behind Tofu Catalan is not well known 

• People would shop more at Tofu Catalan if hours, supply, and other shop information were readily accessible.

• People enjoy the in-store experience but wish it were more convenient.

Market research

Market research focused on gaining a high-level understanding of market trends so I could start discovering and understanding Tofu Catalan potential customers. By examining dietary and demographic trends both globally and specifically in Spain, I became aware of how these two factors impacted consumer behavior. 

The popularity of plant-based diets, combined with an increase in immigration -- notably from Asian countries -- helps Tofu Catalan and their products become more mainstream.

Competitive analysis 

Tofu Catalan’s core product, tofu, is offered by other shops as well -- no doubt that businesses around the world have capitalized on the popularity of plant-based diet and health-conscious movement.

To spot opportunities in the market that favors Tofu Catalan, I analyzed two direct and two indirect competitors. Assessing their strengths and weaknesses reveals what customers come to expect from businesses and helps refine strategy. Through this exercise, it became evident that Tofu Catalan had a competitive advantage with its artisanal product and in-store experience. 

Provisional personas

Using findings from market research, I constructed three provisional personas to benchmark the design process. 

Our first provisional persona, the Japanese expat, represents Tofu Catalan’s original (and existing) customer base. The Socially-Responsible Flexitarian embodies the growing segment of health-conscious customers who aim to increase their intake of plant-based foods; finally, our Health-Conscious Food Lover exemplifies customers who, inspired by shifting demographics around him, want to learn more about new cultures. 

It’s important to note that at this stage, the three provisional personas are what we believe our customers are like based on secondary research. I used these personas to recruit people for primary research; user interviews may confirm or reject our provisional personas’ characteristics. 

Primary research

Having gained a broad understanding of the current market landscape, I moved on to understanding people, their behaviors, emotions, and what drives them, at a deeper level through user interviews. 

 An interview guide was first drafted to standardize the interviews with carefully selected open-ended questions. By giving participants control of the conversation, I aim to avoid biased answers and allow participants to answer questions in their own words. 

User Interviews

With the interview guide in hand, I conducted one-on-one remote interviews with Tofu Catalan customers who match the characteristics of one of our provisional personas. 

• Number of participants: 7

• Gender: 4 males, 3 females

• Location: Barcelona, Spain

• Age group: Between 25~43

• Duration: Average 20 minutes

• Method: Video call

• Criteria: Has shopped at Tofu Catalan before 

All participants adored Tofu Catalan, their products, and the owners; however, digging deeper into conversations revealed that their experience was far from perfect. 

Empathy map

In order to identify patterns from the seven interviews, I synthesized the user interviews using an empathy map. Every quote was written on a sticky note and grouped into clusters with one pattern per cluster. Analyzing the interview in this manner helps make sense of the raw data and further builds empathy with Tofu Catalan’s customers. Patterns that produced the most valuable insights were transformed into user needs: 

Persona

The final product of the research phase is a user persona, who represents key characteristics and behaviors of the target audience and help answer the key question: “For whom are we designing?” It also shapes the product design process by refining focus on how and what to design and helps ensure that the team stays user-centered. 

Tofu Catalan’s persona, Maria Luisa, is a 33-year old social worker living in the center of Barcelona. Being from Barcelona, she feels especially connected to the local commerce and thus mostly shops at small businesses. Maria Luisa is a curious person keen on learning about new cultures, but her lack of ties to the Japanese community and culture makes her pause before purchasing a novel item at Tofu Catalan. 

Assumptions revisited 

Before moving to the next step in the design process, I revisited previously defined assumptions to analyze whether they were validated or invalidated by research: 

• Tofu Catalan’s main source of marketing is word of mouth.
  Partially validated: 3/7 found out about through personal network

• The story behind Tofu Catalan is not well known.
  Validated: 0/7 mentioned owners’ background

• People would shop more at Tofu Catalan if hours, supply, and other shop information were readily accessible.
  Validated: 5/7 cited frustration with lack of information

• People enjoy the in-store experience but wish it were more convenient.
  Validated: 6/7 value good service but 5/7 are frustrated with lack of information 

Assumptions are gaps in knowledge; by reviewing my assumptions at the end of my research, I am able to bridge this gap and move on to defining the problem.

At this point, I knew for whom I was designing. However, understanding needs does not directly translate into knowing what to design.

Using the formula “USER + NEED because INSIGHT”, research findings were transformed into actionable problem statements or Point of View (POV) statements. Once problems were defined, each POV statement was rephrased into How-Might-We (HMW) statements to prepare for ideation sessions.

Using the HMW statements, two rounds of three-minute brainstorming sessions were conducted using the mind map technique. Mind mapping helps me note down potential solutions, which spurs related ideas to branch out.

Every business dreams of fulfilling their customers' wants and needs. Resources, however, are finite and one must be intentional about where to allocate time and budget to deliver the most impact on business and customers. This is especially important for a small business like Tofu Catalan who operates with minimum staff and limited budget. 

Project goals

To start strategizing, I combined user goals, business goals, and technical constraints in a Venn diagram which resulted in the following overlapping goals: responsive site, accessibility, resources, and online content. By focusing on these four points, Tofu Catalan is able to implement user-friendly solutions that help their business grow. 

Product roadmap

Prioritizing is a fundamental step in deciding the where, when, and why of allocating resources. Using the two parameters time and impact, the solutions generated from our ideation session were prioritized into P1 (must have), P2 (nice to have), P3 (surprising and delightful), and P4 (can come later).

Site map

Similar to preparing a floor plan and blueprint for a house, a sitemap helps to define the overall structure of the site. Organizing pages and features in a hierarchical manner also helps me to start visualizing how a user may navigate through the site. 

If my user persona, Maria Luisa, wants to find out about store updates, would she be willing to dive deep into the site structure to gain this information? Seeing that she is a busy individual, it is very unlikely; as such, I chose flat site navigation that doesn’t nest too many features and subpages within each page.

UI Requirements

To ensure that there is alignment among stakeholders in the purpose, features, and criteria of what to design, product UI requirements were outlined based on three key task flows. Each element and feature were listed out and described so it could serve as a reference for designers and engineers; this step helps to avoid incorrect or differing assumptions among teammates. 

Task flow

To visualize how our users would complete each task, task flows were created to show what actions users would take and what pages they’d need to reach their goal. Below is a task flow of how our persona Maria Luisa completes the task: find a new product offered by Tofu Catalan. After a few drafts, I was able to design a flow that kept the pages and actions required to complete the task to a minimum. A busy person, Maria Luisa would surely appreciate being able to locate a new item with just 3 actions. 

User flow

Task flows were expanded into user flows by adding decision trees and addressing different entry points depending on unique scenarios. User flows help me to empathize with Maria Luisa and the decisions that she can or must make while she navigates the site with a specific goal in mind. 

Low-fidelity wireframe sketches

To start visualizing what our product would look like, hand-drawn sketches were drafted to show the layout and hierarchy of key pages. On the product page, in particular, care was taken to direct the eye to the images. I knew from research that while people like going to the store to see the inventory, the size of the store prevented them from taking their time browsing. Tofu Catalan’s new website could help people explore new products and pique curiosity from the leisure of their home and without feeling rushed. 

Responsive mid-fidelity wireframes

The best ideas from the low-fidelity wireframes were digitized into mid-fidelity wireframes using the bootstrap grid system. By creating modular, repeatable designs, the aim is to deliver a consistent experience to users regardless of the device used. 

Prototype

To prepare for usability testing, connections and interactions were added to the mid-fidelity prototype so users can complete each task. A mid-fidelity prototype was used for testing; it contains enough interactive elements to gather valuable feedback and keeps focus on the structure and design, rather than visual assets like photos and logo. 

Usability testing plan

Before starting the tests, objectives, method, and script were documented in a usability testing plan to guide the process and ensure that tests produce actionable results. The think-aloud method was chosen for its ability to reveal what users find difficult about my design and more importantly, why. 

Test Objectives

• Observe how users complete specified tasks

• Understand if the current design allows users to accomplish specified tasks

• Uncover any issues with the usability of the desktop prototype

• Discover any pain points users may have while completing tasks

Tasks:

1. Find out the name of the owner of Tofu Catalan. 

2. Find a new product offered by Tofu Catalan.

3. Order 3 packs of natto kotsubu for pick up on September 4th, 2021.

Assumptions

• Expected completion rate: 100%. All participants should be able to complete the tasks due to age groups’ familiarity with online order forms.

• Expected error-free rate: 90% error-free rate with 1% deducted from each error from participants. 

Usability test

A total of five moderated usability tests were conducted with participants recruited from Tofu Catalan’s social media following. Testing revealed that the tasks I had prepared were not as intuitive as initially imagined; the completion rate was 93% as opposed to the expected 100%, with a few people not being able to locate a new item. 

• Participants: 5

• Recruited through social media

• Ages 24~35

• Have shopped at Tofu Catalan in the past

• Completion rate: 93%

• Error-free rate: 95%

Affinity mapping

After transcribing each test, individual quotes and key observations of actions were written on sticky notes with one color per participant.

Sticky notes were clustered by patterns and patterns that produced insights related to users’ pain points and frustrations were converted into design recommendations. 

In addition to helping me synthesize large amounts of data in a sequential manner, affinity mapping encourages me to be objective about test results. Because this process requires me to note down direct quotes and observations rather than summaries, the resulting clusters are a sneak peek into how people would react to the site if I had launched it without testing. Thus, testing at this stage helps me iterate on my designs objectively and with data-driven recommendations. 

Priority revisions

The five recommendations extracted from the affinity map was plotted against effort required to implement and its impact on users. The three design recommendations with highest priority were implemented into version two of the mid-fidelity prototype. 

07 - UI Design

Mood board

Tofu Catalan’s existing branding elements were limited to their storefront sign which they used as their logo. To create a more clear and consistent direction to deliver a consistent user experience, I first defined key brand attributes and created a Pinterest mood board to collect visual assets for logos, typography, and color.  

Brand attributes: 

• Humble: Tofu Catalan does not aim to achieve global scalability; rather, they want to remain a smal, local business. 

• Familiar: Customers often cited the owner’s familiar and friendly treatment as a key factor in returning.

• High-quality: Handmade, artisanal products are crafted with care and with the high-quality ingredients. We want the brand to reflect this attention to detail. 

• Authentic: Small, local tofu shops are typical in Japan; the owners aim to recreate this authentic experience in central Barcelona. 

• Simple: Though it requires dedicated machinery and specialized skill, tofu’s core ingredients are simple. The branding should represent this simplicity. 

Using the existing logo as a starting point, logo designs were sketched out and the best ideas were digitized. I used different brush stroke fonts for their logo mark and the final design was chosen for its scalability and faithfulness to brand attributes. In addition to the logo, Tofu Catalan’s typography and colors were defined as well in a style tile that will serve as a central document for their branding elements. 

Reusable UI elements such as buttons and form fields are housed in our UI kit. This helps optimize the design workflow and ensures consistent design across teams. A living document, our UI kit will be updated with further iterations. 

Final prototype

Combining our branding elements and UI kit with our mid-fidelity wireframe, a high-fidelity prototype was created. This is the closest possible representation of the final product before moving forward with implementation. 

08 - Final thoughts

With the completion of the final prototype, the design is ready for a handoff to the developer. 

What I would do differently 

Working with a small business had constraints that I had not foreseen. The biggest hurdle was lack of high-quality images: Tofu Catalan has never held a professional photoshoot and their photos are largely limited to those taken on mobile. As such, the images that we used for the website are not 100% consistent in color, angle, and size. In future iterations, it would be valuable to replace current photos with those taken specifically of Tofu Catalan’s products and for the purpose of the website (and other marketing purposes). 

Another constraint in our design process was the lack of teammates, a roadblock that became especially evident during the brainstorming step. While the aim was to produce as many solutions as possible, ultimately one’s creativity is limited by the time available for ideation and what one has personally seen or experienced. If I were to re-do this project, I hope to put together a team if only for brainstorming to expand our solution space. 

See more projects