Mountainsaunas.com

A Visual Design Project

Alex Lund
mrtailsdesign
4 min readJul 9, 2018

--

Introduction

I was asked to provide a UX solution for a new sauna company. The founder was building a website and wanted help making it look good. I offered to provide feedback on what was already built and would apply design thinking to the logo, visual design, and user flow.

The Problem

I spoke with the founder to discover how they wanted their site to look. We came up with the following design requirements:

  1. Clean, simple, and modern “look and feel”
  2. Highlight the product
  3. Smooth user flow at checkout

One of their original homepage iterations is listed below:

The very first iteration was being built in a blog template, so looked quite messy and unorganized. Unfortunately, I wasn’t able to get a screenshot of it. The above screen is after we switched to more of an eCommerce template, and while unfinished — looked quite a bit cleaner.

The Solution

I provided the following feedback:

  • The logo didn’t read as well as intended
  • The initial template had some unnecessary content that was distracting
  • The site could create an experience for customers purchasing a sauna, rather than just showing a list of products
  • We could create a more purposeful use of color and visual elements

I created the following landing page:

Earthy tones, bold images, and a rich atmosphere

My design would put the product front and center while building upon the experience and tradition that is Sauna — inviting customers to enter the site and explore.

My solution would feature

  • A call to action to invite the customer to explore products
  • Gorgeous photos showcasing the product
  • Blogs and articles to educate and inform customers
  • Clean navigation, including a search bar to assist customers even further
  • A wireframe logo — suggesting a new direction for the previous logo

My design was met with enthusiasm, and the founder got really excited about building an experience for their customers.

Project Constraints and Resolution

The project was subject to the following constraints:

  1. The founder would build the website with little to no prior development experience
  2. The site will be hosted on Wordpress.com
  3. eCommerce tools were limited by budget

After receiving my design, the founder opted to hire a web developer as the product needs were greater than originally anticipated. The founder loved the direction I was headed and passed my designs to the developer. The website is still under construction and will naturally be subject to further iteration. My role as a consultant will continue, and I look forward to testing the live site.

The Process

  1. Research

I spent a few hours speaking with the founder to discover why they were in business, why saunas, what kind of websites they liked, what needs they had, and what they wanted their customers to feel while using the site. We also talked about WordPress and the pros and cons of hosting the site there.

I spent an hour or two researching the traditions and health benefits of saunas. I wanted any claims on the site to be accurate. If the site was going to feature blogs and articles — they needed to be truthful and accurate.

2. Iteration

My first homepage iteration looked like this:

I put this design in front of a few individuals and received some feedback:

  1. The spacing between the pictures was “weird”
  2. The “explore products” button was too far down
  3. The font wasn’t very interesting and didn’t quite fit in
  4. “Why Sauna” was not very clear
  5. The blur on the images wasn’t great
  6. The images didn’t represent the product
  7. The overall design felt a little dark

I’ve put the 2 iterations side by side to show the comparison:

Iteration one (left) and two (right)

As you can see, I added the following changes:

  1. Images of saunas instead of random outdoor shots
  2. Lo-fi logo (as it’s not yet finished)
  3. Clear, crisp images
  4. New font
  5. More vibrant color
  6. Left aligned overlay text
  7. Fixed padding and alignment on images and buttons
  8. Resized search bar to be less invasive
  9. Tweaked copy to be more clear

To be Continued…

I look forward to working with the developer to help this small business succeed. I have plans to conduct heatmap tests to observe how users move through the site. I would also like to conduct user tests to ensure the checkout process flows nicely. As that’s not built yet, we will have to revisit that part of the process.

Thanks for reading this far! Since you did, might as well give it a 👏🏻 or 500. I wish I could take the time to write about every aspect of this project. If you have questions or comments, I’d love to hear from you! You can fling an email my way via mrtailsdesign@gmail.com, or find me on LinkedIn if you’d like.

Bye!

--

--

Alex Lund
mrtailsdesign

UX Designer. I am MrTailsDesign. Passionate about good User Experience, Foxes, and all things geeky.