Mindfulness Matters
background
Role: UX Designer & Researcher
Tools: Figma , Sketch
Duration: 2 weeks
Team: 4 designers
Client
Mindfulness Matters is a health and wellness company that offers personal coaching, corporate wellness, and mindfulness retreat services.
Challenge
Our team was tasked with redesigning the client’s website to encourage more users to book consultations for personal and corporate services.
The Process
Researching the Site (Heuristic Eval.)
We began our research by surveying the site for usability violations.
Our evaluation revealed violations mostly impacted navigation of the site.
Researching Competitors (C&C Analysis)
We surveyed other sites to discover what features similar competitors offered.
Our C&C analysis revealed that the site offered all of the essential features.
Researching Users (Task Analysis)
To better understand users needs, we conducted 17 interviews and task analyses.
We instructed them to complete 3 tasks according to our client’s priorities:
Sign up for the Mindfulness Matters newsletter
Sign up for a corporate wellness consultation
Sign up for a personal coaching consultation
Results revealed that users don’t have difficulty completing the tasks.
Instead, users expressed concerns about the content of the website.
Defining the Problem (Affinity Mapping)
We synthesized our findings by conducting 3 iterations of affinity mapping.
Three of the most notable themes that emerged were:
I value clear, relevant information
I value scannable information
I value credible professionals
Our users felt the site had an overload of text that lacked clarity.
They also wanted to see concrete examples of our client’s credibility.
Prioritizing Features (MoSCoW Method)
We prioritized our features according to the client’s need to focus on personal coaching services, corporate wellness services, and newsletter subscriptions. We also prioritized testimonials because of our users’ need for credibility.
Challenges With Content and Information Architecture
This project was uniquely challenging because the main issues with the site, as revealed by our research, were things we didn’t have a lot of control over, namely content and taxonomy. The client offered services with ambiguous terminology such as Clarity Call, The Shift, and Love + Relationships.
Our main challenge was in trying to provide clarity to users, while remaining authentic to the client’s branding. Ultimately, we realized the solution was to include descriptive subheadings such as 75-Minute Call, 6-Month Coaching Program, and Love & Relationship Coaching.
We also made sure to guide the client in producing condensed, straight to the point descriptions of company services. We provided length constraints and tested the content in front of users. Ultimately, our usability tests confirmed that users were receptive to both the improved taxonomy and content.
Understanding the Users (User Personas)
Our two users are an HR manager looking for corporate wellness services, and a young professional looking for personal coaching services.
Sketching, Wireframing, and Testing for Mobile
Because it’s easier to scale up than down, we implemented a mobile-first design approach. Our initial mobile sketches took advantage of swiping to showcase the client’s three main services on the homepage.While creating the wireframes, we made sure to include:
Our reworked menu that replaced ambiguous terminology with retitled, intuitive categories that clearly identified the services being offered
Consistent call to action labels like “book a consultation” or “learn more”
The condensed content, such as one-liners, for improved scannabiliy
After sketching, we created a clickable prototype and conducted 4 usability tests that confirmed our user flow was smooth and our content was clear. Then we jumped into designing in high-fidelity.
Style Guide and Hi-Fidelity for Mobile
We worked together with the client to choose a color palette made up of mostly soft or neutral colors that would create a clean, minimalist and “professional” aesthetic. We chose fonts that would also provide for a clean aesthetic.
Desktop Design
After 4 rounds of designing and iterating according to client feedback, we arrived at our final desktop design , which included features missing from our mobile interface such as testimonials, a summary of services, press features, and an Instagram feature. We also experimented with more blank space, segmentation using different colors, and visual hierarchy using bold font. The visual elements of the landing page were incorporated into the personal coaching and corporate wellness pages to create consistent placement of information, photos, and call-to-actions.
Future Considerations
• Add more photos of client “in action,” as requested by users
• Track and assess site analytics to analyze impact of design on conversion rates