UI UX DESIGN | GO! TACO!
The Go! Taco! app is designed to enhance the dining experience for taco lovers in Manhattan while boosting sales for local food trucks. This app allows users to easily identify the real-time locations of taco trucks throughout the city, ensuring they never miss out on their favorite lunch.
In addition to tracking truck locations, the app features a comprehensive database of nutrition facts for each menu item, catering to health-conscious consumers. Users can make informed choices based on their dietary preferences and nutritional needs, fostering a loyal customer base that values transparency and health.
As a UI/UX Designer, it is my goal to create a taco truck app to not only improve customer convenience but also drive traffic to food trucks, ultimately supporting the local taco scene and enhancing overall sales.
Figma, Adobe Illustrator, Adobe Photoshop
1. Empathy
The most crucial tool in the beginning stages of design for a UX Designer- being able to place oneself in a user’s shoes and anticipate their experience and journey. In order to understand user needs, I conducted a few interviews with several users of different age groups, nationality and background, and created empathy maps to generate a persona to represent the research.
The general user group are adults in a fast paced city, who have busy work schedules, who enjoy food trucks for their convenience in price and fast preparation of food. When asked what their general experience was with taco trucks in the city, the research revealed the following pain points:
There are taco trucks all around the city, but no formal ordering app for them.
It’s hard to navigate to a food truck because there isn’t one place where customers can view truck locations.
People enjoy eating tacos but would like nutritional transparency.
There is a necessity for food truck ordering and locating apps in New York City. A user’s main goal is to locate a nearby truck, select a menu item, customize the item, view the nutrition facts, checkout, and pick up their order. A User like Tatia agrees.
2. Storyboarding
Mapping Tatia’s User Journey Map shows the user's experiences to achieve a certain goal. In this case, the goal is to order and pick up the order from a taco truck.
Along with the informative chart, is a UX Design Storyboard to visualize the user’s experiences in their day, and navigation through the app.
3. User Flow
The Sitemap is a tool to help organize the structure of the app. This is used as an outline to reach the goal of making navigating through the app quick and easy for the user. The user will flow through different pages, the Login, Map, Menu and finally checkout.
4. Paper Wireframe
Paper wireframes are a basic outline of a digital experience. The key features on the home screen that were prioritized are the logo of the app, the new menu items, and a large icon that takes you to the Find A Truck navigation page. The wireframe exercise helps organize the information on a page with several quick but efficient iterations.
5. Figma Wireframe
The next stage was to place the desired paper wireframes into Figma and create digital wireframes, which will later turn into a low fidelity prototype. Like the Paper wireframes, the digital wireframes are basic outlines to get the general idea across, informing the user where images, text, and buttons will be placed. This involves utilizing text to label specific actions and categories on each page, ensuring clarity and ease of navigation. The design draws inspiration from the initial paper wireframes, maintaining a consistent user experience while effectively guiding users through their journey in the app.
6. Low Fidelity Prototype
After the wireframing, the prototyping begins. At this stage the main goal is to create clear flow from one frame to the other. I organized the wireframes in sequential order.
When a user opens the app, I want them to first log in or create an account. This makes the experience of ordering more personal and allows for potential features like saving a users payment preference and favorite menu items, making the app more easy to use in the future.
For the home page, the main two things I want the users’ attention towards is a “new item” carousel and a large “Find a Truck” button. I feel this will engage the user and also navigate them to the most important step, which is to find the nearest truck location to pick up their order from. To emphasize the importance of this, I introduce the function in the very beginning and at the end.
The next step is to select an item from the menu. The categories are listed at the top horizontally and the items in each category are listed vertically. Here, I am referencing the Gestalt principle, where items of similar size or placement are associated together to have a common function. The user will then select their desired item and enter a new screen where they can customize it. The same principle applies here - the circles with x‘s in them are meant to indicate images of the ingredients. Each category- tortilla, toppings, and salsa are placed vertically and are divided by a line to emphasize separation. The specific ingredients are laid out horizontally, in uniform sizes to indicate they are similar options with no hierarchy. Speaking on hierarchy, the menu item is displayed at the top of the page, so the user knows, at all times, that this is the item they are customizing. The use of images is intentional to make the app experience more enjoyable, however, It is also important to include text to increase accessibility and usability.
Having text can allow screen reading assistance for those who need it. Accessibility is important in order to include broader groups of people like color-blind and visually impaired users. Overall, designing with accessibility enhances the experience for everyone.
At the lower right and left corners are two buttons- the “nutrition fact” and the “add to order” buttons. These buttons are separated and shaded differently in order to determine them as having different functions. The “add to order” button is indicated on the right to signify that it is the next most important step to make in order to progress through the app. When clicked, an overlay screen displays the menu item, price, and options to progress to the checkout or to keep ordering. If the user chooses to add more items, they can. If they proceed to checkout, the user will find themselves on the checkout page where they will continue and finalize their order.
7. Usability Study
I asked users to sign in, find a nearby truck, order items from the truck, checkout and navigate to the truck for pickup. While they are navigating these tasks, I was silent and observant of any hesitations and noted them. At the end of the task, I asked the following questions:
What did you like about the experience?
Why did you struggle with ______ task?
What do you think would make that step more clear for you?
Is there any additional feedback you would like to provide?
After conducting the interviews, I observed that checkout was not as user friendly as it could be. Although the items in the cart had a delete button, a quantity button was missing. This made some frustrated when wanting to update the quantity of an item in their cart. A quantity modifying button will be necessary in furthering this app. After an order had been submitted, users were unsure if it had been submitted. To fix this, I plan to include an overlaid confirmation page that confirms the order and transitions the user to the find a truck page. In addition to this, the study showed that the users would benefit from viewing past orders, card information, having access to a help page, or even a customizing profile page. This is where I got the idea to include a hamburger menu for the high fidelity prototype. The usability study also helped me realize that the bottom buttons on the menu customizing page are shaded incorrectly. Although the “add to order” button is on the lower left side to indicate that it’s the next step of the user journey, It did not capture as much attention as the “nutrition facts”. In order to fix this, The “nutrition fact” button needs to be toned down and the “Add to order” button needs a bolder presence by color.
8. Design Kit
After gathering data from the usability study, organizing them based on importance, and brainstorming solutions, I began the fun part - The design kit for the High Fidelity Prototype.
Before laying everything onto each page, I began developing the Sticker Sheet. Firstly, the colors. I want the app to feel fun and energized but not too straining to the eye. I selected a light-orange color, an accent-orange, a light-blue color, and accent-blue color, a burgundy color for text, and a neutral off-white color for the background. I added all of these colors to the styles on the Figma project, so that if I change my mind on them later, everything can automatically update and save a lot of time.
Next, I selected the typography for text. This included deciding on size and font for whatever function. Once that was done, I created the buttons. I decided on all of the call to action buttons to be the light orange color. There are two main types of buttons. One that is a primary and the other secondary. The primary is a button that Wants to pop and draw attention, the other is an optionable button but will not take you through the main flow of the app. Both of these buttons have a selected variant. Once selected, they brighten in color and italicize.
Icons are a big part of the brand Identity. I used google search to find icons of tacos, menu items, trucks, quesadillas, etc.. After gathering all that I needed, I imported them into illustrator and image-traced them. To a few, photoshop was necessary to make a few tweaks. Color changes and proportional adjustments were made to create a cohesive vector library of icons in illustrator, keeping in mind the brand identity. Once they were ready, They were all imported into Figma and made into actionable buttons.
In progression, The top and bottom ribbons were designed in a light blue to calm the eyes. On the top are three main items -the hamburger menu, the app logo (Orange Truck), a profile name and Icon. On the bottom ribbon are four actionable buttons - Home, Map, Menu, and Checkout. These are organized in sequential order to help the user navigate in a linear manner. Of course, The user will be able to jump from one to the other if needed. The Buttons in the bottom ribbon each have a variant where the background of the button turns from off-white to light-orange when selected or on the page. For example, If a user clicks on Checkout, the button turns light orange and the user will be transitioned into the checkout page.
9. High Fidelity Prototype
Similar to the Low fidelity Prototype, this stage demonstrated the user flow through the app. The biggest difference is, now, the images are inserted, main text on buttons and headings, colors, and brand identity are established. I included main descriptions and more options through the menu to select from. Also, Included motion transitions from one page to the next to give users more context in where they are and where they are navigating to in the app.
Consistency and Layout are key to a visually appealing app. I took extra care to make sure each page is laid out on a consistent grid, and utilizes the sticker sheet components. All components and their variants are prototypes to react based on their condition- selected, hovered, and or dragged, and page to page transitions were smooth and flowed well for users.
At this stage, I relied on the Digital wireframe exercise as a general guide or outline for each page, however, carried over with some improvements. First, the checkout page, where I have included a back to menu button, in case a user accidentally pressed checkout before they were ready and wanted to add more items. Next, is the Hamburger menu. The major improvements applied to the payment method page are including a “set as default payment method” button and a “edit existing card info”. These allow for further customizability for the user.
10. Usability Study
Similar to the first usability study, I asked users to sign in, find a nearby truck, order items from the truck, checkout and navigate to the truck for pickup. While they are navigating these tasks, I was silent and observant of any hesitations and noted them. At the end of the task, I asked the following questions:
What did you like about the experience?
Why did you struggle with ______ task?
What do you think would make that step more clear for you?
Is there any additional feedback you would like to provide?
This time, I observed some motion errors and glitches to the components when clicked, that were later corrected to flow more smoothly. Lastly, user feedback suggested a more efficient way to get around the app when using the app for a second time. They wanted to be able to view a previous order and reorder and believed the favorites section of the menu was not good enough to achieve this goal. In response, I included the hamburger menu order history pages to have a “reorder form same location” and a “reorder form different location button”. The first is straight forward. The complete order will be repeated. The second button allows users to order the same items but from a different location. Leading them to the find a truck page so they can find the most convenient route to their desired truck. This makes a more time efficient experience for the user and addresses their pain point.
Reflection
A project is never truly finished; there’s always room for improvement. This ambiguity about “completion” is one of the most thrilling aspects of the process. User feedback inspires me to refine my designs, and I find great excitement in enhancing the user experience. This passion for continual growth is a key reason I love design and look forward to future opportunities. By evaluating user feedback, staying updated on current trends, and exploring new accessibility methods, I’m committed to revising and adapting my work. I plan to carry this approach into my future role.