Task: Re-design an existing website using UX knowledge and modern UI technics

Ruk Thai Massage

Project introduction

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.

Existing website photo 1 Existing website photo 2

[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

Define

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.

User Needs

  • - Feel relaxed while browsing website

  • - Be able to find necessary information quickly

  • - Convenient online booking

  • - Parking information

Business Goals

  • - Higher visitor retention

  • - Provide online booking options

  • - Stand out among competitors

  • - Present in Google search

Comparative analysis

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 to avoid

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.

Header to avoid

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.

Header to avoid

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.

Wireframes

I used Figma to create my wireframes. First of all, I have created 3W main sections. Here they are:

Welcome page

Welcome page

Warm services

Warm services

Where we 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.

Wireframes header section

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".

Wireframes body section

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.

Wireframes contact section

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.

Complete photo 1 Complete photo 2

Primary palette

 
 
 
 

506D49

9EC690

9BC78B

FFFFFF

Secondary palette

 
 
 
 

CFF6EB

FFEEE6

DBEAFF

F9E9F8

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

Vidaloka

Regular

Text Fonts

Ruk Thai Massage

Roboto Condensed

Regular

Testing

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 goals.

Accessibility

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!

Responsive design

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.

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.

See full version of Ruk Thai

Conclusion

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!
ruby@prapaipan.com


My other projects