In Queso Emergency

A responsive web-design project for a local Austin food truck looking to offer online ordering with updated branding.

The Client

In Queso Emergency is an independent food truck business established in 2020, presently operating in Austin, TX. Given their food truck nature, their location frequently changes. Their culinary offerings revolve entirely around delectable grilled cheese creations. Beyond their regular stops, they also engage in catering services for weddings and corporate events, showcasing their commitment to serving scrumptious fare to the local community.

The Goal

In Queso Emergency currently doesn’t have a website and primarily uses Facebook and Google for listing general information. They want to develop their online presence and make it easier for customers to order through their site. Going into the design process the main goal for them was to have solid branding, a website that clearly lists out their information, and an easy to use ordering online option. Having a site that had a clear order flow was especially important to the business.

My Role

My role in this project was UX Designer for a responsive site.

The Constraints

The In Queso Emergency site timeline was for a total of about 13 weeks to complete a full site with a responsive design for desktop, tablet, and mobile while also testing a user flow for making online orders.

Process

Research
User Interviews:

To start the research process, I began by recruiting participants for user interviews and creating a set of questions. My primary objective was to uncover the expectations of users when they visit a food truck's website. Additionally, I aimed to identify any pain points in the user experience. In this case study, I successfully attained five participants. The following data was gathered through the interviews I conducted:

Motivations:
-All participants said they would usually visit a food truck if they were available, usually while out socializing
‍
- 80% of participants usually chose to eat at food trucks based on convenience
‍
- 80% of participants said they checked a food trucks website to primarily check menu items to be sure they’re interested in what’s offered
‍
- All participants said that while a order online option wasn’t necessary, they all said it was convenient and they did prefer when the service was offered 
‍
- 60% of participants preferred online ordering because it was easier to track when their food was ready to pick up and let them make modifications

User's needs
‍- 80% of participants preferred an order online option either due to covid restrictions or to make ordering easier
‍
- 40% of participants liked the idea of being able to put in bulk orders online to use for offices or small events
‍
- 80% of participants want to see catering availability and possible pricing listed online
‍
- 20% of participants thought that there should be options to give the user a catering quote
‍
- 60% of participants wanted to be able to modify their order when ordering through the online service
‍
- All participants want the order online process to be clear about what is being selected and obvious about prices

Frustrations
- All participants disliked when there weren’t prices for food or there weren’t pictures of the food

- Most participants disliked when food truck websites are not clear about what locations there are or what’s being served at what locations

- Most participants disliked ordering online when the site is not clear about what location they were ordering to

- 20% of participants don't like when a food truck website doesn't list what's in the food

- 60% of participants didn’t like when catering sections of websites were vague and didn’t say what all was included

- 40% of participants didn’t like when the order online feature wasn’t clear about if the item is beings added to your cart

- 60% of participants didn’t like when there weren’t photos when ordering online

Competitive Analysis:

After collecting data from user interviews I moved on to conducting comparative and competitive research to gauge what other local businesses were providing. I looked at Burro, The Mighty Cone, Spice Boys, Arlo’s Curbside, and Doordash. Doordash was the only site that focused only on ordering food and wasn’t attached to a singular restaurant. While each site displayed notable distinctions from one another, they collectively offered valuable insights into the features that other businesses considered most significant.

User Persona:

The persona I developed represented a local food enthusiast eager to explore diverse culinary options within the city. Using my research findings, I crafted a persona that resonated with someone likely to be a frequent visitor to food trucks.

User Journey Map:

Following the creation of the persona, I designed a journey map illustrating a potential scenario for ordering and picking up food. This journey map proved invaluable in gaining insights into customers' experiences and identifying areas that could be enhanced.

Building the Design

I commenced the design process by first developing a sitemap, which served as a roadmap to guide my progress. The sitemap played a crucial role in outlining the structure of the website.

As I followed the site map as my reference, I crafted a task flow to assist me in identifying the key areas of emphasis within the online ordering process.

Once I had identified the necessary pages and core features for the website, I proceeded to develop wireframes using Figma. These wireframes encompassed designs for desktop, tablet, and mobile interfaces, resulting in a total of 27 pages. Following the completion of the wireframes, I constructed a mid-fidelity prototype to ensure the absence of any prominent missing features.

After the wireframes were designed, I began working on creating the company logo and brand identity. I started by sketching out ideas for my logo design, aiming for a design with a lot of energy and a Southwestern vibe. The branding was intended to be inviting and to reflect the personality of the owners.

For the site colors, I aimed for a balance between brightness and legibility, using an accessibility checker to ensure proper functionality. The chosen colors were meant to exude warmth, evoke thoughts of grilled cheese, and carry a strong Texas feel.

To infuse a sense of fun and energy into the design, I incorporated hand-drawn elements and vectorized images. When selecting the typeface, my primary considerations were legibility and clarity, ensuring a seamless user experience.

Having the UI Kit at my disposal, I moved on to crafting the high-fidelity designs for the website in Figma. To ensure the site's responsiveness, I carefully designed pages for desktop, tablet, and mobile, resulting in a total of 30 pages upon completion. During prototype testing, I focused primarily on the desktop version and incorporated a few additional pages to comprehensively refine the online ordering process.

Usability Testing and Interactions

Upon completing the prototype, I proceeded to carry out usability tests with a group of four participants. They were instructed to navigate the process of placing an online order and completing the checkout. The outcomes of these usability tests enabled me to construct an affinity map, highlighting the elements that were functioning effectively and identifying areas in need of design improvements.

Based on the feedback provided by the participants, I subsequently made revisions to the high-fidelity designs to enhance the user flow of the site. These changes included the addition of a vegetarian symbol and a peanut allergy symbol. Furthermore, I incorporated a zip code section into the checkout process, which had initially been overlooked.

Prototype
Learning & Takeaways

This project spanned approximately 13 weeks, encompassing research, design, testing, and iterative phases. During this time, I successfully developed nearly all the essential pages for the site's optimal performance and made significant progress toward implementing a fully functional online ordering feature. Managing responsive designs with a substantial number of pages proved to be a valuable challenge. I gained valuable insights throughout this project, which significantly contributed to enhancing my skills as a UI/UX Designer. Thank you for taking the time to read.

Previous Project : Aspen
Next Project : D&D Beyond
LINKEDINInstagram
DARBYLEANNETAYLOR@GMAIL.COM