Product/UX DesignerRD::UX
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

For speed we used wireframes to map out the content hierarchy. Giving the marketing team some visual to how the site will be structured and to test different interaction ideas around product info, brand finders, ambassador programs, and promotions.

Reign Model

The Experience

Prototypes

Hi-Fidelity Prototype

Providing Hi-Fidelity comps helped the teams visualize the end product for responsive web design, interaction design, and layout. My ability to design in the browser gave the teams an added layer support to show off the design in the browsers.

Reign Home Overview3

Retrospective

Project Design Challenges

Time Constraints

Due to the time sensitive store product launch, the design and evelopment team had a condensed timeline to go live. So understanding this constraint and as well as working with a new marketing team we pushed for a design sprint in order to validate design ideas quickly as well as build a trusting relationship of this young and new marketing team by including them in the design process.

Client Feedback

Building off of the understanding of working with a young marketing team, and with my experience I was able to avoid a non constructive feedback loop by structuring our design reviews in an objective manner. Anticipating this challenge resulted in a smoother approval process as well as gained the trust of design for future projects.

What I Learned

Design Leadership

This project was all about speed and creativity. Anticipating the design challenges, I learned that having a solid UX/Design process and knowing how to adjust the game plan to fit the current climate really demonstrates how all of my past experience and education apply to real world design hurdles, and exemplifies good design leadership.

Team Collaboration

Since this project had an aggressive time constraint. Keeping alignment between marketing and development was key to hitting time sensitive launch. Being able to instill trust with professionalism, collaboration and clear communication teams were aligned throughout the project lifecycle which contributed to the project success.

Reign Mobile Screens hex pattern

Back to Top

View Next Project