UI design / protein e-commerce

Overview

This project focuses on the launch of a limited edition series of protein powder and energy bars by Eiyo in celebration of Pride Month.

The initiative aims to celebrate diversity and inclusivity within the LGBTQ+ community by offering eight uniquely coloured packages, each symbolising a different aspect of the community. The project encompasses the creation of a landing page to promote the special edition bars, enhance brand engagement, and support LGBTQ+ organisations.

Project Background

Eiyo operates in the nutrition industry, serving health-conscious individuals looking for convenient and nutritious snacks.

Their target audience is not only fitness enthusiasts, but also anyone looking to maintain a healthy lifestyle. The main problem I addressed in this project was the need to celebrate diversity and inclusion while driving brand engagement and sales during Pride Month.

As a UI designer, I created a visually appealing and user-friendly landing page to promote the products. With my work, the page conveyed a message of diversity and encouraged customer support for the cause.

What I’ll cover

1. Concept Development: Explore the ideation process behind the limited edition Pride Protein products, focusing on the inspiration and significance of the eight different colours representing the LGBTQ+ community.

2. Design: Detail the design process involved in designing the vibrant packaging and logo, and animation ensuring both elements effectively communicate the message of diversity and inclusivity.

3. Prototyping: Discuss the steps taken to create and test prototypes of the landing page.

1. Concept Development

For this project, I drew inspiration from the Philadelphia Pride flag, which includes black and brown stripes to represent the inclusion of people of colour within the LGBTQ+ community.

As an Asian person and someone who has lived as a minority outside my home country, I deeply resonate with the importance of acknowledging and celebrating diversity. This personal experience shaped my vision for the project.

I chose these eight colours for our limited edition protein bars to symbolise this diversity. The concept reflects the belief that everyone, regardless of background or identity, deserves to be celebrated and cared for. In today's world, physical health isn't just for athletes or sports enthusiasts; it's for everyone.

This inclusive approach underscores the project's message: anyone can be diverse in their own way, and everyone should have access to nutritious, health-promoting products.

User persona:

To better understand and address the needs of our diverse audience, I created these user personas. By considering the backgrounds, interests, and specific requirements of individuals, I aimed to design more effective and personalised solutions that resonate with real users.

2.Design

I designed the logo and package of products for the project.

Logo Making Process:

Creating the logo for the limited edition Pride Protein Bars involved careful manipulation of a chosen font to achieve a bold and striking impression. My aim was to convey diversity through a balance of curves and sharp edges in the design. This approach symbolises the harmony between different elements, much like the diversity we celebrate within the LGBTQ+ community.

I intentionally crafted the logo to avoid a distinctly feminine or masculine feel, ensuring it appeals to all genders. The result is a versatile and inclusive logo that embodies strength, unity, and the vibrant spirit of Pride.

Package Design:

For the package design, I selected colours from the Pantone palette above, adjusting them to be slightly diluted. This subtle modification aimed to create a refined and less tacky impression while maintaining the vibrant essence of the original hues. Each package, with its softened colours, offers a visually appealing and sophisticated look that resonates with a wide audience.

Landing Page Design:

For the landing page design, I incorporated engaging animations at the top to capture users' interest and create a fun, interactive experience. These animations not only enhance user engagement but also contribute positively to SEO performance. Additionally, I implemented micro-animations that activate when users hover over various elements, adding a dynamic touch to the browsing experience.

Beyond the visual appeal, the landing page features informative text highlighting the values and significance of our Pride campaign. This ensures that visitors not only enjoy a visually stimulating experience but also understand the deeper purpose and message behind our limited edition Pride Protein Bars.

Prototyping:

Creating a prototype of the landing page provided several key benefits for the project. It allowed me to visualise and refine the design better. The prototype enabled me to test the animations and interactive features, ensuring they worked seamlessly and effectively engaged users.

Figma prototyping link 🔗

Final thought:

This project was a valuable experience in creating a landing page for a Pride-themed product. I focused on designing engaging visuals and informative content. While not tested with users, the process highlighted the importance of balancing aesthetics with meaningful messages. It reinforced my understanding of impactful design and prepared me for future projects.