top of page
Jack in the Box
DESKTOP WEBSITE & INFORMATION ARCHITECTURE REDESIGN
-CASE STUDY-
TASK
Select a real-world company that will function as the "client" that hired you to assess and improve its information architecture and design. Take a detailed look at the client's current approach to IA in the information environment channel that you select, assess the strengths and weaknesses of that approach from both an analytical and empirical perspective, and present concrete recommendations on how the client can improve the IA to better meet the information-seeking needs of its customers.
PROJECT INFORMATION
Our team selected Jack in the Box as our client, and worked to improve the information architecture and design of their desktop website. One of the main functions a user wishes to complete while on a fast-food website is browsing. Users want quick access to content they wish to seek, despite the fact that they might not know exactly what that is yet. This case study culminated in a high-fidelity, functioning prototype, presentation, and strategy document outlining findings and improvements.
INCLUDED IN STUDY
-
Information environment
-
User research
-
Usability testing
-
Organization system
-
Labeling system
-
Navigation system
-
Controlled vocab.
-
Search system
-
Site maps
-
Competitive analysis
-
Strategy document
-
High-fidelity prototype
MY ROLE & RESPONSIBILITIES
LEAD RESEARCHER & UX DESIGNER
I conducted in depth research and assessments of Jack in the Box's current information architecture and environment, and additionally compared it to market competitors. I led usability tests to determine the best improvements to be made to the site's architecture and overall design appearance. I was solely responsible for designing wireframes, similarly branded content and designs, and an interactive prototype that improved user experience and browsing capabilities.
-
Card sorting
-
First click testing
-
Controlled vocabulary
-
Navigation system
-
Site map
-
Wireframes
-
Hi-fi prototype
-
Report contribution
01 Overview
Overview
PRODUCT DEMO & OFFICIAL REDESIGN
02 Heuristic Evaluation
Heuristic Evaluation
CURRENT SITE MAP
INITIAL EVALUATION
STRENGTHS OF CURRENT APPROACH
Jack in the Box does a great job of meeting the visual needs of its customers by providing a plethora of photos of food to encourage or entice users to buy their products. They do so while maintaining a cohesive block-like structure for all of their content, encapsulating information in squares or rectangles throughout their website and mobile app. Jack in the Box uses a color scheme that remains consistent across all pages of their website, and uses their colors to their advantage by calling attention to particular elements or items. Additionally, the global navigation remains visible at all times, and highlights where a user is on their page, creating a great sense of space and contextual awareness that users find comforting.
WEAKNESSES OF CURRENT APPROACH
NUTRITION, INGREDIENTS & ALLERGENS
Finding nutrition, ingredient and allergen information lack visibility due to small labels and poor placement. Additionally, there is a poor user experience surrounding this information, as clicking on these links opens pdf documents where users must find appropriate information for themselves.
POOR MENU BROWSING
Exactly half of the page remains stagnant through scrolling, and solely lists the food categories. This leaves only 50% of the page available for the actual menu item content. Not only does this design decision not promote an emphasis on Jack in the Box’s food options, it lends itself to initial confusion. Users are accustomed to the ability to scroll through a page when their mouse pointer is most anywhere on a webpage, but this design remains stagnant through scrolling unless the pointer is positioned on the right half of the page.
There is no ability to scroll through a full menu without having to individually click on every single category. This breaks up the ability to comfortably browse and requires a user to know exactly what food category a particular item of interest falls under.
Additionally, the categorization and grouping of food items are unclear and confusing. Some examples include the use of “Late Night” as a food category title, grouping items such as chicken burgers/sandwiches with salads under the “Chicken & Salads” category, and not including hash browns with the rest of their sides.
VAGUE LANGUAGE
Currently, there is vague language with their use of the title, “OFFERS & STUFF,” preventing the ease and immediate understanding users seek while navigating.
CHAOTIC & DIFFICULT TO NAVIGATE
The website is chaotic and difficult to tell where you are on the site, where you have been redirected to or the best way to navigate to desired information. Additionally, pertinent information, like nutrition and ingredients, get lost in the overwhelming display of content.
03 User Testing
User Testing
CARD SORTING
We conducted cord sorting studies in order to help create a controlled vocabulary for implementing a search system, and to additionally help sort menu items into categories.
CLICK MAP STUDY
A click map study was conducted on the "OFFERS & STUFF" page to understand and confirm the confusion with accessing offers. We asked users where they would first click to complete two different tasks, which resulted in 80% and 90% fail rates among our user testers.
04 Competitive Analysis
Competitive Analysis
VISUAL INGREDIENTS & NUTRITION INFORMATION
McDonalds has ingredients shown visually and individually, making them easier to understand and read. They also put the nutrition facts and ingredients list below the item to be readily accessible compared to Jack in the Box, who have this in a PDF file that requires users to search through them to find what they are looking for.
SEARCH SYSTEMS
Nearly all other competitors have a search system, which Jack in the Box does not currently have, that allows the user to look up any past or current items offered across all of their locations. This is important for Jack in the Box to implement as they are constantly rotating items in and out of the menu, which users may desire to search.
VISUAL NAVIGATION & SUB-CATEGORIES
Various competitors include photos in their navigation that allows users to get a visual cue as to what is under each category. This allows users to better browse and anticipate items within categories. Additionally, many competitors have sub-categories or "branches" within their main menu categories.
05 Recommendations
Recommendations
RECOMMENDATIONS FOR WEBSITE REDESIGN
SITE MAP
ORGANIZATION SYSTEM
Move towards a more homogeneous organization scheme. Organize ingredients, nutrition and allergen information so that relevant details for each menu offering are displayed along with the item itself. The home page will display a banner for relevant offers and deals, and lead directly into the food menu to promote better browsing.
home page wireframe
LABELING SYSTEM
An update will be made to some of the more confusing labels such as, "Offers & Stuff" and "Chicken & Salads," which contained chicken sandwiches, chicken-salads and vegetarian salads. We will use findings from our card sorting study to help inform our decisions.
NAVIGATION SYSTEM
Navigation to-and-from the home page need to be fixed. Flawed navigation can be seen when a user clicks on items from the home page and tries to go back, taking the user to a different page altogether. Our first click tests showed that the "Offers & Stuff" page was difficult to navigate, and will be changed to showcase an interchangeable offer banner at top of page, with tiles of offers and promos below. The food page will be updated to navigate between categories at top of page horizontally, and navigate between sub-categories vertically on left of page.
food page wireframe
SEARCH SYSTEM
Create a search functionality that will allow for users to search through the myriad of Jack in the box options. This is useful as Jack in The Box has a wide variety of menu options that come and go, change by location or are seasonal. Additionally, having a search system may be expected by users and find its absence off-putting, as most competitors have one.
CONTROLLED VOCABULARY
For our search system, we created a list of words that would be interchangeable with one another when searching. Our controlled vocabulary list will help users find what they are looking for or related content, without having to exactly type in what something is called. Below is a sample of our controlled vocabulary.
06 Redesign
Redesign
bottom of page