Zaxby’s website
- ClientZaxbys
- RoleSenior UX designer
- Date2016
In 2016, I designed the user experience for a southern restaurant chain called Zaxbys. I led the UX design experience and collaborated with an outside agency on the visual design. I researched and interfaced with the team to clarify business goals and to align the user experience with larger brand and product objectives.
* Note: the Zaxby’s website has been redesigned and engineered since we designed and launched our version in 2016.
Goals
The primary business goal was to update the company website to better align with modern responsive web trends, optimize for location-specific ordering such as in-home and on-the-go purchases, and promote new franchising and catering opportunities.
The problem
The older site had an underdeveloped brand identity, poor information architecture, an overly elaborate menu, and put everything above the fold. Most glaringly, the site was not optimized for mobile devices. These problems made growing into new markets difficult.
One egregious problem with the old site was the main navigation, which included a link to every page on the site, tucked them away into drawers based on often poorly fitting categories. There was no prioritization within the design of these links. There was no way to distinguish the most essential pages from those of lesser importance. They were all treated equally, even though from a business standpoint, “Order now” is more important than “Coupons.”
Research
After talking to users and reviewing data on page click activity, we found that this approach needed to be reconsidered. Drop-offs were high, and ordering was low. We concluded that it had to do with a misguided approach to the information architecture. We found that this approach directly impacted people, requiring them to exert too much cognitive energy to find things. On top of that, the decision to cluster all information above the fold was a reactionary design strategy that no longer made sense in the limited-screen real estate world of mobile screens. Unlike a few years earlier, people were accustomed to scrolling (Think Twitter or Instagram). This is especially the case for mobile, where screens can only fit so much.
The design
To fix these problems, we removed all non-essential links from the navigation and moved them to the footer. We focused the navigation on core user journeys that benefit Zaxby’s bottom line, such as “Menu, Order, Cater, About, Locate.” We then changed the page designs to extend down past the page fold. We used this extra space in the document body to cross-promote pages of secondary importance (the ones removed from the header). We used imagery and iconography for the buttons to promote those links better. For example, while on the “About” page, a person may also be interested in Franchising and opportunities to Join the team.
Wireframes and site map
We created detailed site maps and clickable wireframes inside Axure to interface with Eng and clients. This helped us clarify the breadth and complexity of the site, and better sell our vision for proposed changes.
The results
The impact of these changes was significant. We increased traffic throughout the site and lessened the drop-off rate for first-time arrivals. On top of that, we increased the opening of franchises and the catering of events. We launched the new site in 2015. It coincided with a shift in press attention and an increase in new franchise openings. Forbes magazine added it to the Best Food Franchises list a year later in 2016.
Forbes article that listed Zaxbys as a top franchise in 2016. Read article >