Boriqua Kitchen

Responsive web design for a local food truck business

Project Overview

My Role: UX/UI Researcher & Designer

Duration: 8 Weeks

Tools: Figma, Google forms, Zoom, Framer

Client: Chef Anthony Lamboy (Boriqua Kitchen)

Background

Anthony Lamboy is the chef and owner of “Boriqua Kitchen”, a Puerto Rican food truck based in The SF Bay Area that offers a variety of different dishes. As the only Puerto Rican food truck in the Bay Area, the truck has gained popularity since it started in 2017. However, they need help with their website to further grow and expand the business.

The User

People who like to eat at food trucks and are open to exploring various cuisines.

User Problem

Customers have difficultly finding information about the food truck such as schedule, menu, and prices, especially considering the fact that many clients of food trucks use their mobile device while on the go.

Business Problem

Since Anthony operates his food truck business alone, he faces the challenge of finding the time to update his website and expand the scope of his operations. Therefore, it is essential to complete a redesign of his website, aiming to increase traffic and enhance the online experience for customers.

The Solution

Create a user-friendly, responsive website with an emphasis on navigation, information accessibility, and overall cohesive design that enhances clients' online experience.

Discover

The Research objective

  • Develop an understanding of the needs and behaviors of the target audience for the food truck’s and what information they want to see and have access to on the website.

  • This will help inform the redesign of the website to better meet the needs of customers and the chef, improve the online experience, and ultimately increase engagement and conversion rates. 

  • Additionally, I want to learn and understand what Anthony’s requirements and needs are as the food truck owner in order to develop a website that will be most optimal for helping him expand and grow his business.

Competitive Analysis

What do other food truck websites look like, how do they function, and what do they offer?

Competitive Analysis Takeaways

Navigation/Information: Navigation can be a little confusing and difficult to use, lacking efficient layouts, and not the most user-friendly.

Menu: Lacking some details on menus. Long scrolling to see the full menu. Some things are not up-to-date or are not working at all.

Responsive Design: Some are not optimized for mobile devices, making it difficult to navigate on a smartphone.

Understanding The Market

  • Food trucks in the Bay Area are more likely to use social media to promote their businesses than traditional advertising methods. In fact, 87% of food trucks in the Bay Area use social media to market themselves, according to a study by the University of San Francisco.

  • SF Bay Area has the highest concentration of food trucks per capita of any metropolitan area in the United States, with over 200 operating within the city limits.

  • Food trucks are popular among urban residents and office workers in the Bay Area. Many food trucks are located near offices, business parks, and other areas with high foot traffic.

  • Millennials and Gen Z are the primary customers of food trucks in the Bay Area. According to a report by the Bay Area Economic Institute, millennials make up 39% of the Bay Area population and are a key target demographic for food trucks.

Surveys

For the surveys, I wanted to learn more about the demographics of customers and people going to food trucks, what they think, their opinions, and what information they want or need online.

Details

  • Google forms

  • 32 participants

  • Personal network as well as Boriqua Kitchen loyal customers

  • Age range: 20 - 60+

  • Split in 2 parts; 1st half for general questions relating to food trucks and the 2nd half for questions focused directly on Boriqua Kitchen

Affinity Map

Results and insights

Who is the primary customer?

  • 18-30 yr old Millennials who primarily use smartphone & card

  • They value & trust word of mouth for food trucks

  • Support local business

  • Value the unique experience, food fusions, and variety of new cuisines

  • Clients who are interested in booking for catering

Wants and Needs

  • Menu: Prices, Pictures, Nutrition info

  • Updated Availability: Locations and Hours

  • Online ordering: Door dash and call-in (Nice to have but not necessary)

Pain Points

  • Difficulty finding the truck’s schedule and locations

  • Often times, there is no price or description of meals

  • Websites are confusing, not user-friendly, and not up-to-date.

Research Takeaways

Food trucks are very much an in-person, spontaneous, and spur-of-the-moment experience that is most frequently discovered via word of mouth. These are some prime examples of how they differ from traditional sit-down restaurants.

Most people prefer to order in person when eating from a food truck, as this interaction is part of the whole experience. While many consumers still appreciate having options just in case, online ordering and delivery are not imperative, at least according to the participants in my survey. It is just nice to have if needed, for example, if you want to avoid wait times.

As we can see from the survey and other secondary research, the customer base of food trucks is primarily young millennials and professionals. There could be many reasons why this is the case, but I believe it is based on the affordability, convenience, and diverse food options food trucks provide.

Define

User Persona

I created user personas that I thought would best represent the target user, highlighting their motivations, needs, and pain points.

