![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.](https://cdn.myportfolio.com/2960dc9c-e299-4032-bd7b-29d662cbd447/cc62226f-4a83-4c42-8d3f-1cd45711b349_rw_1920.png?h=a1979768b77d7c05a680b03df5bc51b6)
View website: https://claudiastoerlein.wixstudio.io/oase
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]](https://cdn.myportfolio.com/2960dc9c-e299-4032-bd7b-29d662cbd447/3117bf1b-50ad-440c-8c0a-963af9c9b6d7_rw_1920.png?h=9de04ce68184985751a080c805cecc4d)
![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]](https://cdn.myportfolio.com/2960dc9c-e299-4032-bd7b-29d662cbd447/2259fe0e-095f-4464-86d8-2e37d58106dd_rw_1920.png?h=5e9a46a5b459ac373987e2dc49946f58)
![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.]](https://cdn.myportfolio.com/2960dc9c-e299-4032-bd7b-29d662cbd447/30b8e92a-fd1c-4c5b-b741-32331bb91a11_rw_1920.png?h=13964bff2295bcd9ccae97ff58418600)
![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]](https://cdn.myportfolio.com/2960dc9c-e299-4032-bd7b-29d662cbd447/2843d6d8-8295-4026-aea2-de19c184a77d_rw_1920.png?h=9e518bbcbc918404d2d29dd55aefdbed)
![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.]](https://cdn.myportfolio.com/2960dc9c-e299-4032-bd7b-29d662cbd447/d23489be-4699-4842-bab7-4a2b4c74d144_rw_1920.png?h=67aa3e69cbe0598a1139bf8b1ed984dc)
![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.]](https://cdn.myportfolio.com/2960dc9c-e299-4032-bd7b-29d662cbd447/2829841e-5535-4898-87c8-b808955df344_rw_1920.png?h=a855701148f1e95717f007d326306046)
![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.](https://cdn.myportfolio.com/2960dc9c-e299-4032-bd7b-29d662cbd447/5c0cf621-cbc6-47d5-bda8-58b0bc0db957_rw_1920.png?h=09b4ee360cacba4136f49e653811ceec)
![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]](https://cdn.myportfolio.com/2960dc9c-e299-4032-bd7b-29d662cbd447/b8ef8595-762d-44d7-98f4-63c88e9ee621_rw_1920.png?h=49c0c5522a52094af89246260d9c63d1)
Key Takeaways
For small and medium-sized businesses, it's possible to achieve excellent results with limited resources. Usability studies significantly contribute to designing user friendly products. WIX Studio offers professional control over responsive websites. While chatGPT isn't a blind just-do-it-for-me solution, it significantly helps inspire professional content creation, 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 now get page views from a much larger area. Business is going well." – "Someone drove 1.5 hours to see me because he liked the website so much and thought it felt professional. He said he would come again." – "I now also have a political client." – "The new website is generally very well received."
"Ich bekomme jetzt Seitenaufrufe aus einem viel größeren Gebiet. Das Geschäft läuft gut." – "Jemand ist 1,5 Stunden zu mir gefahren, weil ihm die Website so gut gefiel und er sie für professionell hält. Er sagte, er komme wieder." – "Ich habe jetzt auch einen politischen Kunden." - "Die neue Website kommt allgemein sehr gut an."
"You are such a great designer who has mastered the language of images, colors and words. I am very happy to have had the privilege of getting to know you wonderful person – keep up the good work, the world needs people exactly like you."
"Du bist sooo eine tolle Designerin, die die Sprache der Bilder, Farben und Worte beherrscht. Ich bin sehr froh, dich wunderbaren Menschen kennenlernen zu dürfen – mach weiter so, die Welt braucht genau solche Menschen wie dich."
