Project description:
1. Page audit (looking for UX/UI and technical issues that can potentially impact conversions) + analysis of data provided by the client.
2. Desk research + benchmark with the industry.
3. Defining user and company goals (current and future demand).
4. Building personas.
5. Creating Customer Journey Map and User flow.
6. Defining website structure.
7. Sketching website (Lo-Fi).
8. Creating clickable mockup (w:1440px) for:
a. Homepage
b.1/b.2 Pricing page x2
c. Product page
d. Order page
e. Confirmation page
1. Page audit results:
a. Critical (functional):
- during booking process BACK button (in browser) is causing error and booking process is lost (impacting mainly mobile and low resolutions - on that screen sizes "back" button placed in the bottom of the page, so is not visible).
- when user press BACK button, change any option, go forward and reach a step with inputs for providing name, email, etc. there is an error which is not allowing to complete the form without restarting process.
b. UX:
- too many forms and possible methods of contact (unclear purpose of each).
- too many CTAs.
- unclear information structure.
- huge cognitive load - too many options to choose (high amount of different services presented on homepage, product cards are unclear).
- last step for providing personal data looks like confirmation page and end of process, so users were not finishing reservation process and reservation wasn't send to company's system.
- hero banner with laughing woman during depilation - isn't showing right emotions.
c. UI:
- vertical (for desktop) and not user-friendly design of form for providing user data.
- no validation of data.
- important elements like forms and CTAs are placed out of first screen (no anchor link and no active elements).
Website before redesign:
Homepage (top section)
Services presentation on homepage: (pricing)
Booking process (step 1) - Service choosing
Booking process (step 2) - Locations choosing
Booking process (step 3) - Time choosing
Booking process (step 4) - User data
Booking process (step 5) - Data confirmation
------------------------------------------------------------------------------------------------------------------------
3. Defining user and company goals (current and future demand).
Areas to improve:
Homepage
Improve visual look to clearly communicate company offer in more attractive way.
Create ecommerce section.
Design new modular component which will easily allow user to switch type of service pricing list in pricing section.
Create structure of services, which is clear for customers and will allow them to make faster choices.
(Presenting services starting from category level, to reduce overall overload and be more logic in offer).
Reduce unnecessary forms and improve communication to user, how each form can help in booking process.
Create search bar which will allow user quickly and in simple steps to find nearest place with company services.
Pricing page
Make it easy to filter by body part, amount of services and type of services.
Create elastic pricing page that will be showing filtered pricing of services depending on the place where user entered pricing.
Product cards
Create one pattern of product card to stay consistent.
Communicate clearly what kind of services are included in each package.
Show it on modular card which can be multipurpose (improve visual consistency).
Booking process
Create new booking process with reduced amount of steps that user need to go through.
Show user choices on steps where user need to provide personal data and on final confirmation screen placed after payment.
Product page
Allow user to quickly check availability of services on product page without entering 'real' booking process.
Improve information structure to clearly show how many and what services are included in package.
Keep services description (SEO).
8a. Redesigned homepage with:
New, clear information structure (reduced information duplicates, better communication what company offers, visibility of products, quick search).
Improved customer experience.
Redesigned booking process & reduced reservation steps.
Added e-commerce section, user account and shopping card.
Category cards for pricing section:
- Single treatment
- Package
- Create own package
Product cards for eCommerce section:
I put huge priority on clear and universal product cards which will:
- improve website graphic consistency,
- show to customer what is included in package,
- for how many services user is paying,
- allow me to present all company services on similar pattern
As you can see both cards are modular versions - square and rounded corners, with or without secondary button.
8b.1 Pricing page (Single parts)
8b.2 Pricing page: (Packages)
One pattern for all services (1/9 treatments and male/female)
a. Single service
b. Package
c. Category cover card
8c. Product page with floating (sticky) reservation module.
Pink color will be applied for elements in section for woman. Section for Man will have the same details in blue color. The same is applied for all pages elements. Neutral part on homepage has gradient background under category images starting from pink to blue.
Moving reservation process to product page saves user effort, time and put user into process right after reaching product page. User has also possibility to check availability of services without reloading page and entering separate booking process on new page.
8d. Reservation page - user data form and payment select.
All user choices and details are visible in right column to confirm that everything is right.
8e. Confirmation page.
That page gathers all user data, user choices and price details. It also gives user possibility to add reminder to calendar.
