Project description: A responsive eCommerce website automating most of the booking and purchasing processes for Shannon Kelly - Massage, Movement, Energy, as well as promoting their services.
Roles: Client Management, Research, UX & UI Design, Development, Testing, Delivery
Tools: Figma, Google Drive/Docs/Meet, WordPress, Elementor, custom CSS
Shannon Kelly is a fitness personal trainer, masseuse, and energy worker with a growing independent practice. She is very busy leading dance projects, teaching for other organizations, and raising her little one. Shannon is growing her independent practice to become her primary income.
Create a responsive website that converts more potential clients and automates a lot of Shannon’s administrative work, including booking and purchasing.
The project started with a consultation and design workshop to see if and how we would move forward. My goals for the meeting:
I was then able to create a project brief and share it with my client for vision alignment, expectation management, and transparency.
Keeping the business constraints in mind, I researched all the fringe costs - one time and recurring - for building and maintaining the website. I presented a summary of my findings and proposed the best option that met my client’s minimum requirements. She agreed on the proposed option, so I updated our brief with the new cost estimate.
Goals
I shared a research screenshot with my client to cultivate transparency and awareness for the process, as well as instill confidence in my work.
Goal: Have a tool to guide and evaluate design decisions
In addition to competitor research, I conducted informal user interviews with the client and a friend, both who have booked and/or purchased personal training online. I sought to discover common user goals, reasons for visiting a trainer’s site, where in the customer journey they typically are, and common pain points. One key take-away: users are typically already acquainted with the trainer somehow, either through a friend referral or an in-person experience. Based on the competitor research, client’s business goals, and the informal user interviews, I was able to define a few user stories.
As an acquaintance of Shannon's, I want...
Goals:
With a list of user stories and business requirements, as well as a collection of established UI patterns, I began designing lo-fidelity wireframes. Consistent with the competitors, we decided to design a scrolling home page with an elevator pitch and overview of all essential information required by user stories.
Working within the business constraints, meant working within certain plugin/development constraints. We decided to utilize the Booked WP plugin for appointment scheduling. I refrained from including the full scheduling flow in the lo-fi wireframes since I did not know how customizable the plugin would be yet, I only knew that it could meet our minimum requirements. Similarly, I knew the checkout process would be dictated by WooCommerce.
The low-fidelity designs were shared with the client and then approved.
Goal: Finalize copy and photos for hi-fi designs
Having lo-fi wireframes allowed us to better visualize copy and content needs, as well as space allotments. I created a copy template for Shannon to complete with finalized text. I contributed copy editing and UX Writing, especially for critical customer conversion sections such as ‘services’, based on common ux writing patterns for this industry and our user stories. Text focused on clarity, brevity, and need. I provided the client with resources for free stock images, supporting the budget constraints, and helped select final images from her chosen favorites.
Goal: Create a high-fidelity agreed upon design and prototype to guide development.
Final copy and images were applied to the lo-fi wireframes to create hi-fi mockups on mobile and desktop. Designs were shared and received client approval.
Goal: Create v1.0 of the website
With high-fidelity mockups approved, we were ready for development. I instructed the client where and how to buy web hosting. I purchased the wp theme and plugins bundle and completed their installation.
The booking plugin we were using (as with many other scheduling plugins) does not enable users to customize their appointment duration or end-time. Since my client offers services of various durations, displaying all possible appointment options would result in a densely cluttered booking experience, as well as many potential overlapping appointments.
A booking flow like this adds so much friction to the user experience that it could lose potential customers, and at the very least leave them frustrated, overwhelmed, or confused.
Remove end time from available appointments and make them all 60mins every half hour.
Justifications:
Caveats:
Goal: Discover pain points and usability issues. Then make a requirements list for v1.1.
The first round of usability testing I did myself, making sure the user stories were all achievable. This way, I could quickly discover significant usability issues and reiterate a v1.1, before taking the time to facilitate a different test participant (who fits the target user persona more). This also saves time by fixing obvious errors that could inhibit a usability test, before testing on a participant for more nuanced feedback.
I rated the severity of usability issues on a scale of 0 - 4 (0 = no issues, 1 = cosmetic only, 2 = minor problem, should be fixed if time and resources allowed, 3 = major problem, should be fixed before shipping, 4 = usability catastrophe). I then added a description of the usability issue, proposed solutions, and provided justifications for the solutions.
Solutions were implemented for all issues, resulting in v1.1.
Goal: Present v1.1 to Client. Facilitate client testing and feedback. Iterate v1.2.
I presented v1.1 to my client and facilitated the presentation similar to a usability test. Not only was it important to get feedback from the business goals perspective, Shannon also aligns with her target user demographic in many ways (including tech fluency). I asked for general impressions of the landing page, type and colors. I then prompted her to walk through the user stories as if she was a customer, giving her scenario tasks. This test illuminated many opportunities for improvement. Beyond the usability testing, I asked for general feedback and a feature wishlist. After prioritizing all requirements for v1.2 in a color coded table, I began implementing the revisions for v1.2.
Priority Scale
Final delivery of the website was paired with a walk through of the CMS back-end (Wordpress cPanel), ensuring the client felt confident updating and managing her website, including appointments, calendar availability, payments, and email marketing.
I’m happy with the final delivery and excited to see my client save time while growing her business. This was my first project using Wordpress, so I learned a lot about that ecosystem, what’s possible, and how to be successful. I recognize that I can develop a high-functioning custom website for clients on a lower budget using Wordpress; however, moving forward I will prefer not to work within Wordpress if the budget allows. Thanks to the open source community of Wordpress, there are countless features and resources to utilize, but that comes at the cost of occasional compatibility issues, contacting numerous different support teams, and inconsistencies. Additionally, other platforms - like Webflow - have merged web design and development in beautiful new ways with faster load times and CMS options.
The product was launched and delivered to a happy client. There has not been enough time yet to measure its success in converting new customers and/or reducing the administrative work time for my client. In the meantime, the business goals of establishing a web presence and communicating credibility were achieved.
I would prototype out the whole booking and checkout processes before selecting a plugin. Or, if this plugin was required because of client budget constraints, then I would at least sketch out a low-fidelity prototype of the booking and purchasing processes to understand the challenges before development. Coming across these challenges earlier may have allowed me to find a different booking plugin. Or, perhaps I could have dug into customer data with my client to see if the variable services being offered were actually benefiting the business.
Interested in my work? Let's talk! I'm based in Portland, OR, and work remotely as well. Email is my preferred method to start a conversation.
Email Me
