Me - Lead UI/UX Designer
Jamie Li - UI/UX Designer
Sky McDonald - UI/UX Designer
UI/UX Design,
Research, Wireframes,
Prototyping,
Usability Testing
Figma, Miro, Zoom
5 weeks
For my last project with Springboard's UX Design Program, I was paired up with two other students and took on a 5 week contract job with Slate Strategies in Canada. Slate Strategies is a business consulting startup that aligns business development, brand, and marketing strategies to deliver tailored solutions that open up new avenues for the success of businesses. My team's role was to help create a responsive website from scratch for a luxury sauna e-commerce store targeting the Canadian market.
Current e-commerce stores dedicated to home saunas for the Canadian market lack the desired level of sophistication and luxury that customers look for. Additionally, there is a need to enhance the learning aspects of the shopping experience, ensuring that customers are informed when searching for a sauna.
How might we provide users with an informative and engaging luxury sauna shopping experience?
Design a sauna e-commerce website that focuses on educating and engaging users, while exuding a luxurious, classic feel.
.png)
To better understand our client's goals and the Canadian sauna market, we started off the project by conducting online secondary research. Our client gave us a list of websites that he liked and from there, we performed a competitive analysis to figure out how these websites were addressing users' needs. We evaluated 3 direct competitors (Sunlighten, Bsaunas, and Nootka Saunas) and 1 indirect competitor (Casper). Based on each website's strengths and weaknesses, we were able to determine what direction we wanted to take with Saunas Canada.
.png)
Based on our user stories, we then created user flows for 2 red routes exploring the key features that the client wanted to include in the website.
Following the research phase, the team ideated several designs in our report to Slate Strategies. I sketched a homepage along with the 7 key features that the client requested in the project brief.
Once the designs were approved, we then designed the wireframes in Figma to bring our sketches to life and provide our client with a more realistic vision of what the website would look like. For the project, I specifically worked on the Sauna Selector Quiz feature and Educational Content pages.
Before moving on to the high-fidelity screens, the team decided to conduct a round of guerrilla testing with the wireframes. We believed doing a round of testing at this point would help determine which part of our screens needed to be iterated on and would eliminate unnecessary work in the high-fidelity stage.
Sauna Quiz:
Landing and Product Page:
Checkout Process:
"Why can't it just tell me my results right now? Usually when these quizzes ask for my email, I'll click 'No thanks' or just go back to the website." - Matt Y.
"I wouldn't click 'Learn More' here because I would normally just Google it." - Peter H.
Provide additional information as the user takes the quiz
For the Sauna Quiz, I wanted to keep the design as minimalistic as possible while still providing users with necessary information regarding the answer choices. With this in mind, I decided to design an overlay with a more detailed explanation of the quiz answers, which pops-up once the user selects "Learn More".
Having this information available assures that the user is able to make informed decisions while taking the quiz. Having the information readily accessible within the quiz also mitigates the need for users to leave the page and search for it themselves.
Educational content filtered by topic
As users move through the educational content of the website, they'll be faced with a mountain of information. The client wanted informative sections that would cover various topics such as health benefits, maintenance tips, research, and blogs. I wondered how I could present the content in a way that wouldn't give the user cognitive overload and allow them the freedom to choose what information they wanted to digest.
I ended up splitting the educational content into 3 categories: research, health benefits, and blogs. For the Research and Blogs pages, I then added a filter function at the top of the page, allowing users to further filter the content by specific topics.
In terms of the visual design, it was up to our team to create a website that would exude a luxurious and classic feel. Our client wanted a minimalist design with an emphasis on dark space and dark, elegant design elements. With this in mind, I drew inspiration from the dark elements of nature to create the mood board.
Since most of the sauna product images would be brown, the team agreed on a dark blue primary color (inspired by water) and green accent colors (inspired by trees), supported by various light brown shades. For the typography, we chose a clean and minimalist font pairing with Josefin Sans and Lato. Both are sans-serif typefaces and support multiple weights allowing for variety.
To help the team stay consistent across the entire file, I created a component library on Figma. I focused on defining text, color and grid styles, selecting icon sets, and creating component sets with different variants.
With the approved wireframes completed, our team moved on to creating the high-fidelity screens and a clickable prototype.
This project tremendously helped me improve my communication and collaboration skills, both with the client and with my team. Our first hurdle was understanding what the client's goal was for the final deliverable, as well as determining what we could realistically create for our scope within the given timeline. I practiced asking questions to gain a better understanding of the client's expectations and consistently provided them with updates on our work progress to receive feedback. With all of us working remotely in different time zones, I learned how important it was to communicate my work clearly so that my teammates would know where I left off and what the next steps were.
Although, we started off a bit rocky (due to the client switching projects on us a week in), I learned to adapt quickly and shift gears to take on the new project. As the team lead, I always made sure our work was organized across Figma, Miro, and Google Drive so that we could work efficiently across all platforms. I also made it a habit to check in with my teammates to ensure we were on track for each deadline. Lastly, I learned that everyone has their own processes when it comes to working on projects and that while it's good to be flexible, it's also important to create structure so that the final deliverable is cohesive throughout.
At the end of the 5 weeks, we successfully handed off our final deliverable to our client. However, due to time constraints, we ultimately focused on completing the high-fidelity prototype and were unable to conduct a final round of usability testing. For the next steps, I would love to conduct user testing with the prototype to gain insight on how users would navigate through the website and what features users prioritize when shopping for saunas. I would also want to explore different features and content that would create an engaging experience for the user.
