Unifying Content and Commerce in a Single Experience

Dude Perfect Mock Ups

We teamed up with Dude Perfect to create a central online hub for their 57 million subscribers that incorporated the brand’s video content, e-commerce, and digital presence under one roof.

check it out

Services

Discovery

Strategy

Messaging

Market research

Content strategy

Copywriting

Wireframing and prototyping

UI/UX design 

Design system

Messaging

Sitemap


Tools

Shopify Logo
Shopify
React Logo
React
Figma Logo
Figma
Dude Perfect Mock Ups
Dude Perfect Mock UpsDude Perfect Mock Ups

Product Strategy

Over the years, Dude Perfect has created a massive video library, top-of-the line merch, mobile games, and a nationwide tour, but they all exist in separate places online. We partnered with them to create a digital experience where fans can watch videos, shop merch, purchase tour tickets, and more—all in one place. Prior to starting, we conducted thorough market research to strengthen the brand’s e-commerce presence and developed a user persona with a brand script to define Dude Perfect’s audience. Together, these allowed us to create a strategic approach that brought clarity to our design and development, translating into a fun user experience, increased conversions, and overall brand consistency.
Dude Perfect Mock Ups
Dude Perfect Mock UpsDude Perfect Mock Ups

Product Design

Dude Perfect equals fun. So while we set out to build a website that increased the brand’s conversions and e-commerce, we filtered all of the design through the lens of “fun” to give their target audience the experience they’ve come to expect. That focus applied to every detail of the user flow, from best practices around direct response design to the clickable buttons, tabs, and the vibrant colors and layout of each page. Rather than scrolling through another typical site, visitors will now enjoy a crisp hifi design, playful UX copy, and surprising interactive features reflective of the Dude Perfect brand.
Dude Perfect Mock Ups
Dude Perfect Mock UpsDude Perfect Mock Ups

Product Engineering

To maximize design flexibility, we built the site with React so that it integrates with Shopify to serve as the backend. This headless approach allowed us to craft unique and personalized elements of the site on the frontend while relying on Shopify for all of the backend and inventory logic, which made it possible for us to deliver the project without the constraints of a template. Following the launch of the website, we’ve continued to partner with Dude Perfect to refine the project where needed and continue developing new features to further their brand.
Dude Perfect Mock Ups
Dude Perfect Mock UpsDude Perfect Mock Ups

Dude Perfect
Next / Previous Arrow
View Previous case Study
PREVIOUS
View NEXT case Study
NEXT
Next / Previous Arrow