Everybody Studio wanted their sister business, Everybody Holistic, to have a website on Wix that would utilize Wix Bookings software. They wanted this site to match the aesthetic of the studio website which was built on Squarespace. This meant that I needed to work on the (re)design of both sites to ensure maximum usability and design continuity.
What I did:
Sketched and iterated designs
Redesigned the Everybody Studio homepage, footer and prices page using Squarespace
Purchased a domain from Namecheap and linked it to Wix
Built the site using Wix Editor
Made adjustments to the Everybody Studio website on Squarespace to give the two sites a similar look/feel based upon the allowances and restrictions of their website building software
Optimized both websites for mobile
Guerrilla usability testing
Business & User Goals
I conducted a stakeholder interview to determine business priorities and then a comparative benchmark of websites with both global and universal navigation to determine best practice.
The studio wanted an inexpensive booking system for clients to book holistic therapies through and decided that Wix would be the most affordable option. As such, they needed a new website built for their Everybody Holistic business using the Wix platform.
Everybody Holistic was previously just a single page on the Everybody Studio website, where clients would book with therapists by emailing them.
It was important to the studio owner that the two websites shared a similar appearance and functionality. She wanted a seamless experience for clients looking to toggle back and forth between the studio and holistic sites.
Finally, the studio owner wanted some changes made to make the Everybody Studio page more user friendly, mainly through the addition of a prices page.
The fist challenge I forsaw was surrounding navigation: I would need to link together two separate websites and businesses in a way that would match users' mental models. In order to determine best practice for sites with both universal and global navigation, I conducted a comparative benchmark of a number of websites. Unfortunately I couldn't find any examples of similar business-types linking together multiple websites, so had to think and explore outside of the box with businesses beyond the wellness sector.
Ideate & Design
Everybody Studio wanted two separate but similar user-friendly websites that could easily be toggled between by users. The branding and images needed to match to ensure the sites looked similar enough, but there needed to be some differentiating elements as well to help the user determine which site they are on and what they need to do on each.
Redesign for Usability
My first design challenge was to re-design the parts of the Everybody Studio website that made information difficult to find for the user. I did this using the Squarespace platform on which the website was originally built.
The studio owner reported that the price list (which was located underneath the class timetable) wasn't particularly easy for clients to find, so we agreed that a separate pricing page with a link in the navigation bar would be a better solution.
The navigation bar itself was set up in an interesting way: pairs of links were stacked vertically on top of another set of links rather than stretching across the page horizontally.
This made the links difficult to read, so I changed the navigation to run horizontally at the top of the page.
There was also a lot of text describing the offerings at the studio. I removed the bulk of this to sum up what the business does in a single link of text and to bring the call to action links higher up on the page.
Whilst exploring the site, I noticed that business contact information was only available on the 'Contact' page. I added this to the footer to ensure that contact details would be easily available to clients.
Happy with the Everybody Studio page, I then turned my focus to the next challenge: building the Everybody Holistic sister site.
Using Different Site Builders
Building matching websites on separate platforms proved challenging for a number of reasons.
Although both Wix and Squarespace are helpful tools for building sites, they don’t have the same features or allowances. The Everybody Studio site on Squarespace, for example, had letter spacing in the navigation bar items but Wix didn't allow character spacing in navigation items. I had to manually put spaces between each letter on Wix and then adjust the Squarespace spacing to match.
Squarespace and Wix also have different page widths, different degrees of customisation for buttons (especially hover states) and completely different ways of formatting information.
Squarespace uses a toolbar for overall design customization and drag + drop blocks for content and spacers (see below).
Wix, on the other hand, allows free placement of each element and individual styling options (see below).
It was a huge challenge trying to make everything look similar to the original site and meant I had to make some adjustments to the studio site as well to ensure these elements matched.
Advocating for UX Design Principles
The client originally wanted the colour scheme to be the same on both websites, which I felt would be confusing to the user. It needed to be clear (beyond the change in logo) that they were now browsing a separate site) and I had aimed to achieve this through a combination of universal navigation and differing accent colours.
It took some time, but after a few days I was able to convince my client of the importance of having two different accent colours for usability. She wanted something just as bright and vibrant as the green on the studio website, so we chose a hot pink for Everybody Holistic.
The most tricky design challenge on this project was developing a functional (yet aesthetically pleasing) design to ensure that customers could toggle between the studio and holistic booking sites easily.
I originally sketched out a universal vs. global navigation style for both sites, but both my client and I weren't completely happy with having two navigation bars on each site.
I went back to the drawing board and finally came up with the current solution you can see on the site: having a ‘return’ button on top of the holistics page and keeping holistics as a menu item on the studio page.
Optimizing for Mobile
Finally, I had to optimize both sites for mobile and make them look similar on both platforms. This proved difficult for the same reasons as the desktop site: Squarespace and Wix have radically different ways of building sites and different customization options. After making adjustments back and forth, I was finally able to create two mobile sites with similar aesthetics and responsiveness.
Testing & Result
Before completing the project, I created a short usability test to ensure users were able to book a holistic therapy using the Everybody Studio site (not Holistic) as the starting point.
I asked people who had never used the site before to book a treatment and was pleased to see that they had no issues getting to Treatments page of the Holistic site using the Everybody Studio homepage as the starting point on mobile.
Everybody Studio was very happy with the end result and the affordability of utilizing Wix's free booking software. There is also better SEO optimization, as people looking strictly for massage or therapy will have an easier time finding the site and booking their treatment than before when the two sites were merged.
Although the bulk of time during this project was spent building and synching the Everybody Holistic site, I also made some improvements to the pre-existing Everybody Studio site. It is now more user-friendly with an added prices page and more accessible contact information.