96.6% Net Promoter Score on the updated website!
Mind Wellth
Overhauling a podcasters’ website to align with the MindWellth brand - based on feedback from actual listeners. The website offers a variety of interactions such as listening, shopping, a blog and more!
Brief
Timeline
1 month + 2 weeks
Tools
Figma, Miro, Google Sheets
UX Design + Research
My Role
Deliverables
Hi-Fi desktop prototype
The wellness industry for podcasters is a competitive field. Having a website that stands out in the crowd is crucial to help convey your brand. Selling merchandise and creating an inviting environment for listeners to tune in is essential to make your mark in the world of podcasting. The host, Chelsea Way, has the educational background and professional experience to back up her work, but her website lacks personality and doesn’t shows off how accomplished and credible she really is.
Challenge
Results
New site has 97% approval of listeners
NPS score of 96.6% after redesign!
Visual design rated “very good” or “extremely good” by all users from testing sessions
Project Goals
Update a podcasters website with branding + personality
Add more Call To Action buttons to stream MindWellth
Encourage user discovery and guide to shop catalogue
Research & Discovery
Initial Client Interview
I began this project by video conferencing with the business owner about their goals for the website redesign. The stakeholder created their site through Shopify. They communicated their primary aesthetic goals as well as their vision for the future of their brand and identity. I also discovered they had an active blog page that was unintentionally hidden from site visitors.
Competitive Landscape
I utilized a competitive analysis with the top podcasts in the same field of science-backed wellness. The goal was to apply the findings of the matrix analysis to her current website design and then conduct a SWOT analysis.
SWOT Analysis
Following the client interview, I conducted a SWOT analysis to evaluate the current state of the website and brand . This analysis process was very helpful in holistically considered problems and opportunities at hand to aid in the design process.
Key Findings
Downloadable resources are desirable resource for listeners
Professional headshots are a necessity to show personality and engagement
Catchy phrases that relate to branding and mission are used to catch audience attention
CTAS that link to podcast streaming are common
Client Check-In with Mood board
After the SWOT analysis and initial client interview, I designed a mood board. When working on a new project I like to utilize mood boards, as an efficient, visual tool to align design, goals, and ideas.
Heatmapping via HotJar
I installed Hotjar into Mindwellth’s Shopify pages to activate a heat-mapping data collection software as well as a feedback button. The goal of the heat mapping tracking was to understand where site visitors were scrolling, hovering, and clicking. After reviewing the data, the home page elicited the most significant user patterns.
Analyzing Home Page Data
Below are the key findings that the heat map data revealed. Please note that the home page is cropped in the image as the significant user focus is on the hero portion of the home page.
Analyzing the About Page Heatmap Data
Below are the key findings that the heat map data revealed.
Feedback Button via HotJar
I installed a slide-out feedback button into MindWellth’s Shopify pages to help gather more user feedback. The button was a simple addition, but helped yield data, while saving on time consuming interviews. In total 5 site-visitors left feedback; 3/5 users rated their experience on a Likert scale, while the other 2 left written suggestions.
Feedback Button Results
Numeric Results
On average, users reported 93.3% satisfaction. Indicating, overall they enjoy the site, but there is room for improvement.
Later a NPS score would be taken from both sites to help compare user satisfaction.
Written Responses
Response #1: “Maybe a page for suggested reading or something.”
Response #2: “I thought the site was easy to navigate and it was intuitive so as far as UX goes it's mostly just readability and color contrast!”
Lo-Fi Prototyping
I drafted up these basic wireframes to reimagine the website. I wanted to show the client that I plan to boost their existing content and add in supporting details to their brand. A few examples include adding social proof, CTA buttons to listen or shop, customer reviews, and a downloadable resource guide.
= changes made in prototype
Hi-Fi Prototyping
I created the prototype in Figma to reflect changes made in the wireframe, additional were added including a listen page, a blog archive page, and more. I also created a mini design system to help make sure my prototype was consistent and handoff documentation was helpful for developers. Please note, the screenshots included are not exhaustive of the entire prototype
User Testing
AB Testing: Shopify website vs. Prototype
I conducted user testing with 3 regular listeners of the podcast and have also purchased merchandise. All sessions were remote and utilized the think aloud method and a google forms survey.
I asked participants to first view the live website (created in Shopify), followed by the Figma prototype. After viewing the live website I asked them to fill out a brief survey that included an NPS score, site rating, and written response. Again the same process was repeated with the prototype and then I asked them to summarize the key differences that they liked.
The following are key findings that helped reveal the top themes that emerged during the testing sessions:
Shopify Website Findings
The catalogue was competing with the podcast on the hero page - they confused with what the main goal or focus of MindWellth.
The background image of the hero page had contrast ratio issues. One user also called the website design “cold”.
Visitors liked that you could stream the podcast on the home page.
Users like that the website is “short and sweet” & “easy to read”.
The word “extras” in the shop section doesn’t fit the category.
users had issues with the incorrect color on window devices and strange text fields (notable to share with developers). See fig 1 below.
Users felt unsure about the what the email subscription was for.
Shopping and check out is easy on the website.
Figure 1: This screenshot was taken during an interview from a Windows device displaying how harsh the contrast is.
Users stated the prototype was “more ergonomic”, “night and day” difference and a “dramatic improvement.”
Color choices were favored - users described the site as “more inviting” and “outgoing”.
The objective of the MindWellth was “front and center”.
Visitors liked the CTA buttons for to “Listen Now” or “Shop All”
Reviews on catalogue page added value and credibility for shoppers.
The blog design was liked. A hover state was suggested.
Adding emoticons instead of hashtags to the blog was also an idea that was discusses.
Users agreed that “Accessories” or “Home” is a better category title than “Extras”
Adding the Resource Guide Mission Statement to the About page was valuable to users.
Figma Prototype Findings
Figure 2: During this interview, the participant shared that they loved the resource guide and mission statement placement
Key Takeaways & Recommendations
Users claimed that the new site had a better focus on the podcast. The new prototype included clear CTA buttons and better direction of the overall message of MindWellth. It was easier to navigate the podcasts, listen, and share!
1.
It was unanimously stated that the new website was a dramatic improvement overall. This claim can also be directly connected to the boost of the NPS from 70 to 96.6.
2.
The new website brought the blog out of the shadows - the new and improved UI and UX of the blog archives were significantly preferred by users. In future iterations, adding emoticons or hashtags to help search the archives will be considered to add another layer of search-ability and enjoyment for users to tailor their tastes