In a continuation of the Skip and Scoop project I decided to design and prototype a website using Figma. The result is a fully interactive mockup with the goal of coding it out as functioning website. I chose to use a website as an expansion of the project because I felt it would best fit the brand's desire to reach out to a wider audience and encourage customer engagement with the product.
The entire mockup was designed in Figma. I used components to animate different parts of the site from the buttons to the "Explore Our Flavors" section on the homepage. I used the prototyping feature to bring the site to life and ensure a smooth flow between pages.
Used call to action buttons and special sections to create a user flow of moving from the homepage to the flavor page with the goal of having users read the stories there.
To make sure each of the three flavors was highlighted on the site. I customized the homepage to each one and made it interactive by clicking on the three dots in the hero section.
On the flavor page, I added the full story for each flavor and made them changeable using arrow buttons. The ingredients are animated on each flavor image.
Because the story was so important to this brand, I also included a "Our Story" page which explains where the brand came from and why each flavor is based on a story.
To create this design I first started by gathering inspiration. I then made a black and white wireframe, added the text and refined it further, then figured out my colors and built from there. I based the colors on the packaging of each flavor, picking a main color and an accent color from each. I decided to go with rounded corners and gradients on the site to better match the choices for the packaging, making sure the site brought the brand to life.
