Designing an E-Commerce Website for Good Hot Tubs during the FLUI Hackathon
Context
Client work
FLUI Hackathon, Spring 2024
My Role
Wire framing, prototyping, UI Design
Tools
Figma,
Illustrator
PROJECT GOAL
Making It Easier to Choose the Right Hot Tub
Good Hot Tubs is a new brand focused on creating affordable, high-tech, and portable hot tubs.
During the one-week FLUI Hackathon, we worked with the client to design a website that highlights these key values while helping users find the model that best fits their needs.
MY ROLE
Leading the UX/UI Design
I worked on the overall UX/UI design of the website, focusing on establishing a clear information hierarchy, consistent layout patterns.
Throughout the process, I built components and applied auto-layouts in Figma to make the design scalable and ready for development.
DESIGN
Comparison page
This page helps users find the spa that best fits their needs by comparing models based on price, features, and specifications. It simplifies decision-making and guides users toward the right choice more easily.
Home page with videos
Among the materials provided by the client, the videos were visually stronger than the images. We used this as an opportunity to feature product videos on the homepage, making the design feel more dynamic and engaging.
Project page with thorough explanation
The project page presents detailed information in a visual and easy-to-understand way, using visual elements to help users grasp each feature quickly.
DESIGN PROCESS
Iterations: Exploring different styles
Since the second client meeting would be our last, I explored as many design styles as possible to gather feedback and understand their preferences. These three were the main iterations I presented.
Style guide
Before starting the design, we defined the style guide — setting colors, typography scales, and button sizes in advance. This helped maintain consistency across pages and sped up the overall design process.
Preparing the Design for Development
After completing the designs, I applied auto-layouts based on a consistent grid system so the client could easily hand the files over to developers.
Final screens in Figma
REFLECTIONS
Takeaways
Learning
Since we were short on time, we had to make quick design iterations. This helped us learn fast, what worked and what did not, without getting stuck on a single design direction.
Impact
After the hackathon, out of the three teams that worked with this client, the company asked our team to continue collaborating with them when they begin developing the website.