Increasing Website Visits
The revamped Force HT landing page that's designed to engage visitors and seamlessly guide them into becoming valued customers. The new landing page increased website visits by 300% and visit retention duration by 32%.
Role
Web Designer
Team
2 people
Client
Force HT
Time
4 weeks
INTRODUCTION
In anticipation of the launch of Force HT's first service, they sought a revamped landing page to more effectively highlight their product and what it can do for clinics as well as patients. Drawing on my past experiences with them as a UX Designer in the service development and as a Graphic Designer creating their logo I was brought on board to create their new landing page.
Force HT
Force HT is a company that focuses on user-friendly hair transplant simulation technology that bridges the gap between client expectations and results.
They aim to modernize hair transplant consultations, establishing a mutually beneficial solution for both clinics and patients.
UX PROBLEM
The previous landing page was focused towards non-buying stakeholders. As the service was getting closer to launch they wanted to shift the focus towards paying customers:
Primary - Clinics
Secondary - Clinic patients
VISITOR JOURNEY
For this landing page, we created a type of user journey to guide the design and match the intended visitor experience. The goal was to present the product, highlight its value, and encourage visitors to become customers.
Unaware
The journey begins as the website visitor encounters the landing page. Here, they are introduced to the compelling value proposition of Force HT. Force HT could help clinics:
Educate patients and set expectations.
Get more patients.
Enhance patient satisfaction.
This would be the most important segment for the initial visitor impression, potentially influencing their decision to continue reading. Consequently, the Force HT team entrusted me with figuring out how to present the product in a manner that effectively captures visitors' attention within the critical first 5 seconds.
Curious
After capturing the visitors' interest with the introduction, we proceed to articulate the problem faced by clinics:
Hair transplantation is difficult for patients to understand.
Too many choose not to proceed after consultation.
…followed by the Force HT solution:
Base the consultation around the patient in 3d.
Plan the procedure together with the patient.
Visualize the results based on the planning.
Interested
After learning about how Force HT can help clinics, we show options for getting in touch with the Force HT team. This lets visitors begin their journey to becoming valued Force HT customers.
OLD LANDING PAGE
Evaluating Previous Design
Upon reviewing the prior landing page, there were both positive elements and areas that could be improved:
Positives elements:
Good balance between visuals and text.
Consistent colour use.
Areas of improvement:
Increase the legibility of the main text.
Focus more on impactful visuals to hook the website visitors' attention.
Better present the capabilities of the product.
NEW LANDING PAGE
Sketching
This lander was designed to have a video on the right showcasing the product in action. This video should seamlessly transition between the patient, the 3D scan of the patient, and the simulated hair on the 3D scan.
Low-fidelity Prototype
The low-fidelity prototype was designed to:
Show the product simulating the patient's hair.
Direct patients to a page focusing on patient-specific values.
Show how visuals could complement the content.
Feedback
The Force HT team welcomed the layout and the concept of an introductory video to captivate visitors' attention. However, they wanted the first impression to be brighter and evoke a more “clinical feel”.
High-fidelity Prototype
This prototype was crafted to guide the website visitor through the entire journey, starting from being unaware, then progressing to curious and finally reaching the stage of being interested. Additionally, the design incorporated thoughtful colour schemes and placeholder visuals to complement the text. The Force HT team wrote all the text-based content for the new landing page. I helped by giving feedback and advice on things like word choice and how much text to use.
FROM PROTOTYPE
TO WEBSITE
Once the Figma prototype was approved, the Force HT web developer started integrating my design into their current website. I remained deeply involved throughout the web development process, providing guidance and insights to ensure a faithful translation.
Certain functionality in the prototype was not able to be achieved due to the web hosting services' limited animation features. This collaboration not only transformed the design into a functional website but evolved it with new ways for website visitors to interact with the website.
WEBSITE LANDING PAGE
The new landing page increased website visits by 300% and visit retention duration by 32%!
Curious to see how the website looks like today?
This website was based on my prototype.
THANK YOU
Force HT
Pär Gustavsson
Arvid Karlsson (Project Web Developer)
