Task: Re-design an existing website using UX knowledge and modern UI technics
Ruk Thai massage is a Thai massage shop in Remuera that has been operating over 10 years. The shop is always busy and keeps trust by local people. The business owner approached
to me to redesign her existing website to make it more modern and relaxing to stand out among their local competitors. She wanted to use the same text with a new photo set. Although she didn't
have any particular design in mind, the client desired to have the blue and green color theme.
[Example of screenshots of her previous website]
As I have background in Alternative Medicine in general and Thai Massage in particular, it was quite easy for me to make a design as I knew how such
businesses operate. However, as the owner wanted to stand out from their local competitors, I took some time to check competitor websites to see what works well for them so I could keep this for a
new design and what doesn't work well so I would improve it or completely avoid.
Tools : Figma, and built by Developer
Duration : 7 days
My client wanted her new website to be done as soon as possible so I decided to balance between user’s needs and her business goals. We established several
meetings with the owner of Ruk Thai Massage and did a comparative analysis. After the information was gathered I started creating a framework for this project.
Although I always keep in mind that a UX designer is an advocate for users, I also need to balance business goals and technical constraints. These concerns are the foundation
for my designs. However, in this particular case, the development was going to be done by a third party company that specialises in web development, so technical constraint was not an issues, thus
I used only 2 foundations - user needs and business goals.
- Feel relaxed while browsing website
- Be able to find necessary information quickly
- Convenient online booking
- Parking information
- Higher visitor retention
- Provide online booking options
- Stand out among competitors
- Present in Google search
While browsing countless massage websites, I wanted to pay attention to their layout and visual design elements. By running this analysis, I could present
to the the owner of Ruk Thai Massage what I though was better for her website and which ideas/approaches to avoid. Some finding are outlined below.
Navigation bar can contain too many items. It starts looking very messy. To avoid this to happen and make it easy for users to
understand the navigation, there should be less items with a bit more white space around. The text also should be easy to read and understand as many Ruk Thai massage users are over 65 years old.
Pop up and over-contrasting colours wouldn't be a great idea for a massage shop as it should be relaxing thus surrounded by
not many elements.
Organised elements and minimalistic style will make users enjoy browsing and reading the website and users will know where to
focus on. To make sure that clients always feel that this Thai massage place is trustworthy and ready to get them self pampered.
I used Figma to create my wireframes. First of all, I have created 3W main sections. Here they are:
Where we are
The reasons I used Figma to make wireframes (and final design) and then hand it over to developers is to build all of this from scratch because the
business owner didn't want to maintain everything by herself, hence no template website like Wix of Wordpress. She agreed and desired to pay for changes later on in future. This website is
supposed to represented her business for a long period of time.
Header section: I wanted to make this section big and containing an image to encourage people to get the overview idea what
is this website is all about. It is important for users feel they are invited to the website and they understand it clearly. I also though to show a bit of information "About Us".
Warm services: This session includes services, packages, gift vouchers and testimonials. The description text is made to
persuade users to look after their health and well-being and hence to choose this company as their regular massage place. It is still kept simple and minimal and I used the Vidaloka font for the
section heading text to represent luxury side of the website so the client can imagine how it would be when it's ready.
Where we are: I put a interactive Google map block but wanted keep it relatively small so let user focus on other details.
Hence this section is still simple and gives a clear point what to look here for. Thus, users get what they are looking for.
Completing the design
Images & colors: As the client wanted some specific colors palette to be used for the website, I found some matching photos on
the Adobe Stock that would fit into the website by color and presented her. Then I created the primary color palette as outlined below.
Fonts: I decided to used 2 types of fonts; Vidaloka and Roboto Condensed
Using serif fonts for heading makes a website look professional and suggests the weight of history or experience. Also Sans Serif fonts are better for readability.
Logo and Heading Fonts
Ruk Thai Massage
Ruk Thai Massage
I conducted usability testing and iterated the design to make Ruk Thai website meaningful and easy to use for the user along with meeting business
I got some feedback from my users about the text being very small on mobile devices. The images also took long to load up so I asked our developers to help with
this. Now all good!
All users gave me a feedback about the alignment of some screens on mobile devices. The screens were a bit messy. So I had to re-design them for mobile devices to
make sure that every device is approachable and shows the website correctly. Now the website shows all good with all screen sizes.
See full version of Ruk Thai
Service and pricing
As the shop has more than 8 services with some details for each service, the users felt overwhelming to read it. I decided to create a separate page for services and
pricing. So, users, who are interested in services, can see more details and pricing on this page. I also decorated it with soft tone colors with massage icons.
It was exciting to finish this website and the business owner was very satisfied with it. She would like me to continue looking after the website by paying a small
maintenance fee each months in case any changes need to be done like a promotions in each month, text changes etc. or a domain name extension.
Special thanks to Redium for web-development of this project.
Thanks for reading
If you have any feedback, want to collaborate or just want to say hello, hit me up!
My other projects