The Client
With over 80% of companies offering corporate wellness benefits and 20,000 life coaches in the US, the supply and demand for wellness services have made it imperative for wellness companies to communicate their services and value to a diverse and growing set of potential clients. So I, and a team of 3 decided to tackle a project for a company called Mindfulness Matters here in Santa Monica California. Mindfulness Matters is a business that provides life coaching and corporate wellness services. Our client wanted to enrich the lives of her customers/users by providing them with helpful tactics and guidance to give individuals a more peaceful, healthy lifestyle in their work, love, home, and day-to-day lives.
The Challenge
Our client needed us to redesign a website that facilitated customer newsletter sign-ups and the generation of customer leads for corporate wellness workshops and personal coaching.
The Solution
Our team came to the decision that we needed to fix taxonomy for the navigation/improve overall navigation, create consistent calls to action, do a content audit, create a better sense of visual hierarchy, build a more seamless user flow and build an overall cleaner aesthetic.
Our Methods
We modeled our design process after the Double Diamond framework, which is broken up into four phases: Discover, Define, Develop, Deliver.
Heuristic Evaluation
In order to get acquainted with the existing site and its opportunities for growth, we began our research by surveying the site for usability violations. The majority of issues found were cosmetic in nature, but they impacted the efficiency of the site nonetheless.
C&C Analysis
After our assessment of the existing site, we surveyed other sites to discover what features similar competitors were offering. During this analysis, we discovered the site offered most of the essential features. One potential area of opportunity we identified would be offering meditation audio tracks.
User interviews & Affinity Mapping
In order to shed light on the pain points of the site, we conducted 15 user interviews and task analyses in which we had users complete 3 different tasks:
1. Sign up for the Mindfulness Matters Newsletter
2. Sign up for a Corporate Wellness Consultation
3. Sign up for a personal coaching consultation
In order to synthesize our findings, we conducted 2 iterations of affinity mapping sessions where we looked for common themes.
The common themes we found were:
1. Users value concise and relevant information-they felt that Mindfulness Matters had an overload of text that was not scannable.
2. Users value credibility - they want to see that other customers enjoyed their experience
Persona
Once we synthesized our data we created a persona that embodied our users and their values and motivations.
.png)
%20(1).png)
Sketches
With over 50% of all internet traffic occurring on mobile, our first sketched designs focused on the mobile experience first. This type of design is cognizant of the limited space offered on a mobile interface. It also understands that users interact w/ information differently in-depth information has to be communicated in as few words as possible.
Our sketched landing page capitalized on the mobile experience of swiping. Users would be able to swipe up the page to see the categories of the services provided (personal coaching, corporate wellness, and mindfulness retreats). They would be able to sign up for a newsletter at the bottom of the page.
Mid-Fidelity Digital Mockup (mobile)
In our mid-fidelity mobile wireframes, the landing page (seen on the left) included a carousel indicator to provide a signifier to the user that there are multiple pages.
The navigation menu wireframe (seen in the center) incorporated the results of our card sorting exercise, with an improved navigation taxonomy for users. This removed ambiguous terminology, such as “more” and retitled subcategories to provide a clear context of what services are being provided.
Consistent call to actions were included for users to provide clear direction such as “book a consultation,” “Learn More,” and “Join the Waitlist.” These call to actions were made available on every page of the mobile interface as can be seen on all three wireframes.
.png)
Mid Fidelity Digital Mockup (Desktop)
The first iteration for the mobile design had a positive trickle-up effect - it allowed us to better use the desktop pixel real estate and reduce the number of unnecessary elements and content in our mid-fidelity desktop wireframes. We confirmed in our usability testing that our design helped users fulfill their tasks of signing up for a newsletter and booking a consultation with a hiccup-free flow.
.png)
%20(1).png)
Original Digital Mockup (Desktop)
The first iteration for the mobile design had a positive trickle-up effect - it allowed us to better use the desktop pixel real estate and reduce the number of unnecessary elements and content in our mid-fidelity desktop wireframes. We confirmed in our usability testing that our design helped users fulfill their tasks of signing up for a newsletter and booking a consultation with a hiccup-free flow.
First Iterations
In order to better gauge the client’s visual preference, we worked on developing high fidelity drafts of the landing page. The design was finalized after 4 iterations.
What you see here are the first 3 iterations of our design. With the first iteration, we incorporated our mid-fidelity layout and a color palette we developed with the client. Based on feedback, we redesigned the layout with a more visual hierarchy, added updated content, and experimented with lighter background colors. The second and third iteration included an updated navigational menu, a large center-aligned logo, and new icons.
%20(1).png)
.png)
.png)
Last Iteration/Final Redesign
The last iteration pared down the list of services, rounded call to action buttons, added testimonials, Instagram, updated icons, and incorporated more white backgrounds. The typography for headers was updated from Montserrat to Open Sans to provide a cleaner aesthetic. Tracking, leading, and weight was used throughout the site to provide a clear visual hierarchy.
The visual elements of the landing page were incorporated into the personal coaching and corporate wellness pages creating consistent placement of information, photos, and calls to action.
.png)
