2019
Role
Product Designer, Visual Designer,
Marketing Designer,
Product Manager (post-release)
Tools
Adobe Photoshop, Adobe Illustrator, Google Analytics,
Google Tag Manager, Html/CSS, Tilda
Methods
Competitors Analysis, User Research, Hi-fi wireframing, Usability testing, Visual Design, Qualitative Research, Quantitative Research
Overview
LaserBar, a leading provider of in-person health and beauty services, sought to improve their website to establish a new lead generation source. They offer a variety of 12 distinct services, each with its pricing strategy depending on the chosen package and the quantity of procedures.
Business Goals
Business main goal was to showcase their comprehensive range of services and fine-tune the website for effective utilization in paid advertising campaigns, all aimed at boosting their service sales. Key performance indicator chosen to gauge the success of the new website was the conversion rate (leads)
Main Problems
The primary issues to address were pinpointed through an analysis of the existing website metrics and interviews with business owners.
All the services that company provide were not properly shown
No proper analytics goals were implemented
Not engaging, old-fashioned website
Poor mobile and tablet experience
Website did not disclose the benefits of the company and services
Market research insights
Full market research text
Before beginning work on the site, I collect data on all our competitors and analyze their online presence and what makes them stand out. As my clients business mainly serves the local area, I focused on competitors in the same city. Back then, a lot of local competitors didn't have a strong online presence. Some of them didn't even have a website, and most of their marketing was done through social media. Even though we didn't face much local competition at the time, I recognized the potential for a new strong player to emerge in the near future (and that's what happened). I discover nationwide franchises of salon chains that are actively developing in different cities. That's why I gathered references from successful studios in other cities and countries to gather and implement the best practices to make my client ready for new competitors to appear. This was a great time to roll out the updated website because my client had a chance to build a strong reputation and position himself as first and top professional in his nieche.
HIGHLIGHTS:
Competitors didn't have a strong online presence at the moment.
I recognized the potential for a new strong player to emerge in the near future, including nationwide salon chains.
A great time to roll out the updated website to build a strong reputation.
User research insights
Full user research text
My primary goal was to identify what aspects of the services were most crucial to our users and prioritize this information in the page structure. To gather user insights, I employed various methods. This involved conducting user interviews, consulting with the business owner, and compiling comments and reviews from Google Maps, Facebook, and Instagram related to similar services.
Drivers
Positive reviews, especially from people they know.
Affordable pricing.
Trust in a skilled and professional staff.
Confidence in the use of high-quality equipment.
Barriers
Fear of experiencing pain during the procedure.
Concerns about potential side effects.
Worries that the results might not meet expectations.
Doubts about their patience to achieve desired results.
Keeping these insights in mind, I shaped the structure of the page and information in such a way as to increase the chance of user conversion. I like to formulate a "one-liner" from the main insights for myself, and in this case it may sound like this:
"1000+ clients will aprove that you can get rid of problem {X} quickly and without pain in LaserBar. Enjoy 50% off for your 1-st procedure and witness the result instantly."
Website structure
Defining website concept
Full concept description
At the beginning of the development process, I discussed with the business owner how the website would be promoted after its release. We concluded that the majority of traffic would come from social networks such as Facebook and Instagram. With this in mind, I approached the site's design with care, avoiding the frequent use of explicit or overly emphasized nude photographs. This precautionary step was taken to prevent potential issues with social media ad moderation in the future, ensuring compliance with their advertising policies. Instead, I opted to use stock images and graphics in place of actual photographs In addition to the main pages of the site shown in the diagram above, I chose to create separate page templates for each procedure and distinct parts of the body. As illustrated above, apart from the primary pages in the diagram that are part of the user flow, I also designed pages that are only accessible via links. This was done for advertising convenience, allowing us to direct traffic to specific personalized offers that are not available to everyone.
HIGHLIGHTS:
The website must comply with Meta advertising policies.
Avoid displaying explicit or exposed body parts.
Separate page templates should be created for each procedure and distinct parts of the body.
Separate pages will primarily be accessible via links for exclusive offers and marketing purposes.
Pages structures examples
Main page Hero section
In the hero section of the main page, I highlighted all the key drivers identified during the user research stage and aimed to address as many barriers as possible. I applied a similar approach to all procedure pages throughout the project.
1
I opted to place the most popular flagship service, laser hair removal, on the homepage's first screen. Often this procedure becomes a starting point after which clients begin to trust the company, often leading them to explore and opt for other procedures. So, I aim to convert them right away at this stage.
2
Social proof block. By clicking on it users will be redirected to reviews page
3
-60% first procedure + [Reserve] button which trigger form to submit and reserve first procedure with discount
4
A brief description of laser hair removal and the technology used. Title "Quickly and Painlessly" handles one of the most important barriers to registration for the procedure. Clicking the [Play] button launches a modal window containing a video clip illustrating the procedure process, helping potential clients understand what to expect.
Procedure page
1
I prioritize placing the city name right before the name of the procedure, as many users will land on this page from social networks and they should immediately recognize that the offer is specific to their city.
2
A brief marketing description of the procedure with the discount highlighted. Clicking the [Play] button launches a modal window containing a video clip illustrating the procedure process, helping potential clients understand what to expect.
3
Submission form with the price before and after discount, call to action and a mobile number mask.
4
A calculation showcasing the user's potential savings by booking an appointment immediately. While displaying the old higher price alongside the new lower one, as previously shown, may resonate with some users, others may prefer to see the exact amount they can save. I've included this feature to ensure that the benefit is easily accessible to a wider audience.
5
For users who may not have the chance to watch the procedure video above, I have provided a schematic representation of the procedure process.
Results
After the new site was launched and analytics were installed, we immediately noticed great perfomance according to metrics.
The strategy of having multiple pages for each procedure proved successful during advertising campaigns. Personalized ads featuring specific offers, which then redirected to the corresponding offer pages, achieved a high conversion rate to leads, sometimes even surpassing direct branded traffic to website.
Notably, ad moderation and landing page approvals proceeded smoothly.
While engagement metrics, such as average session duration and pages per session, didn't exhibit high numbers, this outcome was anticipated. Typically, users' journeys culminated on the procedure landing page where they submitted applications, resulting in a high conversion rate to leads (6.59% on screenshot).
High Conversion rate of 6%+ were achieved
Landing page approvals from Meta moderators went smoothly without any issues.
My future ongoing contribution in project
After the initial launch of the site and proof of concept, the client wanted to scale an approach with a variety of landing pages for different offers. My further work on the project consisted of optimizing existing landing pages for new types and packages of procedures, as well as for new marketing hypotheses. Also, my long-term cooperation with the client consisted of the constant provision of marketing materials, both static and animated for social media and Meta ads.
