Nachos for Dessert Website
A responsive website redesign for a local Portland food truck
Role
UX/UI Designer
Project Timeline
8 weeks (Winter 2023)
PROJECT OVERVIEW
Project goal: Design a responsive website for a new food truck in Portland.
User: Diners who order food from food trucks.
User Problem: Diners can't easily find menu info on their phones.
Business Goal: How to make an appeal to parents with kids.
Solution: A mobile-first design for a family-friendly food truck experience that meets the needs of a diverse group of users.
DESIGN PROCESS
Discover
Desk research
User surveys
Competitive benchmark
Define
Affinity mapping
Personas
POVs/HMWs
Develop
Brainstorming
Sitemap
Mood board, color/text styles
Wireframes, task and user flows
Deliver
Prototype and usability testing
Analyzing and prioritizing results
Iterations
BACKGROUND
Nachos for Dessert is a Portland-area food truck from Andy, a former wildland firefighter
After significant delays opening his business due to the pandemic, Andy was finally ready to launch his dream business in Oct 2022.
WEBSITE REDESIGN
Andy has only a few assets to launch his business, including a logo, website he designed, and menu
Portland has over 600 food trucks, making it a competitive market to open a new one.
The business owner’s original website which he designed
KICK-OFF BUSINESS MEETING
I met with Andy to understand his business needs. He wants to appeal to parents of young kids and provide DoorDash takeout
I was also clear on expectations on what we could deliver in our timeline.
USER SURVEYS
The 124 respondents to my food truck survey were diverse in age, number of children, and dining companions
I wanted to know who goes to food trucks, how they use them, and what info they look up online.
SURVEY RESULTS / RESEARCH INSIGHTS
Users’ #1 consideration is the menu
49% of users said the menu is the most important factor when deciding on which food truck to eat at.
Diners are spontaneous
55% of users do not plan ahead- they just head over to the food cart pod and see what’s available.
Menus are also the main online need
41% identified the menu’s details as the main reason they need to look up a food truck’s info online.
Allergy/nutritional info is important
36% of users said it was somewhat or very important to have access to allergy and nutritional information.
COMPETITIVE RESEARCH
Competitors had difficult-to-read menus and sites that are not responsive for mobile
Some of Portland’s most successful food trucks had cluttered menus with small photos, long descriptions, and long pages. Homepages were overloaded with information and lacked branding or visual design.
Four local food trucks had lack of mobile responsiveness and unfocused branding or visual design
PERSONAS
My users are diverse so my personas reflected their different needs
I analyzed my survey results and reflected the different scenarios and motivations for diners to venture out to a food truck.
Personas reflected the diverse variety of diners who often drop by food trucks without prior planning
RESEARCH INSIGHTS: IMPORTANT FINDING
The majority of users do not plan ahead for their food cart pod visit
Users are generally not largely impacted by social media buzz or culinary preference (despite stating strong preferences). They will just head over and see what is available, prompting me to consider the importance of a mobile-first design for users on the move.
HMW
How might we… signal to parents of young children that the food truck is family-friendly?
It is important to the business owner that he stands out in the crowded marketplace as a destination for families post-little league games and possibly expand into catering that market in the future.
IDEATION
Generating ideas visually through drawings lead to some weirder ideas but ultimately a more empathetic look at what parents of young children may need for a food truck visit
Crazy 8’s generated whimsical ideas of design stylings for what diners may find fun but ultimately focused on what they need
DEVELOP
I continued to empathize with different diners and what their needs may be in order to plan a trip to a foodcart pod
Inclusive design goes beyond basic accessibility and I thought about information that would be important to different groups of users.
SITEMAP
The IA is relatively simple as our MVP will not have that many pages or features at launch
The business launch was imminent so I wanted to design a site that met users’ primary needs in our accelerated timeframe.
A simple sitemap for the website redesign that had to be ready for the business’ opening
TASK/USER FLOW #1
I will be asking users to find a dairy-free menu selection for a child
A large number of survey respondents said that knowing a menu’s allergen or nutritional info was important to them.
TASK/USER FLOW #2
Their second task will be to try and order a dairy-free menu item ahead of time for pickup on DoorDash
Even though the redirect to DoorDash pickup service is outside the scope of my work for the business, I wanted to test the overall experience for users who start at our website.
LOFI WIREFRAMES
User surveys showed that diners spontaneously stop by food trucks, so most users look up menus and business info on their phones
This emphasized the importance of a mobile-first design for the food truck’s website.
Lofi wireframes focused on the diners’ primary need for finding menu information quickly
MOOD BOARD
The business owner sent me bright, kid-friendly imagery for what he has in mind
He also included a lot of photos of pastry piping bags- his tool of choice for preparing his dessert nachos.
The business owner sent a collection of bright, childlike images and a chef’s pastry bag as a mood board for his website
COLOR STYLES
The business owner said that he’s “bad with colors, you decide” so I collected 3 boards of inspiration and asked him what level of spiciness he wanted
I was glad I went through this exercise as he originally told me to make his website look really wild but he ended up choosing the “2 chili peppers” level of spice.
The business owner was presented with 3 mood boards and asked to choose how many chili peppers he wanted his website to be
COLOR STYLES
I knew business owners can be very attached to their logos so I made 2 variations of the wireframes with the brand colors
Andy chose the toned-down brand colors for his styles. I made sure at this stage that the text would be accessible.
ICONS
The Toast app notes that icons can help both diners and staff address concerns about allergies. The business owner is also very attached to the image of the pastry bag
I researched some of the most common food allergens and selected an icon set to reflect the menu. I also used a pastry bag icon to help diners understand the unique dessert concept.
Menu icons for common food allergens
Describing the unique concept with a pastry bag icon
PROTOTYPE #1
I was testing users with the scenario of driving around on a busy Saturday and trying to find an allergen-free dessert on their phones
I thought of a likely scenario that my diners might face when they are out-and-about and decide to spontaneously drive over to a foodcart pod.
Prototyping a usability test for finding a dairy-free menu option
PROTOTYPE #2
Completing their online order at an external vendor’s site is still part of the overall user experience, so I tested usability through and outside my own designs
Since the DoorDash takeout option was important to the busy owner, I wanted to research how the overall experience felt to his potential diners.
Testing ordering at an external site to capture the full user experience
PROTOTYPE FEEDBACK: USER-CENTRIC DESIGN
Users found the allergen info and amenities list helpful and consumer sensitive
Users commented that allergen info and amenities listing shows that the business is concerned about diners and their needs.
INSIGHTS FROM USABILITY TESTS
Icons were too small / confusing
All 5 users had difficultly reading the allergen icons and were confused with the pastry bag.
Visuals more helpful than text
Despite it being a new food concept, users found photos more informative than icons or copy.
2 out of 5 cart abandonment
Users found DoorDash’s forced login/account creation frustrating. A user said they would blame the original business if they experienced issues on DoorDash.
Users liked the fun visual design
Users enjoyed the colors, decorative background shapes, and business logo.
OPERATIONAL IMPACT
Would a new business be able to scale-up with telephone orders?
Users were frustrated with ordering takeout at an external site. One user suggested simply calling ahead to place their order. Before making this design change, I verified with the business owner that he would be able to operationally handle the phone orders. And as a bonus- he said he would keep more of the profits since he isn’t paying out to an outside vendor.
FINAL DESIGNS
Helping both busy casual diners and the ingredient-sensitive diner required a newly designed menu page
I decided to keep the simplified menu on the homepage for the majority of users but created a more detailed menu page to give assurance and confidence in those with food sensitivities.
FINAL DESIGNS: HOMEPAGE
I replaced overly descriptive copy with a simple (and delicious) hero image to explain the unique concept
Users were confused by the pastry bag icon and did not bother to read the text- they preferred simply seeing what the final dish would look like.
Redesigning the home page to let a photo instead of an icon explain the food truck concept
FINAL DESIGNS: HOMEPAGE
Following a discovered pairing in needs from the users and business owner, I changed the main CTA to ordering takeout by phone call
I kept the DoorDash link for users who may still prefer online ordering. I also replaced the illegible and confusing allergen icons with concise text.
Changing the primary CTA on mobile to phoning ahead offers a more frictionless option for on-the-move diners
FINAL DESIGNS: NEW MENU PAGE
I designed a new detailed menu page with more info to help users feel more confident with their orders
Most users may not need to read such a detailed page but for foodies or diners concerned with ingredients or food allergies, I created a new page for them.
A new, detailed menu page for diners who need more information in order to feel confident about allergies or other dietary concerns
FINAL DESIGNS: LOCATION PAGE
More usability for users who are walking or driving around while hungry
Users didn't understand the address link opened Maps, so I added color and underline. I also added more footer navigation as users looked there for other pages despite shallow site structure.
Adding more links in the footer for users who preferred looking for information outside the menu
FINAL DESIGNS: DESKTOP AND TABLET
Users could still easily opt for online ordering when viewing on tablet or desktop
For diners who may not be out walking or driving around, there is still a quick option to be redirected to their DoorDash account from the website.
The responsive website allows users to have an online ordering option for the primary CTA while making the telephone number prominent in the top nav bar
Users found the amenities list to be considerate and reflect the values of the business
FINAL PROTOTYPE
I updated my designs to facilitate ordering takeout and address concerns from users who need more details on the menu
The final prototype for my responsive website for this local business can be previewed here or in the live preview below.
REFLECTIONS / WHAT I WOULD DO DIFFERENTLY
“Recognition rather than recall”
Use labels and concise copy to convey important information, rather than opting for a cleaner interface.
Check with stakeholders throughout the process
The business owner requested an extreme color palette but went with a more conservative one. I also made sure phone-in takeout orders could be handled by the kitchen.
Not all solutions are web-based
I didn't consider phone calls as an easier alternative to my web-based solutions until a user requested it.
Clear labels over cute icons
Icons alone don't instill confidence or provide accessibility for screen readers.
NEXT STEPS
Pairing user and business needs 🤝
I gave the business owner a punch list of issues that both he and the users are aligned on that we can revisit it together in the near future.
USER NEEDS
DoorDash users may find the dense menu frustrating.
Food trucks move around, so users should check availability before scheduling a catering event online.
Users want to see more menu photos and new items as they're added.
BUSINESS NEEDS
Needs help simplifying his DoorDash online menu for clarity and showcasing new items or specials.
Needs to grow customer base and keep potential users from leaving because they don't know where the truck is.
Wants to add more photos of new/seasonal menu items to the website.
More Case Studies
An end-to-end mobile app that connects snack lovers for fun and discovery.
An add-a-feature (and redesign) of the Nintendo Switch Online mobile app.