In-N-Out
website redesign
OVERVIEW
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
PROBLEM
In-N-Out's website isn't engaging and doesn't meet modern UX and accessibility standards.
GOAL
Redesign the in-n-out.com website to enhance its classic branding and improve the user experience.
sneak peek of my final designs
PRELIMINARY WORK
PRIMARY USERS
I started by brainstorming the primary users of in-n-out.com. 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
SITE EVALUATION
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.
Project Goals
Create a simpler and more accessible user experience
Enhance the visual design and brand identity of In-N-Out
Create consistency across the desktop and mobile experience
INFORMATION ARCHITECTURE
in-n-out.com 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 in-n-out.com
COMPETITIVE ANALYSIS
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.
REDESIGN
ENHANCED BRAND IDENTITY
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.
Example of a content strip with my design changes
DESIGN SYSTEM
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.
HOMEPAGE
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:
-
Redesigned menu and footer for simpler site navigation and more direct access to subpages
-
Stacked content to reduce cognitive load and target key site users
-
Visual design and accessibility changes, including natural imagery, more brand elements, and indicators of external sites
BEFORE
AFTER
MENU
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:
-
Imagery of just the specific menu item, with the combo meal moved below the description
-
Menu item descriptions to optimize SEO and entice customers to try the food
-
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.
BEFORE
AFTER
CAREERS
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:
-
Submenu in the top navigation to directly access tailored careers pages for each type of employment
-
Renaming Employment to Careers to suggest long-term growth and benefits
-
Taking information out of tabs and making the page scrollable to surface valuable information and reduce the number of clicks
-
Employee images and value statements to represent In-N-Out's positive work culture and commitment to its employees
BEFORE
AFTER
REFLECTION
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.
