top of page


website redesign


Since I can't publish the proprietary work done for clients, I wanted to complete a personal project that showcases some of the skills and design practices I gained from my industry projects. I chose to complete a redesign of the In-N-Out desktop and mobile website experience. 

Tools: Figma


Skills: UX design, visual design, adaptive design, accessibility

Role: designer

Time: 6 weeks, Winter 2023


In-N-Out's website isn't engaging and doesn't meet modern UX and accessibility standards.


Redesign the website to enhance its classic branding and improve the user experience.

sneak peek of my final designs


Preliminary Work

I started by brainstorming the primary users of Following some assumptions, I designed with 2 different user goals in mind:

  • New Customer: wants to explore the In-N-Out menu

  • Employment Seeker: interested in In-N-Out's restaurant or corporate positions

Secondary users I wanted to engage are large event coordinators interested in booking the Cookout Truck and dedicated In-N-Out fans looking to purchase merchandise.


In-N-Out boasts high starting wages and competitive benefits


I went through the website and noted my initial thoughts. I immediately noticed that the site does not practice modern UX or accessibility standards. There was also room for improved visual design and information architecture. These observations helped me identify my project goals.

Menu Annotations 2.png

Project Goals

Create a simpler and more accessible user experience
Enhance the visual design and brand identity of In-N-Out
Hamburger Menu.png
Create consistency across the desktop and mobile experience
INFORMATION ARCHITECTURE had no submenus and numerous hyperlinks, tabs, and popups. I created a site map to understand how all the pages are linked and to help me plan a more effective layout.

Site map of


I conducted similar site evaluations of competitors, including Shake Shack, Five Guys, and Chipotle. Each site gave me insights into commonalities among fast-food restaurant websites, their brand identities, and their user flows.

Shake Shack Logo
Five Guys Logo



In-N-Out has iconic symbols that are core to its identity. A few consistent ones are the crossing palm trees, the yellow arrow that always points toward the restaurant, and the double red lines. I incorporated these symbols throughout their website to tie the page designs together and strengthen In-N-Out's visual identity. 

In-N-Out is also known for its friendly face-to-face service. However, the website has very staged photos that lack real people engaging with the products. I chose to use more candid photography to convey In-N-Out's people-forward values.

Cookout Truck.png

Example of a content strip with my design changes


I developed a mini design system in Figma to build my screens. I added a couple neutral colors to the In-N-Out palette, designed new assets, and created desktop and mobile variations.

Design System.png

I started my redesign with the homepage. The existing homepage features tiles that have inconsistent styles. Further, these tiles rely on text within images, which can't be read by screen readers. There are also strange placements of privacy tools and social media icons. My changes are:

  1. Redesigned menu and footer for simpler site navigation and more direct access to subpages

  2. Stacked content to reduce cognitive load and target key site users

  3. Visual design and accessibility changes, including natural imagery, more brand elements, and indicators of external sites

Homepage - Mobile.png
OG Homepage

Although the In-N-Out menu is simple, the website's menu page is frustratingly complex. Non-menu items like nutrition facts and food quality are placed under the menu, and the ingredients are hidden in an image carousel. My changes are:

  1. Imagery of just the specific menu item, with the combo meal moved below the description

  2. Menu item descriptions to optimize SEO and entice customers to try the food

  3. Collapsible sections to view nutrition facts and ingredients. Users can view more information at their discretion without the need to navigate to a separate page.

OG Menu

The current careers page ​hides a lot of information behind hyperlinks that are used as tabs. There are also unclear paths for finding the external career sites for corporate and cookout trailer employment. In-N-Out also doesn't promote itself as well as its competitors. My changes are:

  1. Submenu in the top navigation to directly access tailored careers pages for each type of employment

  2. Renaming Employment to Careers to suggest long-term growth and benefits

  3. Taking information out of tabs and making the page scrollable to surface valuable information and reduce the number of clicks

  4. Employee images and value statements to represent In-N-Out's positive work culture and commitment to its employees

OG Careers
Careers - Desktop.png


This project was great for me to practice my UX, visual, and accessibility design on desktop and mobile devices. As a food lover and proud Californian, I really enjoyed working on a brand that I grew up with.

I also gained insight into the complexity of website architecture, especially in the careers section. I explored competitor websites and dived deep into the various tabs and links on the existing site to determine the best way to organize the information.

This redesign was fun for me, and it reminded me why I love doing consumer-facing design and working with organizations that have personal significance to me.


Smart Calendar

Calendar in iPad.png

Visual Design


About Me

bottom of page