JIN SHIN JANE
Overview
Jin Shin Jane is a responsive website redesign project with updated branding. It’s a static site with online booking integrated through Squarespace.
Objectives:
Redesign site to drive conversions
Key Results:
- 1.Interview 5 users to highlight pain points for a redesign
- 2.Analyze the interface of 4 competitor websites
- 3.Design new version of site structure and navigation with focus on booking appointment
- 4.Test prototype for feedback, achieve 80% positive feedback score
Constraints
- •80hr time constraint to complete this project
- •Online booking is linked through Squarespace
- •Updated branding is limited to certain colors and logo image
Role
- UX/UI Designer
Timeline
- 80 Hours
Tools
- Figma
- Adobe Illustrator
- FigJam
- Dovetail
- Miro
Notes
- Live site update pending stakeholder providing updated photos and additional text
Challenge.
Redesign to increase new business
Jane has been practicing Jin Shin Jyutsu for 35 years and has a successful sole-practitioner business providing treatments and self-help classes. She recently added online booking as a feature and has seen an increase in appointments.
75% of her new business comes from her website and she wanted to make sure potential clients could find the info they need to book
75% of her new business comes from her website and she wanted to make sure potential clients could find the info they need to book. She had inconsistent colors and fonts throughout her marketing materials, some business information was no longer applicable on the site, and there were additions she wanted for added client value.
Discovery.
Defining success
Success for the stakeholder:
Jane wanted a site-refresh and I needed to better understand the goals and criteria for success. To ensure I was delivering the most effective results, I started with a stakeholder interview to learn:
- •What business goals she had
- •What users needed to be able to do on her site
- •What she wanted her brand to communicate
- •What her desired outcome was and how she measured that
Success for our competitors.
I looked at 4 direct competitors to understand how other businesses chose to solve similar problems. This helped me develop provisional personas based on who Jane said her target users are and clarify what some of the priorities for the redesign should be.
4
Direct competitors compared
10
Research Articles Reviewed
Success for our users.
My goal was to understand more about the experience people have when searching for, choosing and booking an appointment with an alternative healthcare provider so I could make sure the site design provided value for them and to help them accomplish their goals.
5
Users interviewed
(age 33 - 74)
Interview Findings:
People were starting their search already frustrated by a lack of results
Knowing if a provider can treat their condition is a primary concern to people
People are more likely to book immediately if online scheduling is available
Process.
Will it solve the problem?
Redesign is an area where I feel like it’s easy to look at a site and think “changing this will make it better”. But why?
To make sure my solutions were always user-centered and not based on my own ideas and assumptions, I kept this silly Post-It on my desk throughout this project - cross checking each decision to see if it was in fact making the product better for the user and, in turn, the business.
Who are we solving the problem for and how?
User personas are really helpful to me in bringing the focus back to the user and what they need instead of creating solutions based on my own hypothesis.
This is a situation where developing multiple personas could have been beneficial in designing for accessibility, for instance a persona for a senior with vision impairment who is not very technically savvy could be a good lens to view design decisions through.
Mapping out a customer journey helped me identify opportunities to improve the site based on what my user persona’s actions, needs and feelings were as she navigated the site.
To better understand how each piece of content connected and ensure all the necessary pages were designed, I created task flows and user flows. These evolved as I recognized ways to enhance the users’ experience (like adding a FAQ page).
My first version of the user flow asked broad questions so I reframed the flow asking "Will this solve the problem that my persona has?"
Design.
Sketching to Solve
From my user and stakeholder interviews, I knew that learning more information was paramount to meeting both user needs and business goals. Sketching possible layouts helped me determine how best to visually capture a user’s attention while providing what they needed to know.
Refreshed branding
The site redesign included creating a new logo and color palette to convey the feeling of zen, relaxation, and being informed.
Original logo & colors
Updated logo & colors
The stakeholder had expressed a desire to use red tones as shown on her business card. As I worked on the design with the keywords she had in mind, it didn’t seem to convey the overall emotion she was wanting to evoke so I created an alternate color palette to show her.
I designed a vectorized logo based on the photo and kanji she had incorporated in her site and marketing material.
Why Mid-Fi Wireframes?
I find the creation of mid-fi wireframes helps me refine my very messy sketches, focusing on typography, hierarchy and interaction before introducing colors and photos. This allows me to check that the design is usable at its core, before flashy images or animations take over and distract.
My favorite part about defining the design in mid-fi means that adding the UI is really easy. Since I already had my style sheet, it was just a matter of updating styles in Figma and dropping in images!
*Design systems are my jam!
H-Fi Wireframes
Testing.
But is it usable?
Knowing that the majority of Jane’s new business comes from her website, I wanted to test with users who had no knowledge of what she does. Determining if they could easily find the information they needed and book an appointment was the primary concern.
View Usability Test Prompts
5
Usability tests conducted
Iterations
Usability testing and team review helped identify these areas that could be improved:
Problem: Users were unsure that info about Jin Shin was where they wanted to end up from the hero, there was also some hesitation about navigating away from the homepage immediately.
Solution: Added ‘Book now’ option to the ‘Appointments’ dropdown
Problem: Users were unsure that info about Jin Shin was where they wanted to end up from the hero, there was also some hesitation about navigating away from the homepage immediately.
Solution: Added additional CTA buttons in ‘About JSJ section’
Problem: Users were unsure that info about Jin Shin was where they wanted to end up from the hero, there was also some hesitation about navigating away from the homepage immediately.
Solution: Changed the hero CTA so it redirects down the homepage instead of to ‘About JSJ’ page
Solution.
Researched. Redesigned. responsive.
Jin Shin Jane has a new look and feel with a focus on refreshed branding and a redesign to drive conversions.
- •Colors were changed to more calming tones while still ensuring accessibility guidelines were met.
- •More visuals were added to convey information for easier skimming.
- •Information was prioritized and navigation was refined, adding more CTAs throughout to encourage booking and appointment.
Progression.
Before & After
Original Site
Redesigned Site for Desktop & Mobile
Reflections.
Experience is the best teacher
Redesigning a site was a very different process than building a product from start to finish. I enjoyed working within the constraints of an already established product and stakeholder requests because it gave me more space to focus on improving the usability and information architecture.
I gained valuable experience communicating design decisions to the stakeholder
I gained valuable experience communicating design decisions to the stakeholder (and came across this great book to further my knowledge on the subject).
Looking Ahead
What Next?
- •Updated text and photos from stakeholder are pending
- •Further usability testing with a wider age/gender range of participants would be helpful
- •Pages linked to ‘Conditions Treated’ circles with more information, links to studies for those conditions and related testimonials
Business metrics
Examining site traffic, engagement rates and the number of new appointments with the redesign will help us see how these changes are benefiting the business and if there are areas that could be improved.
Objective:
Launch refreshed site by end of Q1 2023
Key Results:
- 1.Complete build by March 31, 2023
- 2.Analyze previously reported metrics
- 3.Increase the % of people viewing at least 1 other page after the landing page from 3 to 15%
- 4.Increase CTA conversion by 20%
Copyright © 2023 Cori Jade. Made within ATX.