From packaging to pixels: expanding a physical product’s style foundation to the digital realm.
|
We helped UPP Protein reach their goal of making plant based sports nutrition available to all with a stunning new website. |
Introduction
UPP Protein is an up and coming sports nutrition brand that’s ready to take the industry by storm. The world of sports nutrition has experienced remarkable growth in the past couple of years. With multiple brands to choose from who all claim to be *the one* to help you reach your goals, set new records and grow your overall strength, UPP Protein knows how to stand out from the crowd. Purely plant based with naturally sourced ingredients, UPP Protein provides clean and healthy fuel for any high performance lifestyle.
Challenge
With the packaging and product roaring to go, UPP Protein needed a stunning marketing website to showcase their products and more importantly: sell them. The website needed to be a great representation of UPP Protein’s brand, with clear nods to the packaging implemented into the visual design of the website.
Expanding on an existing Style Direction
Building upon the style foundation established by UPP Protein, we were entrusted with the task of refining and adapting it to the web. To enhance the overall visual appeal and maintain brand consistency, we suggested incorporating additional logo-inspired elements and creative ways to showcase product photography. These additions not only create a friendly look and feel but also align well with their core message: the only way is UPP.
From purple powder to purple pixels
UPP Protein leans heavily on their signature purple color. Their packaging, their logo and even the actual protein powder is purple. It only made sense to design the website’s primary color to be purple, whilst carefully balancing out secondary and tertiary colors to make sure each color has its own spotlight when suitable. Even when purple takes a more subtle role we made sure to include hints of purple such as in the iconography, maintaining a cohesive brand presence throughout the site.
Crafting an intuitive experience for subscriptions
UPP Protein aims to emphasize their product's availability through a range of subscription options, each offering unique benefits and prices. However, comparison tables often lack clarity and structure which could potentially confuse users. To address this, our UX Designers crafted an intuitive user experience that guides users through the available subscriptions, highlighting their differences. Additionally, our Visual Designers incorporated elements inspired by the product's packaging to create visually appealing label designs, enhancing the overall user experience.
Cherry on top through Framer
The Upp Protein client team had expressed a desire to have the website built with Framer. This opened a window of opportunities for our Visual Design team, giving them the ability to make various design functionalities and interactions come to life. Effortlessly making elements sticky, adding animation transitions, and defining different states for components helped ensure that our team could explore and finetune the user experience across various devices and screen sizes; all within Framer.
