Good Hot Tubs
Echo Solutions Inc. was launching a new hot tub brand and aimed to create a distinctive e-commerce website that stood out from other brands. I was involved in the project, redesigning the logo and developing a new website specifically tailored for the younger generation.
Project Context
Industry Sponsored
FLUI Hackathon
Spring 2024
My role
Wire framing, Prototyping, UI Design, Design System
Tools
Figma
After Effects
Illustrator
The Background
FLUI Design Hackathon
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 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.
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
Getting Started
Make it Look Better
Before designing, we analyzed the websites of brands featured on our client's platform to identify what is essential for the new website. These key insights helped us shape our design.
Consistency is key
Not having a consistent flow can make things feel disorganized
Choice of product image
Photos should minimize drawbacks and highlight advantages.
Provide demonstration
Using demonstration videos to show the product in action can help users better understand how it works.
The need for a standout feature
To differentiate from other websites, a standout feature that benefits customers was necessary.
Shaping Solutions
Simple with a standout feature
Our solution was to craft a luxurious design that appeals to a younger audience. We focused on maintaining a consistent appearance while introducing new features, which sets us apart from other hot tub brand websites.
Laying The Groundwork
Finding the right style
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.
Finding Our Focal Point
Talking to the clients
Through client meetings, we could delve deeper into what they desired and the style they were aiming for. The clients were mainly focused on three main aspects: affordability, high-tech features, and, most importantly, ultra-portability. The specific key insights were:
Dividing Tasks
Starting Iteratons
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 remaining until our final meeting with the client, it was crucial to present various design styles to determine their preferences. Based on this strategy, I created three unique designs. Each design conveyed the same information but in different formats, allowing the client to choose their favorite during the meeting.
The Biggest Challenge
Lacking Elements
One of the biggest challenges faced during this project was the lack of high-quality elements. Many of the photos provided by the company did not align with our desired style, and there were very few images that effectively showcased the features of the products.
After reviewing the company's media library, we discovered that many of the videos matched our style and effectively highlighted the product features. As a result, we decided to incorporate videos into 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.
Last Pit
Make changes, add layouts
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.
Showcase portability
It was difficult to showcase the product's portability because we didn't have suitable images. To solve this, I included a video that shows its size and how easy it is to transport. I also added a comparison section that relates the product’s dimensions to a car's capacity and human height, making it easier to understand.
Making it responsive
After finalizing the overall design, I incorporated auto layout in Figma to ensure consistency and streamline the design process for future client adjustments.
Design systems
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.
The Solution
Introducing 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.
Impact
Chosen for Continued Collab
After the hackathon, out of three teams, the company asked our team to continue working with them when they start developing the website.
Let's Chat!
Drop me a message anytime!