The Challenge
Opportunity, Goals & Approach
First Watch's site was missing the attention to detail that's obsessively crafted into each menu item. Uninspiring design and a less-than-perfect site architecture made it difficult for users to find local First Watch locations, browse content, learn more about their menu, and sign up for their Sun eClub newsletter (all critical KPIs). Hungry to get to work, we dug into site analytics and backend data, found key problem areas with the IA, UI, and UX, and cooked up a fresh design and experience to solve their core site and user issues.
The Process
IA, Design, & Development
Information Architecture
The foundation of every new web redesign starts with building a blueprint. Though nearly 80% of First Watch’s digital traffic was through mobile, the old site was lacking a fluid, responsive experience. As a result, everything we built had mobile in mind. First Watch also had an active blog and some menu information, but no clear hierarchy of how that information should be showcased on their site.
We broke their site structure down to its core components and simplified the navigation from 6 to 4 main areas that represented the most common user pathways, while including an expandable ‘pocket’ navigation panel for pages that were visited less frequently or were less important. In addition to reworking the navigation, we sought out accessible areas to expose the user's closest location, making it easier to get directions and contact information for your closest First Watch. We also highlighted newsletter sign up and app download sections throughout the layout to encourage more interaction and use (one of their main KPIs of this redesign). The result was a more unified and clear delivery of content across the site.
Design
Working alongside First Watch’s agency partners, we incorporated the real textures, photos, and color schemes found in their interiors to more closely align with their in-restaurant experience and branding. We wanted the site experience to feel like taking a seat at the table and grabbing a menu. This refreshed look included an animated visual carousel to highlight their menu philosophy, story, and community efforts on the homepage.
Additionally, our interaction designers created the framework for a single-page menu experience that allowed users to browse and then click through to deeper descriptions, nutrition information and photos—all without the need to refresh and stall the page. The final layout felt as lively and fresh as Sunday brunch.
Development
In preliminary discussions, First Watch had noted how difficult it was to maintain the site. In development-speak that meant we needed to overhaul the site’s backend structures. The solution was a simplified code base injected into a custom and secure Wordpress theme and sprinkled with dynamic content. With these new integrations, producers can easily add and edit content without development support, and more importantly, a significant amount of content (location and menu data) is now delivered to the site dynamically from regularly updated databases, removing the need for manual updates.
The development team integrated with APIs from Google Maps and MomentFeed to pull in real-time location data. Custom integrations were also written for the Sun eClub sign-up and contact forms, delivering this information in real-time to First Watch systems and stakeholders.
The new code base has proved to be efficient and scalable for First Watch while being smarter and faster for their customers.
