The Figma Product Experience Project at Fuelled

Fuelled, always at the forefront of innovation in the fitness industry, embarked on an exciting journey to elevate user interaction with its products. Leveraging the power of Figma, a collaborative design tool, Fuelled aimed to enhance the overall user experience across its diverse range of offerings. This blog delves into the intricacies of the Figma product experience project, shedding light on the process, challenges, and outcomes.

At the heart of Fuelled's vision was a commitment to empowering users on their fitness journey. With a diverse portfolio of products catering to various fitness needs and fitness goals, Fuelled recognized the importance of creating a seamless and intuitive user experience. The Figma product experience project was conceived to revolutionize how users interacted with Fuelled's offerings, from browsing the website to unboxing a product.

Product bounce

https://video.wixstatic.com/video/02e40c_2fe19de9e24d4a579d24a888c21cb9eb/720p/mp4/file.mp4

Even the smallest of tweaks in the UX can translate into major sales conversions by enhancing the overall experience and reducing the amount of clicks the user requires to get their hands on their fav Fuelled products!

The first phase of the project involved mapping out user journeys across different touchpoints, including the website, mobile website, social media platforms, and packaging. This comprehensive understanding of user behavior and expectations served as a blueprint for designing the Figma prototypes. Was our dark interface overall improving and as fresh as it had been to our users in 2017?

Armed with insights from user research, the design team meticulously crafted wireframes and prototypes in Figma, focusing on simplicity, functionality, and aesthetics. Each design element was thoughtfully curated to align with Fuelled's brand identity and resonate with its target audience. Should the product have movement and does this increase the chances of interaction with products? We tried out both ways and are still considering how to go about it further -

Product animated

https://video.wixstatic.com/video/02e40c_72afd22cfca446fa87f23e97f726ebdf/720p/mp4/file.mp4

Static and simple product page

What do you feel enhances your experience as a user

• Movement and creative animation
• Simplicity is key

Accessibility and responsiveness were paramount considerations throughout the design process. The team ensured that the Figma prototypes adhered to accessibility standards, making them inclusive and user-friendly for individuals of all abilities. Additionally, the designs were optimized for seamless responsiveness across various devices, ensuring a consistent experience for users on desktops, tablets, and mobile phones.

With the orange colour play present in both and the most popular badge on top we are trying to guide the user to the best option for them.

For our offers, This was a creative way to highlight our offers but we thought we could do better!

https://video.wixstatic.com/video/02e40c_aa417af0e3294f92bd944f5c1abfac95/480p/mp4/file.mp4

We created a gif which is currently live on our website and has helped us target our audience better on our website with these amazing offers!

These gifs gave us the idea of gif pop-ups to just let our users know the latest deal as they walk through our website

As the designs took shape, meticulous documentation was prepared within Figma, detailing design decisions, guidelines, and specifications. This streamlined the handoff process to developers and other stakeholders, ensuring accurate implementation and alignment with the intended vision.

Usability testing and A/B testing are to be conducted to validate the effectiveness of the Figma prototypes. Insights from user feedback and past analytics data were leveraged to identify areas for optimization and refinement, driving continuous improvement in the product experience.

The Figma product experience project marked a significant milestone in our journey toward enhancing user interaction and satisfaction. By harnessing the collaborative power of Figma and a user-centric design approach, Fuelled succeeded in creating a cohesive and immersive experience across its entire product ecosystem. As Fuelled continues to innovate and evolve, the lessons learned from this project will serve as a guiding light in shaping future endeavors and delighting users on their fitness journey.