Tina's Tacos

Project Overview:

The problem: Tina’s Taco Truck currently does not have a functioning responsive website that allows customers to skip the line and order tacos.

The goal: Construct an efficient responsive website for Tina’s Taco Truck that makes the ordering process seamless and user friendly.

The product: The Tina’s Tacos website helps customers order from the delicious taco truck within a matter of minutes and allows users to track their order for an easy pick-up process

Project duration: August 2024

My role: Team Lead, Visuals, Interaction

Responsibilities: User research, Wireframing, Prototyping, Usability testing

I interviewed local college students and people that worked near the taco truck to gather their pain points when it comes to food ordering apps and what they would like to see in the taco truck food ordering website.

Meet The User

User Journey Map

Goal: Use a website that will allow Sam to quickly and seamlessly order tacos from the taco truck

I wanted a really simple design that gets right to the point. The website should be efficient and be clear to the user. Ultimately the above homepage seemed to be the best idea that captures all those qualities.

Screen Size Variation(s)

I did not want to compromise the user experience on a smaller screen. As such, I designed the homepage for a mobile screen that is more concise and focused. The visual of the design is not too detailed but also doesn’t skimp out on any details.

Mockups: Screen size variations

Android/smaller screen

REC-20240827183519.mp4

https://www.figma.com/proto/Icm1gI1iAp5teK8KD0vQdF/Tina-s-Tacos-Website?node-id=77-664&t=qL4Boj0FZ0MsErOR-1&scaling=scale-down&content-scaling=fixed&page-id=77%3A366

Accessibility considerations

The website features highly contrasting colors so that any user needing vision assistance can easily navigate through the app. Colors like black, white and pink were perfectly chosen as per the client’s marketing guidelines as well as accessibility considerations.

By using typographic hierarchy, the menu and ordering process is easier to navigate. Names of items are clearly larger than its descriptions which allows for easier reading. Furthermore, this format allows assistive read-aloud technology to function better.

Alternative options to access different screens and the duration and motion of the website’s design indicate its inclusivity. There are multiple ways to access a screen and the time limit of motions have been constructed to make sure the website is including all types of users.

Takeaways

Impact

My peers have noted the clean and simple to use design. The typography and color scheme was also a notable feature that people enjoyed. They could see themselves using and appreciating the concept of the website.

What I learned

I learned how you can’t merely copy and paste what you have done on an app design on a website design. Although wewant the experience to be similar and some what mirroring each other, due to the difference in sizes of screens and applications, designers must think of the user experience on every platform.