Putting together a user persona seems to always be helpful for referring back to when making decisions throughout the development stage.

How Might We help the customer?

  • How might we help customers easily access and stay up-to-date on the food truck schedule and location every week? 

  • How might we create an efficient application and hiring process for potential employees to work on the truck?

  • How might we create a quick and efficient system to help facilitate communication between the chef and clients for catering and events? 

The Solution

Based on the research data, “How might we” statements, and Anthony’s requirements, I identified some areas of importance to focus on in the development stage.

1. Improved Navigation and Information Accessibility: Schedule + Location

2. Up-to-Date and Comprehensive Content: Menu

3. Client Requirements/Areas of focus: Catering & Hiring Flows

Create a user-friendly, responsive website with an emphasis on navigation, information accessibility, and overall cohesive design that enhances his clients' online experience.

Idea Prioritization

From the HMW statements, I generated some fundamental ideas that I prioritized for what needs to be added to the site.

Develop

Sitemap

I was able to focus a lot of my attention on areas like the menu, schedule, catering, and hiring because the sitemap wasn't too complicated or overly busy.

I initially started with online ordering in mind, but soon after dropped it from the project because Anthony did not know when or if he would want to do that. This is something I would revisit with Anthony in the future if he wants to integrate it into the site.

Task Flows

Following the site architecture, I laid out a few simple task flows. 1 consisting of a user filling out a catering form and the 2nd just navigating the site, specifically the menu. I wanted to focus my attention and time on the information users and possible clients need and want the most.

Low-fidelity Sketches

I sketched out mobile and desktop ideas centered around the research data from the affinity map. While sketching out initial ideas for pages, I was focused on key screens such as Home, Menu, Catering Form, and a merchandise page.

Mid-fidelity Wireframes

As I was bringing over the ideas into Figma for Mid Fidelity wire-framing I wanted to of-course focus exclusively on the layout, hierarchy, and structure of each page before thinking about color or UI embellishments.

Branding and UI Kit

While creating the UI Kit and color scheme I wanted to follow along with the original logo colors which are representative of the Puerto Rican flag. Out of the 3 colors I went ahead and chose Red because I wanted to bring out feelings of passion, energy, and excitement in addition to grabbing viewers attention quickly.

High-fidelity Wireframes

After completing the UI kit, I began adding images, color, and some playful embellishments to give the website more personality and character that would represent Puerto Rico as a whole, and more specifically its capital, “Old San Juan.” This is a great way to showcase the brand's cultural pride and add a sense of identity, while also making the website more dynamic and interesting.

Deliver

  • I conducted a usability test with 5 participants who were assigned 3 tasks that included navigating the site, filling out a form, and finding certain components.

  • Overall, users had a good experience going through the website and were able to complete each task

Usability test

  • Following the tests, no significant changes were required, but rather just some fine tuning and rearranging a few elements.

  • The feedback I received was primarily focused around the navigation, which seems to be most important area when users come to a food truck website. They desire something that is user friendly, with quick and easy accessibility to what they are looking for.

Results & Prioritization

Iterations/Revisions

Summary

After testing, only a few minor adjustments and the reorganization of some components were needed. No major changes were necessary.

The feedback I received was primarily focused around the navigation, which seems to be the most important area when users come to a food truck website. Customers desire something that is user-friendly, with quick and easy access to what they are looking for.

Prototype

Next Steps

Future Direction

Testing ideas and features

Following the website launch, I think it would be great to conduct further additional testing on specific features Anthony wants added to the website. This includes the process for online ordering and also implementing a call-to-action button for discounts.

Catering and Careers

Given that catering and private event opportunities generate the highest revenue for Anthony's food truck, the next priority would be optimizing the catering form and exploring additional methods to enhance the efficiency of catering and event processes for him. An example of this would be creating a system to better facilitate communication between Anthony and his clients so he does not have to go back and forth over email with endless questions from said potential client.

Reflection

Learnings

This project provided an opportunity to engage directly with a live client, offering experience to grow my communication skills. I thought it was important to learn how to work in alignment with the client’s expectations, while still navigating and discussing changes and maintaining the project's overall goals. Additionally, I was considering the perspectives of the users to ensure it met their needs and solved any pain points.

Websites for restaurants and food trucks are sometimes not user-friendly, out of date, and non-responsive, which can cause visitors to become very upset while trying to browse them for important information. Because of this, it was a priority for me to make sure everything was as clear as possible without being overbearing. An example of this is implementing clear and concise labels throughout the site, making it user-friendly and accessible.