Website Redesign
Mantality
Health
Service
Website Redesign
Timeline
Apr 2022 – Aug 2024
Industry
Medical
Website:
Goal
Mantality Health approached regarding a potential website redesign project for their official website.
Mantality Health was looking to get more leads through this website and offer an enhanced booking experience for their current patients. As a freelance web developer and ux researcher, my goal was not only to come up with ideas which can help generate more leads but also implement them.
Challenge
Since Mantality deals with Men’s personal health which is a sensitive topic and a lot of men are afraid to talk about or consult a medical professional for the issue they might be facing. It was essential to come up with an approach which is not very aggressive and make them feel safe ensuring the confidentiality is maintained.
Outcome
The final website offers an improved user experience with its user-friendly design and a strong focus on generating more quality leads.
The website is now live and can be accessed using the link below:
Project Timeline
The project took 8 months, however do note that I am still working with Mantality as a contractor, we are working on backend parts for patient portal.
Tools 🛠️
For Designing, Research and Wireframing:
Miro: Research and Brainstorming
Adobe XD: Wireframes and actual design
For Actual Development:
– WordPress & Elementor: Most frontend pages are built using Elementor on WordPress
– IDE: VSCode: I chose VSCode as my IDE tool
– Laravel: Some parts of the website was built using Laravel PHP Framework
01. Discovery ☎️
The project began with me going on regular calls with client and looking at who their audience really is and where we can find them.
User Research:
To understand the needs of men seeking telemedicine solutions for men’s health concerns, I developed user personas. These personas were created through a combination of methods, including desk research on men’s health trends and potential telemedicine user behavior. I also considered insights from online forums and surveys focused on men’s health experiences. By synthesizing this data, I identified key user archetypes facing challenges related to testosterone replacement therapy, erectile dysfunction, and overall well-being. These personas – The Busy Professional, The Skeptical Athlete, and The Newly Married Man – represent the diverse motivations, needs, and frustrations of potential users when navigating men’s health concerns.
✦ Started on board, pinning the aspects of websites – including sitemap, CTAs and third party integration.
✦ Created a low fieldity wireframe and got insights from client on the same.
✦ Once the low fieldity wireframe was ready and we had design guide, started with actual design in Adobe XD.
To map out how guys would navigate Mentality Health’s website, I sketched some quick wireframes. These are like blueprints, but instead of fancy graphics, they use boxes and shapes to show where things like login buttons and appointment booking would go. This lets me focus on how easy it will be to use the site before actually designing the website.
02. Design 🎨
To make sure Mentality Health’s website feels polished and easy to navigate, I put together a design guide. Think of it as a recipe book for the site’s look and feel. It covers everything from the colors and fonts we use to how buttons and pages are laid out. This keeps things consistent and avoids any confusing mismatched elements.
After the design guide and wireframe, it was time to design the real thing:
03. Desktop Development 🖥
It’s always easier to start with desktop development even today. Though a lot of people argue about mobile-first design. Developers like me believe that going from big to smaller screens is still the best way to approach a website.
I started by setting up a staging environment on my server, installing WordPress, setting up plugins like Elementor and then beginning with the actual website development. During all these, I had to make sure I was following GDPR and Accessibility guidelines as those are not just good to have but are essential especially when the client deals with medical patients.
04. Mobile Development 📱
Once the desktop version was up and running, I got on another call with the client and asked them about their opinions. After getting the approval I started making things responsive. As I mentioned, I like going from big screens towards small screens and that’s exactly what I did. The result? A website which can be accessed on major devices around the world.
05. Handover 🤝
The journey continues: I am still working with Mantality Health as a freelancer, we are currently looking at expanding to Patient Portal, subscriptions, shop and more.
I just wrapped up a fantastic handover meeting with the Mantality Health team, and things are looking great for their upcoming telemedicine platform launch! Here’s what we covered:
- User Needs in Focus: Remember all those workshops we did? I captured the key takeaways to ensure the Mantality Health team has a crystal-clear understanding of user needs and the strategic direction for the platform.
- Research: I compiled all the research findings, including the user personas we developed (The Busy Professional, The Skeptical Athlete, The Newly Married Man) into a handy research vault. This treasure trove of insights will be invaluable for future design and marketing decisions.
- Prototypes: I handed over the prototypes we used for user testing. This allows the team to revisit the design iterations and see how they impacted the user experience.
- The Website: As I mentioned already, the website is now live and doing amazing. I am still in touch with client and they are really happy with how the whole project turned out.
It’s surprising how I met someone from Mantality over facebook and we collaborated together and I got the chance to work with a client in the medical business with well over 20 clinics in the states.