StudioSanté Website Redesign Concept
Project Background
Established in 2012, Santé stands out as a boutique massage and cosmetic studio in Úvaly, where the focus is on holistic care and natural wellness. Operated by a sole practitioner, Sante offers the unique touch of a certified massage therapist, aromatherapist, and cosmetologist all in one. With a diploma in each field, she brings a wealth of knowledge and skill to every session, ensuring that each client receives tailored treatments. Using only natural essential oils in every treatment, our practitioner ensures that clients experience the benefits of pure, organic ingredients, promoting both physical and emotional well-being.
Project Details
The main goal was to improve and redesign existing website as simple and engaging as possible, but limited to a static website.
My Roles & Responsibilities
As a solo web designer I was entrusted with the complete design and aesthetics of the website, from the design overview of the existing website to final version of UI design.
Design review
Competitive analysis
Website design
Adaptive design
Navigation
Competitive Analysis
Interestingly, no massage or cosmetology studios in Úvaly or the surrounding area maintain a web presence. To gain broader insights, I analyzed websites for similar studios in Prague and other EU capitals. While not direct competitors, these websites provided valuable reference points for sitemaps, information sharing, and price presentation strategies. Additionally, I explored Awwwards for award-winning examples within this niche.
Since I hadn't worked with this type of service before, I observed that studios in Prague often feature their price lists prominently as one of the first elements on their websites. Considering this trend, I decided to adopt a similar approach to provide upfront transparency to potential clients.
Design Overview
Understanding the problem
No Defined Journey
Navigation is confusing, hierarchy is not clear.
The existing website has two disconnected navigation areas, categories from one cross-linking to pages from the other - with no defined journey, users easily get lost, unclear user experience leads to frustration.
Text Overload
The overwhelming amount of text across the existing web is difficult to read, and the required information is somewhat hard to find.
Choosing the service requires more mental energy to figure out the differences between several options and applied price policy.
Old style
The look and feel of the UI on the existing website is very old-style.
Excessive layering and overuse of graphic elements such as lines, backgrounds, borders, and shadows created a cluttered feel and hard comprehension.
Brand Perception
Visual elements do not speak to our brand, they lack consistent branding and a clear strategy - across the web and FB page of the studio three different options of “brand color” were used inconsistently, and gift certificates and other graphics used yet another 2 bright colors that matched each other but not the “brand color”.
Setting out to solve
First, I identified structural inconsistencies and proposed improvements to the hierarchy. This involved streamlining the information architecture to create a more logical and user-friendly flow. To achieve this, I separated the content into five pages:
A landing-style homepage highlighting all crucial information, including a pricelist, reasons to choose the studio, a blog preview, and a contact form.
Dedicated pages for massage, cosmetology, and depilation services, providing detailed information about each service type.
A consolidated blog page, bringing together all the interesting information previously scattered across the website.
Finally, I analyzed and revised the pricelist, ensuring clarity while maintaining all available options.
Visual/UI Design
The UI design process began with wireframes, which established the website's basic structure and user flow. Once the core structure was solidified, the design progressed to mid-fidelity mockups, focusing on finalizing the placement and hierarchy of text content within the website's structure. This stage allowed me to identify any necessary structural changes based on the finalized text placement. This iterative process of wireframing and mockups ensured that the final UI design was not only functional but also visually appealing and aligned with the brand identity.
The new design incorporates only essential graphic elements for a cleaner and more focused appearance. Generous use of whitespace creates a sense of breathing room and allows crucial content to stand out. This enhances the overall feeling of calm and organization. A single, modern sans-serif typeface is used in varying weights throughout the website. This creates a clean and consistent visual language, promoting easy navigation and information consumption. Enlarged elements are easier to read and navigate through. Apart from black and background color only the brand color is used, establishing consistent branding across the website. Separate layouts were created to ensure an optimal user experience on desktop, mobile, and tablet devices.
Main page
Inner pages
Takeaways
The design layouts are complete and have been delivered to the studio owner, ready for the development phase.
This project reinforced the importance of simple, intuitive navigation, and clear content presentation. Reorganizing content into distinct pages created a more logical flow. Making the website easy to use will be appreciated by potential clients, especially those new to the studio's services.
Solely owning the design process provided a significant learning opportunity. From restructuring content to establishing a visual identity, this project allowed me to independently exercise my design skills, fostering greater confidence and understanding of the end-to-end web design creation process. This project honed my ability to analyze existing content, identify structural weaknesses, and propose effective solutions for information architecture.