Background:
Micah is a massage therapist who has been using the same website for the past decade. He does not feel the website is well utilized and fits his clients’ needs.
His business has grown substantially since first creating the site, as well as the services that he offers, and he would like to create a better one-stop-shop experience.
Business Objectives:
Micah would like a better design the website for marketing, scheduling, and information delivery purposes. He would like to increase user ease and satisfaction with the utilization of the website as the client base continues to grow.
Research Goal:
I decided to use interviews and surveys to determine how people use the website and whether the site fits their goals. I also completed a competitive analysis to see what common features were utilized amongst those in the area offering the same services, and whether these features would make sense to add onto his website.
Initial Assumptions:
Cite could benefit from more navigational hierarchy without seeing a decrease in user friendliness.
Outdated content could be removed without decreasing value.
Website has all essential features already, just needs a little organization and refresh.
Competitive Analysis:
Upon completing my competitive analysis, I determined that Micah’s website features were on par with other websites in his field and area. Most of the other’s website included testimonials, so this was a feature considered for the upgraded responsive website redesign.
User Survey and Interviews:
3 Interviewees, 5 Survey respondents
Both current and potential clients
Surveys were also used to allow current clients to participate while not violating HIPPA
Ages 25-55
Key Takeaways:
Availability/Scheduling: These were the main two things that people visited the website for. It would be helpful to make these more visible and create a CTA based off of one of these.
Costs: Half of the respondents mentioned wanting to know cost upfront, so this information could be a little easier to navigate.
Experience: While 3/8 mentioned wanting to know the client’s experience as one of their top 3 reasons for visiting the site, this part seemed more important to the client. I’d like to find a way to make this section easier to digest, without taking away from the main features the consumers are wanting to find.
Overall, respondents liked the website, it’s organization, color scheme, photos. They are generally able to find what they are looking for.
User Personas:
I created two user personas based off of the interviewees and their responses that were later utilized to help frame the user flows during the wireframing phase. One persona was of a current client who gets regular massage, while the other persona was of a potential client who might be navigating to the website for the first time to book an appointment.
Feature Roadmap:
Based on the surveys, interviews, and competitive analysis, I prioritized a list of features based on what was most referenced.
Ashworth Massage & Bodywork, LLC
Responsive Website Design
User Flows
I utilized user flows to map out to how best connect the features together and the most likely paths that users would take depending on the feature they needed to employ. I used the interviews to determine the best flows to set and later test.
Sitemap:
The creation of a sitemap was used to get an overall architecture of how the site could be laid out and helped plan some of the main features/pages. I liked this one quite a bit as it felt like a big picture view, and overall website roadmap to me, which made the next pieces easier to accomplish. I decided to reduce the number of pages available to only those that were referenced as needed by the interviewees and survey takers, and combine a few pages that were still valuable, but did not need to be featured.
Lo-Fi Wireframes
I utilized Lo-Fi wireframes to decide on the overall layout and feel of the website with the elements that I wanted to include. I sketched these out on paper.
Design Inspiration:
I needed a little design inspiration before creating my UI kit and my hi-fi wireframes, so I scoured the internet for similar service sites and selected the following to help direct my next steps. I decided to use the design on the bottom left as I liked the interest it created with how it blocked different sections.
Basic UI Kit:
I created a green and blue color palette based on the business owner’s request, which was in line with my design inspiration findings in this field of work. His logo was already created, but I included it for ease of use, and as I was not completely sure at this stage what components I would need, I created a range for tiles, form boxes, and minimalistic options for mobile viewing.
Hi-Fi Wireframe:
I created the wireframes to prototype based on the inspiration above. While one of my earlier drafts incorporated a better balance between green and blue, the colors did not work as well together as originally planned, so I chose blue (with the owners agreement). Additionally, I leaned more into the alignment patterns on the design inspiration which gave the website a more professional feel. I carried through smaller bits of designed misalignment at the top of most pages so the overall feel would be less rigid.
Success Metrics:
Time to completion/Ability to complete
Low number of errors occurred
Low/no levels of frustration
Positive feedback
Testing Takeaways and Lessons Learned:
Find Educational Credentials: This was easily done by all testers, but there was a small bit of confusion since both the home page and the about page featured the same picture.
Change the photo on one of the pages to make it more apparent that the links functioned as expected.
Find the Buy a Gift card section: All testers found this easily, but most clicked on the Gift Card header instead of the linked text.
Expand the clickable area of the gift card link.
Start the Booking Process: All found this easily, but most through the home page booking link instead of using the navigation bar.
Leave the duplication of an intended primary and secondary path to the booking available for users.
Additional Observation: The mobile prototype had a carousel section where left/right swipe was appropriate - though this was not set up to test, all but one tester tried to swipe the boxes as intended.
Case Specific Observations:
Working with a business owner requires clear communication and openness to feedback and adjustment, sometimes regardless of personal feelings on design
It’s easy to convey but hard to drive home that a working prototype is not a live website – people just get excited and want it to work – and since it appears to, there seems to be a perpetual disconnect, but I like to think of it as designer magic.
Surveys can be helpful in situations where you would benefit from anonymous feedback (also where you can’t violate federal regulations like HIPPA, etc.).
It’s worth considering both numbers of responses for a specific piece of feedback, but also perceived importance from those respondents – learning about client’s experience only mentioned by 3/8 interviewees/survey takers, but to those three it was made apparent that it was greatly important to them.
Taking time to get some design inspiration makes the process so much easier and leads to a better result.
General Observations:
It is difficult multi-managing life and other time-consuming activities while doing this – it was a major constraint.
Completing this program and these cases helped me to learn to recognize flows, design patterns, and good/bad product design in daily life, which is quite perspective shifting.
The concepts employed here can be used to help find solutions (and alterative solutions) to many challenges we have in day to day life.
Design is a constant iteration – it’s tough, but an interesting lesson in both trusting the process and self-confidence to pick the “end”.
I thought I was pretty good at knowing what makes sense or what others need – that assumption in and of itself, along with many, many others, is wrong.
This process is great at highlighting how we’re all different and that we can go about similar goals in unique ways, but if you look for them you can usually find overlaps and synergy points.
Having more than one user persona is helpful in allowing for designer discretion in decision making.
I really loved the insights from the research interviews and the prototyping feedback, creating user flows, and mind mapping. I’m not a big fan of the UI components (especially fonts).
Final Prototype:
In the final prototype, I increased the clickable area of the gift cards section and removed the duplicate photo with an alternative to make the change in page navigation more evident.
While this build and adjustment was fairly straightforward, if given more time and resources, I would look into adding the following:
A testimonials section as most of the competitors I researched already had this, and a couple interviewees mentioned liking to read reviews of service providers before reaching out
A sharing mechanism to make it easier for the owner to gain some traction using social media.
Find a more professional photo for the About the Practitioner page.
Prototype and Testing:
I created a prototype and set a usability testing plan to help uncover issues in the original design that were difficult or confusing to end users. I created three tasks to test and the corresponding prototypes to this end.
Tasks to Test:
Find Educational Credentials
I wondered how easy it will be to find under the About the Practitioner page, mainly if it would be too easy to pass over as it was near the bottom of the page. This was in the top 3 items that people wanted to find during the interviews, so it warranted being tested.
Find the Buy a Gift card section
This is one of the pages that I condensed into another (the Services and Rates page), and I’d wanted to make sure that it was intuitive to find.
Start the Booking Process
Scheduling, along with hours, was the top piece that users wanted to find on the website, and one of the things that had been more difficult in the former version. I’d wanted to ensure this was more easily found and more intuitive to use.
Role:
UX Designer
Methodology:
Double Diamond
Research Objectives:
Determine why people access the website
Determine what people’s goals are while accessing the site
Learn what they are/not able to find easily toward their goal
Understand what feature(s) are needed that are not currently on the site or are not easily accessible
Understand the perceived ease of use of the website
Testing Plan Goals:
Verify that flows are clear and achievable
Observe flow pain points
Determine if additional or different interaction options are needed
Results:
User Main Goals for Visiting Site
Location: 2/8
Availability: 5/8
Skillset/Experience: 3/8
Services/Fit for needs: 2/8
Costs: 4/8
Scheduling: 4/8
Results:
User Pain Points or Obstacles
Finding normal business hours
Finding Scheduling
Unsure if scheduling works, looks like not due to lack of availability
Sifting through clutter/text heavy information/outdated information