PRIME
A website redesign on the hydration drink ‘PRIME’
ROLE
Web Designer
TOOLS
Adobe XD
TIMELINE
3 Weeks | September 2023
CONTEXT
This website design is a university-based project where the task was to redesign any current website into our own design. The popular hydration drink known as ‘PRIME,’ currently has a website that had the potential to be redesigned to engage the Generation Z as the target market in the approach of creativity and interactivity.
OPPORTUNITY
Redesign the current PRIME drink website and refine it to a more creative and interactive website product design page.
RESEARCH
What is PRIME Hydration?
PRIME Hydration is hydration energy drink created by influencers KSI & Logan Paul in 2022. They created PRIME to showcase what happens when two people who were once rivals and are now reunited as brothers and business partners, who aim to fill the void where great taste meets function.
The popular drink is currently a cultural trend and beverage loved by many, particularly younger people who idolise both KSI and Logan Paul. PRIME Hydration offers a variety of different flavours and exclusive products including PRIME Hydration Sticks & PRIME Energy drinks.
Why redesign the PRIME website?
After observing the current design of the PRIME website, I noticed that the overall design lacked vibrancy and interactivity and I saw the potential for the website to be visually improved to become more eye-catching and aesthetic as a brand. The layout itself within all the pages is simple and modern which suits strong as a product-based website so in general, the user experience currently is satisfactory but could also be refined to become more interactive and fun for users to explore around in the PRIME website. I was able to ask opinions from others specifically
within the Generation Z range to navigate around the PRIME website and they all clarified that it the current design is plain and too much of 'white' space around. At this stage, I took the approach on starting the redesign process and refine it a bit more visually while keeping most of the content the same.
The landing page redesign for the PRIME website focuses on the branding itself to become the main focus and the first thing that users have their eyes on the screen. With the current landing page, the PRIME brand logo is minimal in size within the navigation, the redesigned page creates emphasis and boldness to the brand, displaying authority as to what is the website.
At the start of the redesigned landing page, a major difference is changed within the user experience where users navigate around the website through clicking in the arrow or pagination component which immerses an interactive scrolling experience.
DESIGN
Website redesign wireframes
The sketch of the wireframes show the basic user interface as well as the link in between all the screens in which the layout aims to be designed more simple and modern but emphasise more strongly on the visual design within the website. The current website structure isn't too complex so I ensured that I maintained the same user flow for the redesign. To become more interactive as a drink product website, I decided to experiment with applying a ‘parallax’ scrolling effect, a visual technique that creates an illusion of depth and movement when scrolling.
After the sketch wireframes, I refined them digitally in Adobe XD, to gain a better insight visually on what the layout and interface will look like in each screen. I was able to visualise the imagery and visual design clearly from the wireframes and comprehend how it would provide a more vibrant and colourful aesthetic that'll be able to make the website visually engaging.
PROTOTYPE
PRIME Website Redesign
Current Landing Page
Redesign Landing Page
Current Product Page
Redesign Product Page
The redesign of the product page also shows a major visual difference with providing more colour which is emphasised depending on the PRIME's drink flavour where for instance, the lemonade flavour is portrayed with yellow detail and where lemon lime is with green. Users are able to explore the flavours in an interactive experience where the interface is more vibrant and colourful. The product page also varies with PRIME's other products including the Hydration+ sticks and Energy drinks in which I redesigned as well.
Takeaways
The redesign of the PRIME website was a project idea that I thought would be a innovative approach to work on. This university project allowed me to experiment a lot with visual design and connect it strongly with functional user experience. With being able to redesign a website, I was able to use my creative mindset and change the visual design and user experience into my own direction which I enjoyed throughout the whole design process. Within the short range of time for this university project, I am satisfied with the outcome of my own redesign on a current website and if within the future, if there is a project objective of redesigning an app or website, I will be looking forward to approach on the challenge of a design that has the prospective of being improved or refined.
work
© 2024 by Josh Zhedrick Cay