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.
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:
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.
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.
Before diving into visual explorations, we established the site’s content structure to drive our explorations into hierarchy and layout:
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.
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.