Branding Update & Website Redesign for Speech Therapy Clinic
Roles
UX Designer
Developer
Toolkit
Webflow
Figma
Adobe CC
Speech and Myofunctional Clinic of the Front Range
Client
Overview
The motivation for this project was to create a clean and welcoming website with up-to-date information and resources. The website serves to inform potential clients of the services offered, to provide the therapist’s contact information for booking appointments, and to provide the patient forms and clinic location for existing clients. The therapist was not interested in integrating a booking system or a content management system for patient forms as this is a small clinic and they prefer booking appointments directly with their clients.
The therapist desired a website that felt modern and friendly. The website needed to appeal to adult clients and parents seeking therapy for their children.
Design Process
Site Map
To begin, I worked with my client to outline what content they wanted to include on the site. From there, I grouped the content logically and decided which pages were needed. I created a rough site map and proposed it to the client. After editing the rough draft together, I created this final site map which I used as a starting point for the design and as an outline throughout the project.
User Flows
Next, I began designing the flow of the site by creating user flows for two common use cases. I crafted two scenarios and personas and created user flows for these scenarios. This exercise helped me to further refine the structure of the site and to identify possible dead-ends or pain-points for users.
After completing the ‘Finding the right service’ User Flow, I realized that if the user does not find the necessary treatment on one of the Services pages, they are not prompted to check the other Services page. After discussing this with my client, we decided that navigating to the other service in the menu bar was still a better option than adding clutter to the page with a button. However, it was still helpful to work through this flow in order to validate the design.
Task Flows
Next, I focused on two specific tasks: sending an email to the therapist and learning about sleep disordered breathing. Because this website’s main purpose is education, the task flows are simple and require minimal interaction from the user. However, this process helped me to create a coherent and intuitive flow of information throughout the site.
Low-Fi Wireframe
I compiled my ideas from the site map, user flows, and task flows and began creating the first iteration of the design. I sketched out various ideas for each section and compiled my favorites for each page. Being able to visualize each page was very helpful as I continued to finalize the site’s design.
Mid-Fi Wireframe
I created the mid-fi wireframe in Figma, using the low-fi wireframe as a guide. I began integrating the client’s written content to be sure that the size and spacing of the elements was correct. This also helped me to begin deciding on the overall spacing and margins for each of the pages.
