RESPONSIVE WEB UX/UI DESIGN: Relaunch of a Landing Page for a Massage Studio (low budget project) by Miriam Elting (www.styleistheanswer.me); [Hero picture of massage studio landing page on Smartphone, Tablet, and Desktop device on a marble table next to a Monstera deliciosa plant]; October 2023 (1 week); Problem: The previous website is self-made and not responsive. The navigation is confusing, content is often repeated, and the landing page is very text-heavy. Legal pages are non-existent. Given the project's low budget, achieving the best possible result with simple means is paramount.; Goal: Create a modern, user-friendly landing page on the WIX platform. The landing page's purpose is to inform users about the type of massage, the massage offerings, the massage therapist, and provide contact details. Bright colors, especially bright green, are to be used. Images will be selected from free stock archives. The inclusion of a chat function and Google Maps integration is desired. Text can be rewritten.; My Role: UX/UI Designer, UX/SEO Copywriter, SEO Specialist; Responsibilities: Analysis of the current state, website restructuring, creation of the color theme and font selection, website implementation including SEO and accessibility enhancements for all users, usability testing.

SMARTPHONE Landingpage video

TABLET Landingpage video

DESKTOP Landingpage video

Analysis, UX Research, and Target Group Definition: I analyzed the current marketing materials and conducted interviews with existing and potential customers. Through research and client conversations, I identified two main user groups: working, health-conscious adults aged 25-45 who seek relaxation or muscle treatment due to health challenges or sports activities. Analysis of the existing website UX revealed that users found the navigation confusing and struggled to find information. The website contained too many pages with repetitive content, leading to user overwhelm. The website's lack of responsiveness exacerbated navigation difficulties. Potential customers doubted the service quality due to the website's appearance and architecture. [Screenshot of Homepage of previous website and picture of current flyer]
Ideation and Information Architecture: Using research findings, target group definitions, and competitive analysis, I started the ideation process on paper. This allowed me to optimize the information architecture (IA) for a clear one-pager that contained all essential and necessary information. Additional information is accessible via pop-ups. The website includes the required legal pages and an "About Me" page to foster a personal and confidential therapist-client relationship. The clear IA facilitated the creation of paper wireframes, approved by the client.
Digital Realization: To minimize implementation costs, we proceeded directly with the digital realization in WIX Studio. This was possible due to the simplified IA and allowed design freedom. For best responsiveness I created the design in desktop, tablet and smartphone size. For demonstration of the process here the desktop verison: Hero: The user is greeted an hooked emotionally by a hero image and relevant text. From here, with a click, users can easily access information about massage offerings, the massage therapist, and contact details. A chat option is available throughout the page. [New hero section of landing page compared to previous home page]
Intro: Right after the hero section, the user is picked up by a convincing argument as well as personality and confidentiality. Then he or she learns more about the wellness massage, hot stones, and aromatic oils. The user can also find out more about the beneficial effects of the various oils via a pop-up. [Screenshot of new introduction section compared to related previous pages.]
Treatments: The website maintains a consistent structure, with sections dedicated to massage details, benefits, options, and prices, organized in the order of selling purpose. Pop-ups provide further information about pregnancy massages and vouchers. The headline remains fixed on the page, and users have the option at any time, once they have found their desired massage, to proceed to the contact details for a booking with a simple click. [Screenshot of new landing page section for massages and prices compared to related nine previous pages]
Massage Therapist: The therapist's introduction section enhances the user's personal connection with the therapist. Headline, again fixed on the top of the page, and color theme change to clearly emphasize on several levels that the user is in a new area. If users want to find out even more about the massage therapist, they can follow a link to the "About me" page. [Screenshot of new landing page section introducing the massage therapist compared to previous "about me" page.]
Contact: A motivating statement and an image emphasizing the special hot stone massage service initiate the contact section. Users can easily access all necessary information, such as opening hours, directions, and contact options. While the chat option is available throughout the website, users can also call or send an email with a simple click or use the contact form. The site concludes with the necessary legal information and links. [New contact section of landing page in the footer compared to previous contact page.]
Colors, Fonts, and Images: The main colors chosen are light green and a warm neutral tone, with purple as a contrasting color for text and sections related to the massage therapist. [Picture showing color scheme set up in WIX studio] Cormorant Garamond Light serves as the decorative font for headlines, complemented by the easy-to-read Avenir Light font for body text. [Picture showing font setup in WIX Studio for h1 to h6, and paragraph 1 to paragraph 3] All images have been selected from free stock sources, to minimize project expenses, and were adjusted to ensure a overall uniform appearance.
UX Copywriting incl. SEO and NLS: I added essential headlines and adapted texts to align with UX, NLS, and SEO guidelines, incorporating a more personal and informal tone. While descriptions of massages were mostly retained, some were shortened. The "About Me" page's text was entirely revised to emphasize passion and personal commitment. I used chatGPT to assist in this process. ChatGPT generated emotionally engaging, SEO- and NLS-optimized text, which I customized based on client and therapist input. [Picture of new "About me" page compared to previous "About me" page]
Accessibility and SEO: For accessibility and SEO, headings, subheadings, and body text were marked accordingly in the code. Alt text was added to images, and the website was equipped with relevant metadata. The accessibility of the color contrasts I checked with Contrast Checker from webaim.org. SEO keywords appear throughout the text, enhancing the website's relevance.
Influence of the Client and Usability Studies: The client was involved in color choices and design reviews, that gave her the opportunity to adapt the final product to her personal preferences and needs. Several small usability studies with end users were conducted on different stages of the design process to enhance user-friendliness and optimize the final result.
Hero picture of UX designed massage studio landing page on Smartphone, Tablet, and Desktop device on a marble table next to a Monstera deliciosa plant
Key Takeaways: For small and medium-sized businesses, it's possible to achieve excellent results with limited resources. Usability studies significantly contribute to designing optimal products. WIX Studio offers professional control over responsive websites. While chatGPT isn't a blind solution, it significantly aids in professional content generation, saving time and delivering exceptional results. Impact: "The new landing page is just incredibly beautiful and I've already received so many great compliments on it."
I hope you enjoyed this case study.

You may also like

BRANDING: Market Research + Positioning - Case Study
2015
VIDEO RECORDING + Explanatory EDITING + Icons
2022
Artist Branding + Web Design with eCommerce
2022
Logo Design: Herzraum
2020
Editorial Design - Book
2014
Editorial + Illustration: Astrange Magazine Berlin
2017
Branding + Responsive Web Design – Blog
2022
EDITORIAL + ILLUSTRATION: MAGAZINES + Newspaper (gif)
2017
more WEB DESIGN (gif)
2019
Photography: Focal Length / Aperture Comparison
2015
↑Back to Top

We use necessary cookies to make our site work. We’d like to set additional cookies to understand site usage, make site improvements and remember your settings. View ourPrivacy Policy
Accept Decline