If you’ve never had First Watch, you’re 100% missing out. From their delectable evergreen menu to their scrumptious seasonal offerings, it’s clear they walk the walk when it comes to their “food ethos” — their unique commitment to the finest quality dishes. Their solid reputation and brand equity firmly positioned them for success, yet they were definitely more on the analog side. They were in need of a totally reimagined online ordering experience: something new and never before seen, something fun and fresh, and most of all, something uniquely First Watch.

One of First Watch’s differentiators in the market is not just their rotating seasonal menus, but the care and heart they pour into them. In addition to sourcing the finest ingredients and meticulously crafting the menu items themselves, they brand each new menu with its own look and feel. Bringing these unique, ever-changing colors, textures, and graphics to the forefront of the experience by way of the menu and home dashboard sections was paramount, in addition to elevating their beautifully shot food photography.

We also incorporated custom iconography throughout, utilizing an offset-fill style, a deliberate aesthetic choice. It combines analog, hand-drawn quality with the precision of digital — much like the intersection at which the First Watch brand sits.

 

An extension of First Watch’s proprietary “food ethos” is their commitment to taking dietary needs seriously, and they recognized their users’ desire to know this. We designed and implemented a filter feature that curates menu items for users looking for vegetarian, vegan, or gluten-free items, and preselected (or pre-deselected) ingredients in those dishes so they are automatically modified to a user’s preferences. It’s still rather uncommon to see digital ordering experiences include dietary or allergen filters, so First Watch is among the leaders, not the followers, with this one.

But they didn’t want to stop there. First Watch was acutely aware of two key areas where they could carve out new territory for themselves.

The Egg Selector

On many First Watch dishes, users can choose from eight different egg style options (or substitute their eggs altogether). We knew we had to really make this fun and immersive for users, since it was such a defining characteristic of much of First Watch’s menu items. We collaborated closely with the First Watch team to design, animate, and build what we now call the egg selector: a pan-shaking, egg-flipping experience sure to delight First Watch diehards and newbies alike.

The Waitlist

If you’ve ever dined at First Watch, you’re probably familiar with their waitlist, for better or for worse. Users overwhelmingly indicated their desire for an improved waitlist experience that makes their place in line and their wait time more transparent. While we took that feedback to heart, we also recognized further opportunity for enhancement. Thus, the “egg line” was born: excited anthropomorphic eggs eagerly await their table being ready, and a unique “eggmoji” shows each user exactly where they are in line. (In addition to this adorable cowboy egg, we also have a chef and a unicorn — each one randomly assigned each time a user joins the waitlist.)

Not only is being on the waitlist fun, but joining and checking in is more delightful and easier than ever. When users select their party size, they get to interact with our signature egg carton quantity stepper (party sizes for the waitlist are capped at 12, so that concept pretty much designs itself). Also, implementing a third-party geofence feature allows us to check users in automatically right when they pull up to the restaurant, reducing their need to wait to speak to the host.

First Watch was so thrilled with this new waitlist experience that I proposed taking it one step further: gamification. The result? First Watch Egg Pong is now officially coming soon.

The home dashboard — the first thing most users will see when they visit the site or open the app — had to really pack a punch. Drawing upon the seasonal styling we incorporated into the menu section, we amped it up slightly to pull users into the aesthetic, the vibe, and the flavors of the current limited-time-only First Watch items. The top carousel area has three sections, each with its own looping video background to get mouths watering, and each with a link to one of the three core pillars of the experience: waitlist, menu, and ordering. There is even a more stylized carousel of seasonal items with immersive, heavily branded detail views of each, and a countdown clock to create urgency and show the current seasonal menu is nearing its end. Finally, what would an online ordering experience be without personalized offers and freebies?

Finally, First Watch recognized their current group ordering experience left much to be desired for their users. They wanted to reimagine this feature in an intuitive, organized way. Now, when users create an order (or edit an existing one), they can convert it to a group order with one click (or tap). Doing so generates a link that the host can text to their friends and family; using that link, guests can build their order and add items to a shared bag managed by the host, where each item can be given a name to indicate who’s ordering what. After everyone’s orders are in and the host checks out, the order confirmation serves as a handy reminder of everyone’s items. (It’s also a helpful reference for guests to see how much they owe the host — or how much they intend to conveniently forget to pay back.)

The Design System

Scroll through the First Watch design system below to get a sense of its scale and breadth.

Outcomes & Roles

This new experience is set to launch soon, and our teams could not be more excited. The First Watch team was so thrilled with the designs that they signed on for more subsequent work than we anticipated, and we can’t wait to see what new paths we’ll forge together.

    • Considered user feedback, particularly regarding the waitlist

    • Led the interface design and directed a senior designer

    • Established the visual tone for the desktop, mobile web, and app interfaces

    • Created and scaled a modular atomic design system

    • Provided UX assistance to another team of designers

    • Regularly presented to client stakeholders

    • Regularly collaborated with the product team to ensure we were aligned on requirements and our roadmap

    • Provided the product team with annotations around UI, UX, accessibility, animations, and microinteractions so design intent was clearly understood and developers could properly point tickets

    • Participated in sprint demos and agile ceremonies to ensure design integrity was maintained throughout the build phase

    • Worked closely with on- and off-shore developers to ensure our designs, animations, and microinteractions were possible to build within our timeline and budget

    • Pivoted as needed to ensure timelines were honored but design quality was not sacrificed

    • Collaborated with a copywriting director to inject the signature First Watch brand voice throughout the experience

    • Ensured copy was succinct and fit comfortably within our designs