Zen et accompagnement.M
A responsive website for an energy healer
Overview
My role
UX researcher, UX designer, UI designer
Deliverables
User Research, UX Design, product branding, high-fidelity version
Tools
Figma, Adobe illustrator, Google survey
Time spent
65 hours
Project background
Marylène, an accomplished energy healer situated in a little town on the French west coast, caters to individuals seeking alternative health solutions and exploring innovative healing methods. While relying on word-of-mouth referrals thus far, she is ready to expand her clientele by establishing a professional website that accurately reflects her expertise, values, and commitment to holistic well-being.
Goal
Crafting a responsive website that authentically represents Marylène’s healing practice, values and unique approach to energy healing.
Challenges
Tackling sensitive topic
On one side, you've got those who are really cheering for the benefits of certain methods. On the flip side, some are a bit unsure. Wrangling interviews for insights has been a bit of a puzzle, and collecting solid survey data also proved to be a bit of a challenge, despite making the rounds in different Facebook groups.
Flying solo for this project with a tight deadline to work with 🚀
Branding and copywriting from scratch
In Marylène's case, with her practice relying solely on word of mouth, there was no existing branding or copy. I took the initiative to conduct thorough research, immersing myself in the topic. Collaborating closely with the stakeholder, my goal was to ensure authenticity and clarity in every aspect.
Already want to check-out the product?
Design process
Research
Market research & competitive analysis
To create a website that truly reflects the client's energy healing practice and values, I immersed myself in the daily lives of practitioners to grasp the complexity of their practices. Understanding the various practices, why people seek them, and the benefits they offer was crucial. With a solid grasp of these elements, I felt confident enough to analyse competitors and examine how they structure their websites and present information. I specifically explored websites of practitioners in France, with a focused analysis of three in the same area as my client: La Rochelle.
The highlights
The explanations of the methods use language of varying complexity, which could be difficult for some users to understand on certain website.
Use of the ‘I’ throughout the website to maintain a personal tone.
All four websites had a significant amount of text, which could be overwhelming for visitors.
Each website included a contact form and showcased their practice prices.
Alright! With a solid understanding of the market, the practice, and Marylene's competitors, I shifted my focus to gaining insights from the patients themselves. I conducted five user interviews and distributed a survey to gather valuable insights into their motivations for seeking this type of practitioner.
What were my specific objectives?
What motivates individuals to seek the services of an energy healer?
What essential information should one understand about a practitioner?
How do people make decisions when selecting a practitioner to consult?
What are their feelings about book clubs, including their motivations and concerns?
Getting to know the user
For this project, I conducted interviews with five individuals:
Three are patients of the practitioner.
One is a colleague of the practitioner.
One was a patient of another practitioner in a different region of France.
The highlights
Engaging with an energy healer is viewed as a complement to traditional medicine, a journey to comprehend pain rather than merely alleviate it.
4/5 interviewees and 67% of the survey participants affirm that recommendations play a major role in the selection of a practitioner. In instances where personal recommendations aren't available, prospective clients turn to online reviews on Google or practitioner websites.
When looking for a practitioner, people focus on getting to know them before deciding. They often trust their instincts when choosing between Practitioner A and Practitioner B.
In the quest for gaining more insights, I carried out a survey with a special focus on understanding the needs and expectations of current or future patients seeking the services of an energy healer.
In total, 26 people have answered to it.
User feedback gathering
Challenges
Challenges
Struggling to find participants, especially those beyond Marylène’s patient, due to the sensitive nature of the topic.
Working on establishing trust with interviewees to encourage openness.
How did I get over the challenges?
Despite time constraints, I had to exercise patience in finding interviewees. This involved posting in various Facebook groups and leveraging my network. Once I got to the interview part, it was essential to ensure they felt confident enough to open up. At the beginning of each interview session, I took the time to explain the project, reassure them about the confidentiality of their answers, and allow them to get to know me. This helped establish trust and rapport. Since the interviews were conducted virtually, I also made sure they were comfortable with using video. While some were completely fine with it, others preferred to turn off the camera once we started delving into the questions.
Meet Jeanne
Meet a 52-year-old French teacher, a nature enthusiast, and DIY aficionado. She values understanding pain rather than just making it go away. Connecting with individuals who share her values is essential to her...
Jeanne’s challenges:
Limited tech-experiences
Information overloaded
Find the right practitioner
Strategy
How-Might-We questions
How might we empower Jane, who's on a quest for safety and confidence in choosing an unfamiliar practitioner like ZE.M, to accompany her on her growth journey?
Some solutions involve:
Incorporating the use of 'I' throughout the website.
Presenting methods in straightforward language.
Providing a warm introduction from the practitioner.
Ensuring easy contact through an available contact form or phone number
Product goals
I've outlined the project goals before delving deeper into the project and considering the previous 'How Might We' questions. These goals will serve both the user and the business, acting as a guide for future product development and helping determine which features to include in the website.
Crafting an intuitive application for Sarah
After setting goals and deciding on key features, I created a sitemap to show how different parts of the website relate and to make sure everything was organized clearly. The goal was to design a website that's easy to use for people of all ages and tech skills.
Sketches and mid-fidelity
Now it's time to bring my thoughts to paper. I prefer using a pen and paper to explore various ways to structure my wireframe. However, since my sketches may be a bit messy for others (though crystal clear to me), I'm presenting mid-fidelity designs to provide a clearer overview of the project's direction.
Before applying styles, the mid-fidelity wireframes allowed me to establish visual consistency and hierarchy across various screen sizes. In these wireframes, I incorporated common patterns tested on our competitors' websites and included elements that directly addressed users' goals, needs, frustrations, and motivations.
Branding
Defining the tone of the website
When it came time to define ZE.M's branding, I created three different mood boards for the client to choose from, each exploring a unique presentation style.
Mood board 1: Embracing a grounding and nurturing atmosphere, this mood board combined deep, dark brown tones with intense green hues. It conveyed a connection to nature and the soothing embrace of earthy energies, reflecting the essence of her healing practice.
Mood board 2: This mood board offered a softer and more delicate tone, blending gentle beige, clear rose, pristine white, and very light brown shades. It exudes purity, serenity, and tenderness, inviting visitors to experience healing as a gentle and nurturing journey.
Mood board 3: Introduced a calm and harmonious mix of colours; this mood board combined light brown, white, a touch of violet, and light green. It created a tranquil and introspective ambience while maintaining a sense of healing and inner exploration.
After presenting these mood boards to the client and discussing her preferences, she expressed a desire for a blend of all three, along with adding yellow. With this feedback in mind, I created a fourth mood board aligned with her values and energy.
Creation of a logo
Through a quick analysis of competitors’ logos I could observe how circles and cycles have a significant presence within the realm of energy. Just like a circle, energy lacks a definitive beginning or end; it has perpetually existed and will continue to do so. As for the font choice, either a sans-serif typeface or a handwritten style can be employed. However, logos were either very complex with a lot of details or simple (based on a circle and a title inside) but not thought for vertical options.
It's essential that Marylene's logo aligns with current trends, utilising a circular shape that symbolises both energy and femininity. The design incorporates three key elements: the business name, a hand, and a play on words between 'Zen et accompagnement.M' and 'Zen.' Considering the research components and the need for patients to feel confident in a practitioner, a serif typeface was considered the most suitable choice for conveying experience and trustworthiness in the business name. Additionally, the 'ZEM' portion is styled as if written by hand with a bold pen stroke, aiming to create a memorable logo that stands out from the ordinary.
Since the primary logo's rounded shape might occupy considerable space on a website, it was essential to devise a secondary logo specifically for the tablet and mobile versions of the responsive website. This secondary logo features the 'as if' handwritten ZE.M
Developing serene iconography
To focus on a simple but explicit and calm website, I developed iconography to illustrate the ‘what for’ section. The idea in it is to help future patients to visualize in one look of the website what can they fix through those methods.
I drawn four icons:
Emotional healing
Trauma recovery
Physical wellness
Personal growth
Photography
Defining a suitable image strategy was crucial. Based on the mid-fi configuration, each method page of the website consists of two sections: the "what is it" part and the "what to expect" part.
For the "what is it" section, it seemed essential to select wellness images featuring crystals, symbolising new beginnings.
Given the significance of nature in this practice and the close connection energy healer patients have with nature, the "what to expect" section is illustrated using the language of flowers.
Hypnotherapy page: Illustrated with a dandelion flower, symbolising hope, healing, transformation, and renewal.
Cellular memory: Represented by pink lilies, symbolising rebirth, passion, and love (in a non-romantic sense), reflecting the deep emotional work involved in cellular memory therapy.
Reiki: Depicted with orange tulips, symbolising energy and vitality, reflecting the essence of this Japanese form of energy healing.
Prototype & testing
Let’s infuse calm colours into the wireframes!
*For the purpose of the portfolio and project comprehension, the content has been translated into English. However, the client received a French version, and the website will be created in French.
Ready, set, test!
After completing the high-fidelity design, giving the website a realistic appearance, I carried out a second usability test to pinpoint the strengths and weaknesses of the project. The methodology employed involved allowing users to navigate through the website independently.
Quick details
Usability tests made on 7 people
The practitioner
A patient of the practitioner
The daughter of the practitioner
Group crits of 4 people (none of them were familiar with energy healing)
What was I looking for?
Does the website correspond to the practitioner’s personality
Do users correctly understand the straightforward task flow?
The highlights
All 7 participants successfully navigated to the contact page.
All 7 participants found the website to be clear, straightforward, and calm as expected.
4 out of 4 participants who were not familiar with the methods easily understood what the practice entails.
2 participants who knew Marylène felt that the website perfectly matched her energy and personality.
Little detour to the UI Kit road.
As we neared the project's end, I made a UI Kit as a guide for future design updates. It's a document that will grow with the website.
“It clearly meets my expectations even though I did not know what I wanted exactly”
— Marylène
The impact of wording: During the group critique, while exploring the website, 4 users assumed they could book an appointment directly from it via the CTA. However, Marylène's practice involves a preliminary contact, free of charge, via email or phone to assess the patient's needs and determine the most suitable therapy. Consequently, I replaced "Book a session" with "Schedule a session" to better align with this approach.
Hierarchy adjustment: Next, I refined certain design elements, focusing on hierarchy management both in terms of typography and button size to ensure coherence and alignment. Primary buttons were enlarged for prominence, while secondary ones were scaled down slightly, as they appeared overly large.
Refinement and Iterations! 🖊
Final thoughts
What have I learnt?
I really enjoyed collaborating with the stakeholder on this project, starting from scratch. One of the biggest challenges I faced was ensuring timely feedback to stay on track with deadlines. I've learned that maintaining close collaboration from the beginning and gathering feedback early in the process is essential for meeting deadlines effectively.
Additionally, I realised the difficulty of gathering insights from people on sensitive topics like energy healing. Despite its increasing popularity, many people are still hesitant to share their opinions, and for the ones who are willing to are those who don't use technology and aren't easily reached through social media groups. In that case, I could overcome the challenge by leveraging Marylène’s network.
Next steps
The client asked me to design and build the website once this one had been designed. However, due to time constraints, I could not build the website straight after the design was done. The next step is then to build it on one of the platforms such as squarespace, webflow or wordpress.
Mark
End-to-end application | Branding
Check out my other projects
Netflix TV
Adding a new feature