Designing and developing a custom website for Spa Moab

Design, project management, Wordpress development

I helped Spa Moab extend their brand to the web. The site needed to be mobile-friendly, allow for flexible content management, and appeal to an audience outside of Moab. People judge a business by its website. Knowing that, we wanted to create a site that would reflect the Spa’s energy and aesthetic while appealing to a wide array of potential clients.

Market Research

To start, we collected market and user research to check our assumptions about potential visitors to the site. Our data largely came from established market knowledge, conversations with existing and potential clients, and information from the local tourism council.

Several points stood out:

  • Tourism to Utah increasingly consists of out-of-state and international visitors, with growing visitation from Western Europe and Asia. These visitors spend considerable more than in-state visitors.
  • Potential customers will often be driving into town when they load the site, and their signal strength will vary considerably due to the surrounding canyons and remote location.
  • Athletic stress or injuries are a big reason why people visit the spa, but just as many customers visit for rest and relaxation.

The site would need to be mobile friendly with minimal page loads and load times, but also support strong imagery. The Spa’s offering catered to many different needs, so the visitor needed a clear way to navigate between services and service types. Finally, the Spa’s employees would need easy access to the content to regularly update featured services by season.

Design Language

There are two questions I always ask before starting a project like this: what does a visitor need to know? And how should a visitor feel when they come to this site? The first question helps to prioritize the layout of content across each page and throughout the site. To address the second, I set up my clients with a moodboard to collect colors, visuals, layouts, and other sites that inspired the Spa’s owners.

We found ourselves returning to the same two adjectives: “crisp” and “warm”. The board’s exposed palette of deep oranges and burgundies, coupled with clean lines and modern layouts confirmed this direction. In many ways, it mirrors the juxtaposition of their own surroundings, of the serene space they had created for their Spa set against the sharp spires of the red rock and desert.

After establishing a palette, I explored multiple type pairings, working back and forth with the client. Ultimately, the contrast of geometric Futura and the modern serif, FF Tisa rounded out our visual aesthetic.

Design process

Before diving into visual explorations, we established the site’s content structure to drive our explorations into hierarchy and layout:

The client and I went through all of her existing content and determined exactly how we wanted to structure it.

After we established a content and interaction framework for the site, I wireframed each page to let us establish visual hierarchy and confirm our thinking. From there, I worked on a styleguide, establishing a pattern library that would let me quickly mock up the wireframes and create consistency if we wanted to explore different visual layouts for each page.

Designing in code

Establishing a content and layout hierarchy early allowed me to polish the design in code. I was able to rapidly iterate through ideas and address any issues with the responsive layout upfront. I started by establishing patterns, beginning with the smallest elements. From there, I created flexible modules from those elements that could be re-used where needed.

The biggest challenge we faced was to update the hash url and header text for each service type without forcing a page reload. Since this was the page potential customers were most likely to visit, and many visitors would be on cell phones with less than ideal coverage (Moab is in the desert, after all), the content needed to load quickly and fluidly.

I solved for the issue by modifying Chris Coyier’s Better Linkable Tabs. It wasn’t a perfect fit, but with some manipulation and a bit of playing around, we made it work perfectly for our purpose.