Reign Total Body Fuel
Reign Total Body Fuel

Brand

Reign Logo

Project

Product website
Regin Total Body Fuel™

Overview

Reign-Total Body Fuel, a new product line up from Monster Energy's product portfolio. Reign was created to connect with the workout industry. A new responsive website was needed in conjunction with it's store product launch. An interactive experience with a strong brand presence, where users can learn more about product information with a path to purchase.

Role

UX/UI Designer

Product Design, Interaction Design, Web Design, HTML/CSS Prototyping, A/B Testing, Creative Direction

Team

UX/UI Designer,Front-End Designer, Back-End Designer

Duration

3 Months

background-hexagon pattern

User Research

For this new product launch there was careful design decisions to consider. The upside was that the organization has other products within the spot fitness category, giving them the necessary insights to understand the target users. We were able to set expectations based on consumer insights.

Design Considerations

Product, Product, Product

A reoccurring theme in initial brand surveys was that the health and fitness demographic really cares about what they are putting into their bodies more than ever. So considering nutrition facts and focusing on product benefits was key to success. Consumers really care about product info, and is the main purpose for them to engage with the website.

Clear Path to Purchase

In addition to product knowledge, the secondary action we are trying to drive is sales, so giving the consumer a path to purchase or to find available products near them was important in considering what functions we would need to include in our site design. Partnering and being able to purchase online with major e-commerce like Walmart and Amazon brought increased sales.

Engaging Experience

This brand initiative allowed me to explore competitors in the food and beverage space, Doing some competitive research informed the design decision to make the site engaging by including an influencer program and an interactive way to view different flavors.

Reign Home Page Mockup

The Results

Strong Brand Consistency

Consistent Brand look & feel. Alignment of in store promo graphics, social media, and YouTube content.

Ambassadors & Promotions

In collaboration we were able to help develop an influencer campaign function. Included the ability to host promotion content.

Product Finder & Buy Now

Partnered with Destini to offer a robust product finder.

Increased online Partnership with Walmart and Amazon to offer Reign products.

background

Target Users

Action Jackson Persona

"I like supplements that perform in performance as well as taste"

Action Jackson
  • Age: 23
  • Occupation:Fitness Enthusiast

Goals

  • Maximize gym efficiency
  • Bio hacking
  • Discover tasty, healthy choices
  • Brand Ambassador

Frustrations

  • Bad flavor profiles for fitness supplement
  • Poor brand integrity
Maxx Steele Persona

"It's not only how you train, but what you eat"

Maxx Steele
  • Age: 27
  • Occupation: Fitness Instructor

Goals

  • Enjoys teaching about fitness
  • Discover ways to improve performance
  • Discover new strategies to workout

Frustrations

  • False claims of healthy products
  • Static workout routines
  • Consideration for healthier food choices
Cindy Moma Persona

"I'm not a coffee drinker, I need quick energy to help me through the day"

Cindy Moma
  • Age: 37
  • Occupation:Working Professional

Goals

  • Needs energy to keep up with the demands of work and life balance.
  • Cares about nutrition facts
  • Uses Workout Apps to track progresss
  • Convenient Online Shopping

Frustrations

  • Maintain consistent workout schedule
  • Overwhelmed by choice when it comes to healthy options
  • Dislikes health products that taste bad
Reign Site Wireframes

Inception

Wireframes

Lo-Fidelity Prototypes

To accelerate alignment and reduce risk, we used wireframes to define the content hierarchy and structure the experience around key business priorities. These artifacts gave marketing a clear visual framework for how the site would scale and allowed us to quickly test interaction models for product education, brand discovery, ambassador engagement, and promotional pathways before committing to development.

Reign Model

The Experience

Prototypes

Hi-Fidelity Prototype

High-fidelity design was where the experience truly came to life. Through refined visual systems, responsive layouts, and intentional interaction patterns, I translated strategy into a cohesive, immersive brand experience. Designing directly in the browser allowed me to shape the nuances of motion, hierarchy, and responsiveness in real time—ensuring the final product wasn’t just visually strong, but felt seamless and alive across devices.

Reign Home Overview3

Retrospective

Project Design Challenges

Time Sensitive Launch

The project was tied to a fixed product launch date, compressing the design and development timeline significantly. To navigate this constraint, I introduced a focused design sprint to rapidly validate ideas, reduce uncertainty, and maintain forward momentum. At the same time, we were collaborating with a newly formed marketing team, so it was critical to bring them into the process early—building trust, alignment, and shared ownership from the start.

Structuring Product Feedback

Working with a new marketing partner also introduced the risk of subjective or iterative feedback loops that could derail timelines. To prevent this, I structured design reviews around clear objectives, user insights, and measurable criteria. By anchoring feedback in strategy rather than opinion, we streamlined approvals, minimized rework, and strengthened cross-team confidence in the design process—laying groundwork for smoother collaboration on future initiatives.

What I Learned

Design Leadership Under Pressure

This project reinforced that strong design leadership is less about having the perfect process and more about knowing when to adapt it. With an aggressive launch timeline and a newly formed marketing team, success required speed without sacrificing clarity. By proactively structuring a focused design sprint and creating an objective review framework, I learned that anticipating friction—before it happens—is what enables creativity to move fast and confidently. Leadership, in this context, meant protecting the integrity of the design process while flexing it to meet real-world constraints.

Alignment is a Strategic Advantage

Under tight timelines, alignment becomes a competitive edge. I learned that building trust early—through structured collaboration, transparent communication, and clear rationale—prevents costly feedback loops and accelerates decision-making. By creating shared ownership between marketing and development, we avoided misalignment and delivered a cohesive launch experience on schedule. Strong collaboration wasn’t just helpful; it was the reason the project succeeded under pressure.

Reign Mobile Screens hex pattern