P.F. Chang's

Problem: P.F. Chang's discovered two problems customers were having with online orders. The first was that website analytics indicated a large percentage of people starting an order never finished placing the order. The second was that many people were showing up in restaurants to pick up online orders that the restaurants hadn't received their orders via the online system.

Solution: I talked to customer service reps to hear what customers were saying to them. I then created a user test script for online orders. After conducting in-home testing in the Dallas market, I discovered people were confused by a double order confirmation built into the original online ordering system. Others were confused by the interface and just called the restaurants. I simplified the entire site to focus on the four main tasks users wanted to accomplish: find a restaurant location, see the menu, place an order, and make a reservation.

Result: After the redesign, restaurants and stores stopped complaining about missing orders. Online order completion also improved by several percentage points.

Project Type

UI/UX

Tools Used

• Adobe Photoshop
• Adobe Illustrator
• User Research
• User Testing
• HTML
• CSS
• JavaScript

Original website interface

 

The first thing that became apparent during user testing was that the website's menu structure was too confusing. Highlighted in red, you see two rows of menu options with a total of 13 choices. It took people several seconds (or longer) to figure out what or where they needed to click in order to, for example, make a reservation.

Users are focused on accomplishing a task

 

Google analytics showed that 83% of all homepage clicks were to find a restaurant location, to see the menu, to place an order, and to make a reservation. User testing validated this.

Wireframe showing the simplified interface

 

Removing unnecessary information, I was able to highlight the things that were most relevant to P.F. Chang's customers. With the simplified interface, users can see at a glance the actions they want to take.

Related information is grouped together

 

Based on the user testing, I discovered the most users wanted logical groupings. For example, users wanted the menu and the online ordering to be together so they could add items to their order as they browsed the menu. In the old site, menus and online ordering were completely separate.

Combined menu and ordering function

 

A simplified menu allows the user to browse the menu by category and add anything from the menu to their order without leaving the menu.

Redesigned P.F. Chang's Website

 

The final version of the website wasn't very different from the original prototypes. The goal of the skinned site was to promote the simplified interface, be highly function while also being intuitive, and look smart and modern.

Mobile P.F. Chang's Website

 

I designed the site using the mobile-first philosophy. Media queries reflow items into a one-column format on small screens.