Project Context
Industry Sponsored
Flui Hackathon
Spring 2024
My Roles
Wire framing, Prototyping, UI Design
Tools
Figma
Illustrator
The Start
In 2024, during the Flui Hackathon, my team collaborated with Echo Solutions Inc. for one week to assist in launching their new brand, 'Good Hot Tubs.' They needed both a fresh e-commerce website and a new logo for this venture, offering a variety of hot tub brands.
My Role
In our team of four, I led the overall web design efforts and specifically focused on designing the product pages and the design system. This was necessary as our clients were preparing to launch two products, Oslo and Mono.
After the hackathon concluded, the client reached out separately, expressing interest in collaborating further with our team and their in-house development team in the future. Throughout the process, I utilized Figma, After Effects, Photoshop, and Illustrator.
Ideation
I worked with one of my teammates to brainstorm the website's concept and style, aiming to find a style that would appeal to both the client and customers.
Building Components
I created a component library to enhance productivity, ensure consistency, and simplify tasks for the future development team.
The Challenge
Design for Youth in 1 Week
The clients wanted their website to appeal to younger adults in their 30s. They desired a design that retains the strong vibe of traditional hot tubs but felt less formal and more modern, with a touch of luxury.
In addition to the design challenge, the main obstacle was the tight timeline of only one week to design the website from scratch. We divided the team into two groups: two members focused on logo design, while my teammate and I worked on the web design.
The Process
Ideation
Site Maps
Mood Boards
Client Meeting
Design
Iterations
Prototypes
Client Meeting
Final Design
Presentation
Prototypes
Getting Started
We analyzed the websites of brands featured on our client's platform to identify what's essential for an effective website. These were the key insights that helped us shape our design.
Consistency is Key
A lack of consistency in the flow can lead to a sense of disorganization.
Choice of Product Image
Photos should minimize drawbacks and highlight advantages.
Provide Demonstration
Including demonstration videos that show the product in use can help users gain a clearer understanding of its functionality.
The Need for a Kick Feature
To differentiate from other websites, a kick feature that benefits customers was necessary.
Shaping Solutions
Simple with a Kick
Our solution was to craft a design that is both luxurious and appeals to a younger demographic. We focused on maintaining consistency for a unified look, while introducing new features not found on other hot tub brand websites.
All of these elements were combined to create a design that looks trustworthy.
Starting The Journey
Getting a Hint
Before our client meeting, we prepared two mood boards to showcase various colors and styles. This approach allowed our clients to easily express their preferences, which in turn helped us quickly determine the project's direction.
Talking to The Clients
Focal Points
Through client meetings, we were able to delve deeper into what they desired and the style they were aiming for. The clients were particularly focused on three main aspects: affordability, high-tech features, and the most important ultra-portability. The specific key insights were:
Clients preferred the dark theme that looks luxurious.
Preferred many images of products features.
The website design must convey a luxurious feel.
Ultra portability is the key feature and should be showcased prominently.
Dividing Tasks
After our client meeting, we assigned roles within the team. Two members focused on designing the logo, while another and I tackled the web design. My specific responsibilities included creating the product pages and the comparison page.
Providing Different Styles
With only two days until our final client meeting, it was crucial to present multiple styles and gather as much feedback as possible. Based on this approach, I created three distinct design styles. Although each style conveyed the same content, their unique presentations allowed the client to choose their preferred design during the meeting.
Biggest Challenge
One of the biggest challenges throughout this project was the lack of high-quality elements. Many of the photos provided by the company did not match the desired style, and there were few images that effectively highlighted the features of the products.
Upon reviewing the company's media library, we found that while many videos matched our style and effectively showcased the features. This is why we started using videos in our design.
Final Meeting
Enhancing One Style
After the final meeting, we decided to adopt the dark-themed style, incorporating design elements from other styles to highlight features. The clients were pleased with the overall design but requested a few adjustments.
Ensure the design is reusable across other products.
The key feature, "Ultra Portable," should be effectively explained.
Last Pit
With the overall flow established, we focused on highlighting the "Ultra Portable" feature. We applied auto layout to our designs and began creating a component library to ensure consistency and efficiency across the project.
It's Portable
Showcasing the product's portability was challenging due to a lack of suitable assets. To address this, I included a video subtly highlighting its size and ease of transport. Additionally, I provided a comparison section, relating the product’s dimensions to a car’s capacity and human height for a clearer and more relatable understanding.
Making it Responsive
After completing the overall design, I added auto layout in Figma as a final touch to ensure consistency and streamline the design process for future adjustments.
We will be adding the mobile version later on.
Design System
We also developed a comprehensive design system, from typography to components, to facilitate our client's future adjustments and ensure brand consistency across all platforms.
Introducing The Solution
Good Hot Tubs
Good Hot Tubs is a platform that hosts numerous hot tub brands, aiming to sell a variety of hot tubs with diverse features.
Replacing images with videos
To convey a luxurious vibe and provide sneak peeks of the products, videos were primarily used to showcase them.
Comparing Products
As a kick feature, we added a comparison tool that allows customers to filter by functions to find the perfect spa for their needs.
Easier Explanation
Leveraging the videos provided by the company, we were able to offer clearer explanations of products through both text and video. Additionally, we created a new wireframe for the product display that aligns with our design and effectively conveys information.
Impacts
Chosen for Continued Collab
After the hackathon, out of three teams, the company chose to continue working with us and we’re now collaborating with their development team to launch the website.
