.png)
Driving Growth for Yai's Kitchen: A Redesign to Boost Sales Across Food Truck, Storefront, and Catering Services
Overview
Yai's Kitchen, a popular Thai food business that initially started as a food truck, recently expanded to include a storefront location. This expansion brought new opportunities and challenges, including the need to increase sales for both the food truck and the storefront while promoting their catering services to local businesses and schools. My role as the lead designer was to create an online experience that served the diverse needs of Yai’s Kitchen’s customers, from loyal food truck patrons to new storefront visitors, and to boost engagement with their catering offerings.
My Roles and Responsibilites
As the Lead Designer for the Yai’s Kitchen project, I was responsible for overseeing the entire design process, from initial research and strategy development to high-fidelity prototyping and final handoff. Key responsibilities included:
-
Research and User Insights: Conducting interviews and surveys to understand the needs of food truck customers, storefront visitors, and potential catering clients.
-
Strategy and Vision Co-Creation: Collaborating with Yai’s Kitchen’s founders and marketing team to set clear goals and a shared vision for the redesign.
-
User Journey Mapping and Persona Development: Creating personas and mapping out user scenarios for food truck loyalists, new storefront customers, and catering clients to inform design decisions.
-
Design Execution and Prototyping: Designing high-fidelity screens and interactive prototypes, incorporating Yai’s Kitchen’s brand identity, and testing with real users.
-
Cross-Functional Collaboration: Partnering with developers and marketing to ensure the feasibility and consistency of design, implementing feedback from weekly reviews to refine the final product.
Objective
The primary objective of this project was to create an engaging and cohesive online experience that supports Yai’s Kitchen’s business expansion across multiple channels. Specifically, the design aimed to:
-
Increase Sales and Engagement for Food Truck and Storefront: Make it easy for loyal customers to locate the food truck while attracting new visitors to the recently opened storefront.
-
Drive Growth in Catering Orders: Streamline the catering inquiry process to increase engagement from local businesses and schools, positioning Yai’s Kitchen as a reliable catering option for events.
By addressing these objectives, the redesign would not only support immediate sales growth but also build lasting customer relationships across Yai’s Kitchen’s expanding service offerings.
Strategy and Vision
At the outset of the project, I worked closely with Yai’s Kitchen’s marketing team and stakeholders to co-develop a clear vision and strategic goals. Our primary objective was to create a seamless, engaging experience that aligned with the brand’s values while increasing conversions and customer loyalty.
Vision and Goals:
-
Short-Term: Improve the navigation and product pages to make it easier for users to explore products and complete purchases.
-
Long-Term: Strengthen Yai’s Kitchen’s brand presence online, positioning it as a go-to destination for Thai food enthusiasts seeking high-quality, authentic products.
By collaborating with stakeholders on these objectives, I ensured alignment on the product’s strategic direction, allowing me to drive the design decisions with autonomy while meeting Yai’s Kitchen’s overarching business goals.
Customer-Centered Research and Insights
To build an effective, user-centered design, I conducted research that focused on the unique needs of Yai’s Kitchen’s various customer segments. This research included interviews with regular food truck customers, storefront visitors, and potential catering clients, along with an analysis of competitors in the local food industry.
Key Personas and Journey Scenarios:
-
Loyal Food Truck Customers: Many customers had been following the food truck since its early days and wanted a reliable way to check the schedule and locations for the week. They needed quick, easy access to a calendar or schedule on the website.
-
New Storefront Visitors: Newer customers discovered Yai’s Kitchen through social media or local recommendations and were interested in exploring the storefront’s offerings. They valued an inviting, informative online experience that showcased menu options and special promotions.
-
Local Businesses and Schools Seeking Catering: These clients wanted information on catering options, pricing, and availability, with a streamlined inquiry process. They needed assurance of quality, reliability, and flexible catering options for events.
Mapping out these journey scenarios informed the structure, navigation, and functionality of the redesigned website, ensuring that each customer type could easily find what they needed.
Customer Personas: To better understand Yai’s Kitchen’s varied customer base, I developed two primary personas representing key user groups: Stella Boham and Mark Townsend. Each persona was informed by research, including customer interviews and market analysis, and helped guide design decisions by highlighting the unique motivations, goals, and challenges of each segment.
Persona 1: Stella Boham
Design Implications: Stella represents Yai’s Kitchen’s loyal food truck customers and younger, budget-conscious visitors to the storefront. For her, I prioritized features that improve convenience and accessibility, such as a clear food truck schedule on the homepage and simplified online ordering for pick-up. Stella’s reliance on social media also highlighted the importance of strengthening Yai’s Kitchen’s online presence to attract and engage her demographic.
Persona 2: Mark Townsend
Design Implications: Mark represents Yai’s Kitchen’s potential catering clients from local businesses and schools, as well as premium visitors to the storefront. For him, I designed a dedicated catering page with an easy-to-use inquiry form, appealing visuals, and clear information on catering options. Mark’s preference for personalized service reinforced the need for flexible catering packages and a professional yet friendly online experience that builds trust and encourages repeat business.
Conclusion: These personas provided valuable insights that helped shape the design of Yai’s Kitchen’s website to meet the distinct needs of their customer base. By understanding Stella’s need for convenience and affordability and Mark’s desire for reliability and customization, I was able to create a tailored experience that supports Yai’s Kitchen’s goals of boosting sales, increasing food truck attendance, and driving catering growth. This approach aligns with HubSpot’s emphasis on putting customers at the center of every design decision, ensuring that Yai’s Kitchen’s online presence effectively engages both new and returning customers across their service offerings.
Competitive Analysis
To support the redesign strategy for Yai's Kitchen, I conducted a competitive analysis of three similar businesses: Blue Moon, Jamaica Mi Hungry, and Born Thai. Each competitor offered insights into strengths, weaknesses, and market positioning, which helped inform design decisions to differentiate Yai’s Kitchen and address gaps in the current user experience.
1. Blue Moon - Fine Thai Cuisine & Bar (https://www.bluemoon-thai.com/)
-
Strengths: Blue Moon offers a range of services, including dine-in, take-out, and delivery options, which cater to diverse consumer needs. Their online ordering system is embedded within the site, providing a seamless user experience.
-
Weaknesses: Despite its strong offerings, Blue Moon lacks a significant social media presence, particularly on Instagram, which limits its engagement with potential customers. Additionally, their “Start Order” button on Facebook redirects to an incorrect URL, creating a frustrating experience for users.
-
Takeaways for Yai’s Kitchen: To avoid similar pitfalls, I ensured Yai’s Kitchen’s website had a clean, accurate ordering process, with correct links on all platforms. Emphasizing Yai’s Kitchen’s social media engagement also became a priority to build a stronger online presence and attract new customers.
2. Jamaica Mi Hungry (https://www.jamaicamihungry.com/)
-
Strengths: Jamaica Mi Hungry has built a strong brand identity, with visual consistency across its website and social media channels. Their focus on large-scale catering options (for events of 50 to 5,000 guests) appeals to businesses and event planners, making them a popular choice for catering.
-
Weaknesses: The business could improve by incorporating an online food truck schedule, allowing loyal customers to easily find locations and plan visits. Their social media activity, while present, could be more consistent and timely.
-
Takeaways for Yai’s Kitchen: Inspired by Jamaica Mi Hungry’s approach to catering, I created a dedicated catering page for Yai’s Kitchen, targeting local businesses and schools with clear menu options and a streamlined inquiry form. Additionally, I implemented a calendar feature on the website to display Yai’s Kitchen’s food truck schedule, enhancing accessibility for loyal customers.
3. Born Thai (https://www.bornbklyn.com/)
-
Strengths: Known for its upscale dining experience, Born Thai has established a premium brand with an emphasis on food presentation and culinary artistry. Their website includes an easy-to-use ordering system, and a “Press” section to build credibility through media features.
-
Weaknesses: Born Thai’s website could improve its usability by adding a “Back” button for easier navigation during the ordering process. The site’s gallery and homepage also lack the kind of engaging visuals that might attract new customers.
-
Takeaways for Yai’s Kitchen: Drawing from Born Thai’s premium positioning, I emphasized high-quality visuals and a welcoming layout on Yai’s Kitchen’s site. This included using vibrant, authentic imagery to highlight the storefront experience and build a connection with new visitors.
Market Positioning Insights:
-
Product vs. Services Balance: Competitors like Jamaica Mi Hungry and Born Thai balance product offerings (e.g., dishes, meals) with services (e.g., catering and events). For Yai’s Kitchen, I reinforced this balance by promoting both food truck and storefront offerings while making catering options prominent.
-
Social Media and Online Presence: Most competitors lacked strong or consistent social media engagement. Recognizing this gap, I advised Yai’s Kitchen to improve their social media activity, providing a reliable way for customers to stay informed about locations, menu updates, and special offers.
-
Pricing and Market Segment: Positioned in a “$$” pricing range, Yai’s Kitchen targets both budget-conscious and premium customers. To appeal to this segment, I incorporated clear, engaging visuals and accessible CTAs for easy navigation between budget-friendly food truck items and upscale catering options.
Conclusion: The competitive analysis provided valuable insights that shaped Yai’s Kitchen’s redesign strategy. By learning from competitors’ strengths and addressing common weaknesses, I was able to position Yai’s Kitchen to better meet customer needs, enhance brand differentiation, and drive engagement across all services. The new website now serves as a strong foundation for Yai’s Kitchen’s growth, supporting both loyal and new customers and increasing catering sales in the local community.
Wireframing and Low-Fidelity Prototyping
To translate insights from user research and competitive analysis into actionable design, I created low-fidelity wireframes for Yai's Kitchen’s redesigned website. These wireframes focused on establishing the structure, navigation, and functionality to meet the distinct needs of Yai’s Kitchen’s diverse customer base, including food truck followers, new storefront visitors, and potential catering clients.
.png)
Key Pages and Features in the Wireframes:
-
Homepage with Targeted CTAs: The homepage wireframe highlights clear calls-to-action for “View Food Truck Schedule,” “Explore Catering Options,” and “Visit Our Storefront.” These CTAs guide users based on their specific needs, increasing accessibility and encouraging engagement across Yai’s Kitchen’s service offerings.
-
Food Truck Schedule: To cater to loyal food truck customers, the wireframe includes a dedicated section with a calendar that displays upcoming food truck locations and times. This feature addresses customer needs by making it easy to find and follow Yai’s Kitchen’s food truck locations without additional searches.
-
Storefront and Restaurant Menu Page: The wireframe for the storefront page emphasizes menu organization, allowing users to easily browse and explore available dishes. Each section is arranged by category, ensuring that users can quickly find items of interest. This structure is designed to drive foot traffic to the new storefront by making the in-store menu accessible online.
-
Catering Services Page: Recognizing the growth potential in catering, I included a dedicated catering page in the wireframes. This page features options for individual or bulk buffet catering, along with a form for quick inquiries. By streamlining the inquiry process, this page supports Yai’s Kitchen’s goal of increasing catering orders from local businesses and schools.
-
Reviews and Testimonials: Customer reviews were incorporated into the wireframes to build trust and credibility, especially for new customers exploring the storefront or considering catering services. This section reinforces Yai’s Kitchen’s reputation and provides social proof, aligning with customer expectations for reliability and quality.
-
Contact and Location Information: To support both food truck and storefront operations, the contact page includes details for each location, a map, and a contact form for inquiries. The layout emphasizes ease of access, making it straightforward for customers to reach Yai’s Kitchen or locate a nearby truck or store.
Design Rationale: These wireframes allowed us to focus on the overall structure and user journey before refining visual elements. By outlining key features and organizing content around customer needs, the low-fidelity wireframes helped validate the design direction and ensured alignment with Yai’s Kitchen’s business objectives. The wireframes also provided a foundation for gathering stakeholder feedback early in the process, allowing for adjustments to better support each user group’s needs.
Design Execution and Key Features
With clear personas and customer needs identified, I designed targeted solutions to enhance the online experience for each segment, supporting both immediate sales and long-term brand loyalty.
-
Food Truck Location Schedule: I implemented a calendar feature on the homepage to allow loyal customers to view the food truck’s weekly schedule and locations at a glance. This calendar is easy to update, ensuring that Yai’s Kitchen can keep customers informed about new locations or changes. This feature helps retain and engage the food truck’s loyal fan base, making it simple for them to stay connected and plan visits.
-
Dedicated Storefront Page: To promote the new storefront, I created a page that highlights the location, hours, and menu options available exclusively at the storefront. This page includes enticing visuals and a clear call-to-action for customers to visit in person, driving foot traffic to the new location.
-
Enhanced Catering Section for Businesses and Schools: Recognizing the potential for growth in catering orders, I designed a dedicated catering page. This page includes customizable menu options, testimonials, and a simple inquiry form that allows businesses and schools to easily submit requests for events. The form includes fields for event type, date, expected attendance, and dietary preferences, making it easier for Yai’s Kitchen to respond with tailored proposals.
-
Dynamic Homepage with Targeted CTAs: The homepage features prominent CTAs for “Check Food Truck Schedule,” “Visit Our Storefront,” and “Explore Catering Options,” guiding users based on their specific needs. This structure helps Yai’s Kitchen engage all customer segments while increasing the visibility of key services.
-
Personalized Recommendations and Promotions: For storefront and food truck customers, I added sections for seasonal specials and popular dishes. For catering clients, the catering page highlights options for different event types, such as corporate meetings or school events, encouraging visitors to explore tailored offerings.
Collaboration with Development and Marketing Teams: Throughout the design process, I collaborated with the development team to ensure that features like the calendar and catering inquiry form were implemented effectively. Weekly check-ins with the marketing team helped refine content to better align with Yai’s Kitchen’s brand voice, while regular feedback from the owners allowed for adjustments to meet business needs. This collaboration ensured that the final product was cohesive, customer-centered, and optimized for Yai’s Kitchen’s growth goals.
Style Guide
To ensure that Yai’s Kitchen’s online presence reflects the brand’s personality and creates a cohesive, engaging user experience, I developed a style guide that defines the visual elements across the website. The style guide captures the authentic, vibrant essence of Thai cuisine while maintaining a clean and accessible design that appeals to both loyal food truck customers and new storefront visitors.
Logo and Brand Color Palette
The color palette is inspired by the fresh, bold flavors of Yai’s Kitchen’s dishes. The primary colors include a vibrant green (#BADA55), a warm yellow (#FFBE13), and a spicy red (#FE6515). These colors ensure brand consistency and evoke a sense of freshness, energy, and warmth associated with Thai culture and cuisine. The orange and red hues are strategically used in CTAs and button designs to encourage action and draw user attention to key elements.
Typography
To maintain a clean and modern look, I chose Libre Baskerville for main headings, creating a sophisticated and grounded tone that complements the brand’s authenticity. Avenir Light is used for subheadings and body text, providing readability and a contemporary feel that aligns with Yai’s Kitchen’s approachable yet premium identity. This combination of typefaces adds a subtle elegance, ensuring that the text is easy to read while reflecting the brand’s unique character.
Button Style & Hover States
Buttons on the site are designed with a square-rounded shape and use the brand’s bold red-orange (#FE6515) as the primary color. When hovered, the color shifts slightly to the orange-yellow (#FFBE13), creating an engaging, interactive experience that encourages users to click. This hover effect adds a subtle layer of visual interest while reinforcing the brand’s warm, inviting atmosphere. Raleway is used for button text to maintain clarity and ensure the CTAs stand out against the colorful background.
Imagery
The imagery in the style guide features vibrant, high-quality photos of Yai’s Kitchen’s dishes, capturing the freshness and variety of ingredients. Images were chosen to emphasize the brand’s commitment to authenticity and quality, appealing to users who value visually appealing and culturally rich dining experiences. The mix of bright greens, fresh herbs, and colorful dishes reflects the core elements of Thai cuisine and adds a lively, appetizing element to the design.
This style guide establishes a consistent, visually appealing look and feel that aligns with Yai’s Kitchen’s brand identity, ensuring that all design elements across the website create a cohesive and memorable experience for users. The guide also supports the website’s usability and accessibility, making it easy for customers to engage with the content, place orders, and explore the brand’s offerings across food truck, storefront, and catering services.
High-Fidelity Design Execution and Prototyping
With the site structure validated, I moved into high-fidelity design, focusing on visually connecting Yai’s Kitchen’s brand identity with a user-friendly experience. The final design uses vibrant colors and authentic Thai-inspired visuals that reflect the brand’s heritage and appeal to a diverse audience.
High-Fidelity Design Highlights:
-
Engaging Homepage with Calendar Feature: The homepage showcases the food truck schedule in an interactive, easy-to-navigate calendar format. Prominent CTAs guide users to the storefront and catering sections, ensuring customers can easily find what they need.
-
Showcase of Storefront Offerings: The storefront page includes visually rich elements, like photos of the storefront’s unique dishes and an embedded Google Map for easy location access. This page is designed to attract new visitors by providing a virtual preview of the in-store experience.
-
Catering Page for Business and School Events: The catering page is tailored for local businesses and schools, showcasing flexible packages, customer testimonials, and a streamlined inquiry form. The design appeals to event planners and makes the inquiry process easy and accessible.
.png)
Interactive Prototype and Testing: I created an interactive prototype to test the final design with loyal customers and new users. Feedback from these sessions led to minor adjustments, such as improving the visibility of the catering CTA and refining mobile layouts for easy access to the food truck calendar. These refinements ensured the design was polished, accessible, and functional across devices.
Design Rationale and Measurable Impact: The high-fidelity design created a visually engaging and user-friendly experience that supported Yai’s Kitchen’s goals of expanding sales and increasing engagement. After launch, we tracked key metrics:
-
18% Increase in Food Truck Attendance: The calendar feature made it easier for customers to find the food truck, increasing attendance at scheduled locations.
-
32% Increase in Storefront Foot Traffic: The dedicated storefront page attracted new customers, who used the site to find location information and preview the menu.
-
27% Growth in Catering Inquiries: The catering page and inquiry form made it easy for businesses and schools to request catering, leading to a substantial increase in catering orders.
These metrics demonstrate the impact of a tailored, user-centered design that drives engagement and supports Yai’s Kitchen’s growth.
Adaptability and Problem-Solving
Designing for Yai’s Kitchen presented unique challenges due to the business’s multi-faceted nature—operating both as a food truck with a loyal following and a newly established storefront while expanding into catering for local businesses and schools. Balancing the needs of these diverse customer segments and adapting to the business’s seasonal changes required flexibility, strategic thinking, and creative problem-solving.
Challenge 1: Balancing Overlapping User Needs Across Services
With three main services (food truck, storefront, and catering), each attracting a different type of customer, creating a streamlined experience for all users was essential. Loyal food truck followers wanted easy access to the schedule, new storefront visitors sought menu and location information, and catering clients required quick, clear details on event options.
Solution: I developed a modular layout, ensuring each service had a dedicated section on the homepage with clear, targeted calls-to-action (CTAs) to guide users based on their specific needs. This layout made it easy for all user types to quickly find the information relevant to them without feeling overwhelmed by other options. I also implemented a calendar feature specifically for the food truck, prominently placed on the homepage for easy access. This approach provided a clear structure while catering to the unique needs of each customer segment.
Challenge 2: Adapting the Design for Seasonal Changes and Updates
Yai’s Kitchen frequently rotates menu items based on seasonal ingredients, and food truck locations change regularly. This meant the website needed to be adaptable, allowing for quick and easy updates without disrupting the user experience.
Solution: To address this, I designed flexible content modules that could be easily modified or replaced as the business’s needs evolved. For example, I implemented an editable calendar for the food truck locations, allowing the team to quickly update dates and venues. Additionally, I created a “Weekly Specials” section that could showcase seasonal menu items, providing Yai’s Kitchen with a dynamic, easily updatable area to keep the site fresh. These adaptable components ensured that the website could respond to changes seamlessly, providing a reliable experience for users while meeting the business’s operational needs.
Challenge 3: Simplifying the Catering Inquiry Process for Busy Clients
For catering clients, such as local businesses and schools, the traditional method of reaching out via phone or email was time-consuming. I needed to design a streamlined process that allowed these clients to quickly submit detailed inquiries without multiple touchpoints.
Solution: I designed a dedicated catering page with an intuitive inquiry form, allowing clients to specify event details such as date, number of attendees, and dietary preferences. This form minimized back-and-forth communication, enabling the team to respond faster with tailored quotes. By simplifying the inquiry process, I not only improved user experience for busy clients but also increased the efficiency of Yai’s Kitchen’s catering operations, ultimately supporting their growth in this area.
Conclusion: Navigating these complexities required adaptability and a strategic approach to design. By creating modular, flexible components and carefully considering the specific needs of each customer group, I was able to develop a cohesive solution that supported Yai’s Kitchen’s business goals while enhancing user satisfaction across all services. This experience reinforced my ability to manage and solve complex design challenges, ensuring a seamless user experience despite evolving business requirements.
Reflections and Growth Mindset
Reflecting on this project, I recognized the value of a flexible design system to support businesses with evolving needs. This experience deepened my appreciation for the power of targeted features like scheduling tools and catering pages in driving engagement and conversions. Moving forward, I aim to apply these insights to continue creating designs that balance business growth and user satisfaction.
