The Speech Gym
The Speech Gym website design aims to develop a user-friendly and visually appealing homepage for a speech-language pathology clinic, featuring a new logo and cohesive branding to reflect the clinic’s values and boost user engagement.
DELIVERABLES
Logo
Style Guide
Web Site
ROLE
Sole Designer
TOOLS
Adobe Creative Cloud
Balsamiq
Figma
Google Analytics
Miro
WordPress
DURATION
2 Weeks
TL;DR
The Speech Gym website design successfully delivered a user-friendly homepage, cohesive branding, SEO optimization, and accessibility features. Designing sections effectively showcased the clinic’s services and offerings, facilitating engagement with potential clients. Analytics implementation provided insights for strategic improvements, while usability testing validated the site’s intuitive design, ensuring a seamless user experience and helping to boost reach to new clients.
BACKGROUND
Client Introduction
The Speech Gym PLLC operates as a speech-language pathology therapy clinic situated in Chicago, specializing in early intervention for young children. Delivering in-home therapy, the clinic employs diverse lessons, educational tools/toys, and therapeutic techniques to assist a range of clients.
Challenge
The challenge of the Speech Gym website was to design a homepage that not only meets the functional needs of its users, but also communicate the clinic’s values and services through a cohesive visual and brand identity. An additional challenge was to enhance the clinic’s online presence to attract and reach new clients.
Role
As lead UI/UX designer, I managed the design process from concept to development, including user and market research. I created a new logo and brand identity, integrated into an accessible homepage on WordPress. I strategized to improve the clinic’s online presence, attracting and engaging new clients effectively while aiming for client engagement and satisfaction.
RESEARCH
Stakeholder Interview
During our initial stakeholder interview, the client expressed the urgent need for a revamped website for The Speech Gym, a speech-language pathology clinic specializing in early intervention for young children. The client emphasized the necessity of completing the website quickly to better serve the clinic’s growing needs and to more effectively reach new clients. The following key points were essential for the success of this design.
- Therapy Clinic Overview: The homepage must include a dedicated section that provides an overview of the clinic, highlighting its focus on early intervention and in-home therapy services. This section should communicate the clinic’s commitment to using diverse educational tools and therapeutic techniques.
- About Me Section: A personal touch is essential, so an “About Me” section is required where the client can share her background, expertise, and passion for helping children. This personal narrative will help build trust and connect with the parents of potential clients.
- Services Offered: Clearly outlined services with detailed descriptions are crucial. This section should be easily navigable and designed to inform parents about the various therapy options available, helping them understand how these services can benefit their children.
- Contact Form: An accessible and easy-to-use contact form is necessary to facilitate inquiries from parents. This form should be designed to encourage parents to reach out with questions or to schedule appointments.
- Visual and Brand Identity: The client desired a design featuring lively images and inviting, cheerful colors that appeal to parents and children alike. The visuals should be captivating and approachable, reinforcing the clinic’s friendly and professional environment. A new logo is essential to embody the clinic’s values effectively, ensuring it is memorable and echoes with the target audience..
Competitor Analysis
To understand the local speech-language pathology clinic scene, I conducted a SWOT analysis of 5 nearby clinics. This analysis revealed common challenges, strengths, and areas for improvement, crucial for designing the Speech Gym website. It guided us in showcasing services, clarifying billing information, adding testimonials, creating an easy contact form, and aligning design with brand identity while featuring engaging visuals and relevant content.
User Personas
During The Speech Gym’s website design, personas such as Samantha and Pilar played a crucial role. They helped me empathize with users, prioritize features, and validate design decisions, leading to a user-focused site that boosted engagement. Using these personas streamlined design, improved efficiency, and ensured the site met user needs, creating a more functional platform.
BRANDING
Brand Strategy
After researching the target audience’s preferences, The Speech Gym’s brand strategy aims to position it as a trusted leader in early intervention speech-language pathology. This involves creating a cohesive visual identity, including a unique logo and branding that reflect traits like compassion, expertise, and accessibility. These elements guide design choices and ensure consistent communication across platforms, strengthening emotional connections with families, building trust, and standing out in the market.
Logo Design
The logo creation journey for The Speech Gym was thorough and iterative, aiming to capture the essence of its speech therapy services. It began with a concept featuring a chat bubble and a parent-child silhouette, symbolizing communication and unity. Evolving from feedback, the design incorporated a brain outline with a chat bubble tip, highlighting the cognitive aspects of therapy. Subsequent revisions added sound waves to the brain outline, emphasizing speech dynamics. The final logo merged these elements—a brain outline with a chat bubble tip and internal sound waves, paired with the styled text “The Speech Gym” below. This process ensured the logo was visually appealing and resonated deeply with the brand’s focus on transformative therapy.
DESIGN
Sketches to Wireframes
To start off the design process, I began with sketches that evolved into low-fidelity wireframes. These sketches outlined key sections like the Hero Image, Services Offered, About Us, Getting Started, Testimonials, and Contact Us form. Digitizing them with Balsamiq, I integrated stakeholder feedback and usability testing to fine-tune the designs. This visual and iterative method prioritized user-centered design, cost-effectiveness, and project timelines, resulting in a structured, user-friendly website. The client was pleased with how it aligned with their needs and business objectives for the landing page.
DEVELOPMENT
Style Guide
Once the outline was set, I crafted a detailed style guide to maintain visual coherence and align with our brand identity. Londrina Bold, a playful typeface, was chosen for prominent headings and larger buttons to grab attention. Roboto was selected for most text, including form fields, for its readability and contemporary look. The color palette featured a darker variation of the brand’s signature blue (#006080) to enhance contrast, and a warm yellow, creating an inviting aesthetic. To improve text legibility against vibrant backgrounds and other colors, a softer black (#545454) was chosen for the font color, reducing eye strain during navigation. Yellow was reserved for button fills, making them stand out for calls to action. This guide not only unified the website’s design but also ensured consistency across future brand materials like ads and flyers.
Development
Using the style guide and wireframes as a foundation, I chose WordPress for website development. Its flexibility and plugins were invaluable. WordPress allowed seamless design integration and functional plugin incorporation, enhancing aesthetics and usability. The site aligned with the brand and offered a smooth user experience, thanks to WordPress’s reliability and scalability, suitable for both launch and long-term management.
SEO Optimization
As part of the comprehensive UI/UX design for The Speech Gym website, I implemented as SEO strategy to enhance online visibility and user engagement. The approach included detailed keyword research, search engine submissions, on-page optimization, responsive mobile optimization, and site speed enhancements through image optimization.
INCREASED TRAFFIC & VISIBILITY
The combined effect of these SEO strategies led to a substantial increase in organic traffic to The Speech Gym’s website. The targeted keywords ranked higher in search engine results, drawing more visitors looking for speech therapy services.
EHANCED MARKET VISIBILITY
With improved SEO, the clinic’s marketing efforts became more effective and cost-efficient. Higher search rankings meant that the clinic could reduce its reliance on paid advertising, redirecting those resources to enhance service offerings.
IMPROVED USER EXPERIENCE
The website’s enhanced responsiveness and faster load times contributed to a significantly better user experience. Users could easily navigate the site and find the information they needed quickly, reducing bounce rates and increasing the duration of user sessions.
Implementing these SEO strategies can yield significant long-term advantages for The Speech Gym, such as enhanced visibility, greater user engagement, and increased conversions. These improvements can collectively drive the clinic’s growth and success.
Analytics
The implementation of Google Analytics plays a pivotal role in understanding and enhancing the site’s performance and user engagement. Utilizing Google Analytics enables us to gather and analyze data about our visitors, crucial for making informed decisions and optimizing the website strategically.
ATTRACTING NEW CUSTOMERS & REACHING TARGET DEMOGRAPHICS
- Google Analytics provides insights into which marketing campaigns are most effective at attracting visitors, allowing to refine strategies and better allocate the marketing budget.
- By understanding the sources of traffic, whether through search engines, social media, or direct visits, efforts can be focused on the channels that yielded the highest return.
- The demographic data available through Google Analytics can help tailor content and marketing messages to better match the preferences of the target audience.
- This targeted approach not only can improve user engagement but also increase the likelihood of reaching potential customers within specific demographic segments.
ENHANCING USER EXPERIENCE
- By monitoring metrics such as page views, bounce rates, and average session duration, insights can be gained into how users interacted with the site.
- This information can be crucial for identifying content that resonates with the target audience as well as areas where the user experience can be improved.
Final Design
The final design of The Speech Gym website is crafted to maximize user engagement and streamline navigation, ensuring a seamless transition from initial curiosity to active engagement. Each design element is thoughtfully implemented to enhance functionality and aesthetic appeal, aiming to increase user retention and interaction effectively.
Hero Image
The “Hero Image” section shows the clinic’s logo and name at the top, with a sticky navigation bar for easy browsing. The header includes a title and a playful child image, highlighting early intervention services. A prominent call-to-action button encourages users to explore services quickly, boosting retention and engagement.
Services
The “Evaluation & Therapy Services” section is well-organized, with a descriptive title and bullet points for easy information access. Three interactive title cards show playful child images and flip to reveal detailed service info, engaging users while highlighting clinic offerings.
Meet Nina
The “Meet Nina” section is informative, displaying Nina’s name, titles, detailed bio, and a central portrait. Bullet points highlight her professional courses and certifications for easy reading. This layout showcases Nina’s qualifications and dedication to continuous education, boosting customer confidence in her expertise.
Getting Started
The “Getting Started” section has a clear visual hierarchy and a three-column format outlining the process, connected by subtle curved lines as a visual roadmap. It ends with a montage of children in therapy, highlighting the active, multi-sensory, child-led nature of the services. This presentation clarifies service expectations and builds confidence in potential clients.
Testimonials
The “Testimonials” section has a multi-card layout showing client names, locations, and brief comments. Cards cycle automatically for interaction, with arrows for manual navigation and a total testimonial count indicator. This setup shares positive feedback to boost potential client confidence.
Contact
The “Contact” section highlights a family picture behind a computer, emphasizing a family-oriented approach. It offers contact options such as email address and phone number. It also includes a user-friendly contact form with clear labels, a Captcha for spam prevention, and a prominent ‘Submit’ button. This design facilitates easy communication for potential clients, encouraging hassle-free engagement with the clinic.
Responsive Design
Mobile responsiveness in The Speech Gym website is vital for accessibility, user satisfaction, and reaching a wider audience. Changes include a compact hamburger menu for mobile navigation, optimizing layouts, images, and interactive elements for smaller screens, and making the contact form touchscreen-friendly. These upgrades ensure seamless functionality across devices, improve search engine rankings, and enhance user engagement. Mobile responsiveness caters to modern user preferences, reducing bounce rates and increasing conversions, thus making The Speech Gym’s services accessible to a diverse clientele.
TEST
Usability Testing
To evaluate the usability and functionality of The Speech Gym website, a structured usability test was conducted with ten participants. These participants, all current clients of the clinic, were invited to participate in the test in person. This setting allowed for direct observation and immediate feedback on their interaction with the website.
Participants were given a series of tasks designed to assess how intuitively they could navigate the website and access specific information. The tasks were intended to explore critical aspects of the website that potential and existing clients might frequently use. This approach ensured that the test results would be relevant and actionable.
ASSIGNED TASKS:
- What approach is used to help speech sounds?
- Tell me about Nina’s certifications and courses.
- Describe to me the clinic’s billing options.
- What are your thoughts after reading the Testimonials section?
- Find and send a contact form submission.
Usability Test Report
The usability test provided valuable insights into how real users interact with the website. It highlighted areas where the website excelled in user-friendliness and identified design choices that improved the user experience. Participants’ feedback was instrumental in understanding the intuitive layout of the site, the effectiveness of the content placement, and the overall satisfaction with the navigation and informational aspects of the website.
The usability test with real clients showcased The Speech Gym website’s functionality and effectiveness, highlighting the importance of user-centered design for an engaging online presence. Remarkably, all 10 participants effortlessly completed tasks, underscoring the site’s intuitive design. These results will guide future refinements, ensuring the website consistently meets user needs.
Accessibility Testing
I tested the site’s design for accessibility compliance, assessing color contrast, text sizes, button designs, and layout. I followed WCAG2 and APCA guidelines for optimal readability. I also adapted the color palette for various color vision deficiencies, improving the user experience. Tools like WebAIM’s Contrast Checker and Coblis Color Blindness Simulator verified accessibility across different impairments.
REFLECTIONS
POST-MORTEM
The completion of The Speech Gym website project marked success in delivering a user-friendly homepage, cohesive branding, and SEO integration. The project effectively showcased the clinic’s services, improved accessibility, and validated design through usability testing. Challenges were managed through communication and iterative approaches, leading to valuable learnings in user-centered design and SEO optimization. The client provided positive feedback, and client engagement increased significantly.
Successes
- User-Friendly Homepage: Developed a visually appealing and intuitive homepage that effectively communicates the clinic’s services and values.
- Cohesive Branding: Created a new logo and implemented consistent branding elements across the website, reinforcing the clinic’s identity and professionalism.
- SEO Integration: Strategically implemented SEO techniques to improve search engine visibility, resulting in increased organic traffic and better user engagement.
- Accessibility Features: Ensured accessibility compliance by optimizing color contrast, text sizes, and layout, enhancing the user experience for all visitors.
- Usability Testing Validation: Conducted usability testing that validated the site’s intuitiveness and ease of navigation, leading to a seamless user experience.
- Increased Clientele Reach: Implemented strategies to reach target demographics effectively, resulting in expanded client base and ultimately increased revenue for the clinic.
Challenges
- Tight Deadlines: Faced challenges in meeting project deadlines while ensuring quality design and functionality.
- Balancing Creativity with Accessibility: Struggled to balance creative design elements with accessibility requirements to ensure an inclusive user experience.
- SEO Optimization without Compromise: Worked to optimize SEO without compromising the overall user experience, balancing technical requirements with user-friendly design.
- Managing Stakeholder Expectations: Managed stakeholder expectations and incorporated feedback effectively to ensure alignment with project goals and objectives.
KEY LEARNINGS
- User-Centered Design: Emphasized the importance of prioritizing user needs and preferences in the design process to create an intuitive and engaging user experience.
- Balancing Aesthetics with Functionality: Learned to strike a balance between creative design elements and functional requirements, ensuring a visually appealing yet highly functional website.
- SEO Best Practices: Gained insights into effective SEO strategies and techniques, understanding the impact of search engine visibility on website traffic and client acquisition.
- Iterative Feedback: Recognized the value of iterative feedback loops and stakeholder communication in refining design choices and meeting project objectives.
- Accessibility Awareness: Developed a deeper understanding of accessibility standards and the importance of creating inclusive designs that cater to diverse user needs and preferences.
MORE CASE STUDIES
Our National Conversation
