Natural Mental Health Website Redesign
Overview:
Natural Mental Health (NMH) is a start-up dedicated to providing conventional therapies and mind-body skills through an online web-based platform to help users build resilience. Through the Fung Fellowship, they recruited my team and me to tackle the problem of evaluating the most engaging and effective elements to optimize user engagement with their online platform resources. Through various iterations of the design process, we narrowed our work to increase user engagement through the restructuring of NMH resources and web interface.
Role:
Product Designer
User Researcher
User Experience Design
Duration:
June 2020 - May 2021
Tools:
Figma - High Fidelity Prototyping, Miro, Excel
Challenge:
Problem: The challenge NMH came to us with was increasing user engagement with their online resources.
Goal: Our end goal, was to identify the most effective elements to optimize user navigation and engagement throughout their website.
Results: Our final product consisted of the redesign of the NMH website, where we prioritized the restructuring of key tools and resources that facilitate the user's navigation of the online mental health resources.
Background Research
To understand the mental health space that NMH is part of, we set out to research their existing resources, interact with their online programs, and familiarize ourselves with their customer base. Through this, we outlined two key paths for areas of opportunity.
Company-Focused - where the emphasis would be on restructuring navigation and interface on their website
Customer-Focused - where the emphasis would be on creating support factors specifically for users
This served to set the stage for us as a starting point going into our user research.
User Research
Our approach to narrowing down our focus started with further understanding the mental health space that NMH is part of. This consisted of centering our efforts around primary and secondary user research. This process was broken up as follows:
Primary User Research:
Contextual Virtual Interviews
Surveys
Empathy Mapping & Journey Maps
To understand the user group that NMH worked with, one of our initial steps was conducting contextual virtual interviews and surveys. Their target demographic is middle-aged white adults. We conducted interviews with both NMH and Non-NMH users to better grasp their navigation and engagement with the current website and other mental health resources. From there we then synthesized our user research using empathy mapping and journey maps.
Secondary User Research
Competitive Analysis
Human-Computer Interface Research
Revisiting NMH Resources
To understand the mental health space that NMH is part of, we set out to trace the navigation of existing resources, identify major competitors, and hone key strategies for human-computer interface in this area.
Ideation
To figure out how we would undertake our prototype, we organized our approach into phases. This allowed us to contextualize our user research, key findings, opportunity space and strategize how we proceeded with our next steps.
This is a brief outline of what our process looked like:
A big part of our ideation process involved brainstorming, which consisted of creating NMH user flow maps, tying in user research synthesis, creating personas, and more depending on what each unique phase called for.
Personas & Journey Maps
With both the user research and qualitative findings we created two Personas to help us align our design with NMH's target users. From there we worked out two Journey Maps, reflective of a new user's navigation and pain points on the NMH website.
User Insight:
After synthesizing and going over our data we complied a list of key pain points that we would later discuss in detail with NMH to solidify our design focus. Our emphasis from this point forward was on the restructuring of the existing NMH website and user interface.
Our framing of the problem at this point is summarized in the how might we question of:
“How might we encourage further engagement with NMH content by building a resource that can tailor the discovery of the mental health resource one can benefit most from?”
Solution
We focused on redesigning the NMH website. Our final design prioritized key pages and features of the website that increased engagement by providing a more personalized experience to the user. As we progressed through our user research and design process our prototype evolved. Each iteration, of our How Might We (HMW) question was reflective of how the focus of framing the problem shifted through each phase. This is a brief outline of how we arrived at our final design:
Low Fidelity Prototype:
HMW: How might we create support factors that increase engagement with NMH content?
From our first round of interviews the user insight that we gained about the NMH website was as follows:
Users found navigation confusing because there are two users presented on the website
There is no clear information hierarchy to help understand the resources offered
The emphasis on the “Shop” button made the site not feel credible
For our initial prototype we focused on these key features:
Distinguishing two users
Building Information Hierarchy
Establishing Trust through the website
Incorporating a clear distinction between the two target users and providing an organized information hierarchy, set the groundwork as we progressed to our mid-fidelity prototype.
Mid Fidelity Prototype:
HMW: How might we encourage further engagement with NMH content by building a resource that can tailor the discovery of the mental health resource one can benefit most from?
After receiving positive user feedback on our key features in our low fidelity prototype, our next step was to incorporate them into the NMH website as our mid-fidelity prototype.
Our work in this phase focused on the following areas:
Navigation Bar - we incorporated a “Guide Me” page to walk both user groups through their distinguished resources
Information Hierarchy - Brought key resources to the front page that were previously harder to find
Homepage - Incorporated building trust with the user through testimonials on the homepage
Our Challenge: NMH changed their focus to only a single user, non-practitioners.
After having presented our mid-fidelity progress to NMH we were informed that they were making a change to a single user. This was a big change because our work had centered around the issue of differentiating and engaging both users.
To realign our work we organized a co-design meeting with our client where we walked through the goals that NMH had with their website and laid out the intent they had with each page. This helped finalize our prototype and allowed us to plan the most effective way to move forward.
High Fidelity Prototype:
HMW: How might we encourage further engagement with NMH content by redesigning the website to allow users to easily discover individualized mental health resources?
Our final design came after realigning our work with the goals that NMH had, alongside the research we had previously done our high fidelity prototype honed in on the following features:
Navigation Bar:
Refinement of the navigation bar, to provide a clear and guided experience for users from the moment they get on the website and emphasize NMH programs and resources.
Homepage:
Redesign of the homepage, adding the functional integration of information hierarchy, for an effortless user interface. This included introducing key NMH foundations, laying out resources, stepping away from supplement focus, and building trust through testimonials.
Guide Me Page:
Development of the Guide Me page that focused on facilitating access to information about how to use NMH resources for new users (non-practitioners).
Subtype Page:
Development of the Subtype page, highlighting "Subtypes", which are one of the key mental health tools that NMH offers to help characterize and provide individualized resources for mental health.
Usability Testing
The goal of our website redesign was to help facilitate the user's engagement with NMH resources through the implementation of a new navigation bar, homepage, guide me page, and subtype page. Based on the Quant-UX data, our design was able to:
Make the user pathway to tailored NMH resources on the website more explicit and accessible
Create a Subtype page that engaged the user to interact with NMHs mental health tool, the subtype quiz
Provide a coherence with NMH’s values and goals and the flow of the Homepage and Guide Me page/ website
Our usability testing reported an overall increase in ease of use and clear navigation by over 200%. NMH has since implemented our recommendations on information architecture, built a foundation page and subtype page.
After implementing our designs, NMH’s website traffic increased by 134% + an increase in returning visitor rate, below are some captures of the Quant-UX website traffic measurements.
Reflection
Challenges:
Figuring Out The Focus:
NMH came to us with a problem of engagement. After recollecting as a team and conducting user research we found that personalization was one of the most important factors on a mental health website for users.
Designing For Two Users:
As we worked through creating a more personalized experience the difficulty was appealing to NMH’s two users, practitioners & non-practitioners. Through our collaborative conversations with NMH and usability testing of our prototype, we narrowed it down to redesigning the website for one user, non-practitioners.
Narrowing Prototype Emphasis:
Initially, our goal was to redesign all of the pages on the NMH website but to hone in on the impact of our work we focused on 4 aspects of the website. This included designing for the navigation bar, guide-me page, subtype page, and home page.
Learnings
To understand how to best design for a user, both user research and usability testing are fundamental aspects needed throughout the whole process.
It is important to understand the impact the client wants to make on their website and analyze if that reflects in the user journey.
Organizing content with a thoughtful information hierarchy will offer users a more personalized experience than just the aesthetic looks of a website.