Responses by Liz Henderson, head of web, Wunder Werkz.

Background: Our brand team had just wrapped a refresh of burrito restaurant chain Illegal Pete’s visual language for its 25th anniversary. The focus of that exercise was to honor the history of the brand while returning the human hand and a DIY mentality to the look. For the website, we wanted to give Illegal Pete’s loyalists something that better resonated with the fun (and a bit edgy) atmosphere of being in-store while allowing those customers who were new to Pete’s to have a more visceral brand experience and interaction.

Design core: We modeled the feel, layout and interactions after cut-and-paste punk rock posters, and we wanted each scroll to feel as if you were assembling the page. We utilized a huge amount of custom illustrations from the design team, which we linked to their corresponding pages on our Loteria Machine, a custom microsite that tells the story behind every illustration, each a piece of Illegal Pete’s history.

We are especially proud of the site’s dynamic nature, both from a design and a structural perspective. From the Illegal Pete’s side, the site feels unrestricted in terms of the ways they can manipulate the content, and from the user side, the site’s design (while structured) has a playful, unconstrained feel.

Challenges: When you add a CMS to a site, there’s always a balance between the flexibility of content and the preservation of the design integrity. We did a lot—probably to the point of damaging some of the designers here—of logical thinking on this project to ensure that almost any order and input of content was accounted for and that we had control over how that looked. We created extremely dynamic components, making the site both highly flexible and strict in its design.

Time constraints: We believe that if we aren’t learning something new, then we aren’t really doing our job of trying to push the status quo for our clients. Also, most of us aren’t in this business for the monotony—we’re in it to grow. With anything we do, we’re always learning a new skill or trying to push the design, user experience or create a more friendly end product. For this project, we utilized a number of technologies in new ways and found new tools to make the site as dynamic and kinetic as it is.

Navigation structure: Like the rest of the site, this was a balance between flexibility and design integrity. We always identify and recommend best practices in terms of navigation and user flow but also realize that clients may want to change their primary and secondary navigation as their business changes and grows—or as times change.

It’s always important to look at where the client is coming from to really learn their pain points and how to prevent future pitfalls from occurring again. For Illegal Pete’s, the team was coming from a situation where they had added too many links into their primary navigation, creating confusion and a sense of choice paralysis. For the new site, we still give Pete’s the power to choose what to list and what to order those appear in, but for the header, those links are limited to seven—which is still a lot.

In the footer nav, we created a system of subcategorization: this helps them as an organization think consciously about the hierarchy of the content that goes on their site and helps the user more easily navigate to what they’re looking for.

Special navigational features: We wanted to add little “fun” factors whenever we could and where it made sense without getting in the user’s way. So, when hovering over “Order Now” on desktop, you get a fun little surprise. We also created some secret navigation: some of the icons on the site are clickable and link to the Loteria Machine microsite, a fun discoverable moment for those clickable around and a fun Easter egg hunt for those who have found it.

Technology: Contentful for the CMS, Next.js for the front end, GSAP for most of the animations, SendGrid for form submission and delivery, Vercel for hosting, and so many great third-party components.