Mini therapy horses website re-design
case study no. 2
Project Overview
About: Mini Therapy Horses provides therapeutic experiences with miniature horses, bringing joy and healing to those in need. To enhance the website's user experience, our team, under took a UI redesign focused on improving navigation, content organization, and overall usability.
Project Goals: The main goals my team and I set for the UI redesign were to improve navigation, streamline booking options, and strengthen the visual branding of Mini Therapy Horse.
Project Type: UI Design
Duration: 4 weeks
Role: UI Designer
Tools: Figma, Adobe, Canva
Research
in this section
1. Problem Statment
2. Brain Storming Sessions
3. Content Hierarchy
problem statement
"A parent and Occupational Therapist in California seeking creative therapeutic options for children with developmental delays finds the original Mini Therapy Horse’s website overwhelming. With a lot of content to sift through, it's difficult to easily navigate and find where to book therapy for an individual."
Brainstorming
During our team’s first brainstorming session, we identified the need to redesign the homepage for better functionality. Our goal was to introduce more actionable options. To achieve this, we added headers to help users quickly navigate the content. We also resized the video for a cleaner layout and, most importantly, included a direct option to book therapy sessions based on user needs, right on the homepage. These updates aim to improve usability and enhance the overall user experience.
Diverege Session
During our research and brainstorming sessions, we decided to simplify and condense the layout to make it less overwhelming. Our goal was to modernize the design with a focus on consistency, revamp the homepage by reducing content and resizing the video for better balance, and update the contact page to provide a more direct way for users to reach out and sign up for therapy
We agreed that the current content hierarchy on the Mini Therapy Horses website was disorganized. The large image on the homepage, while prominent, felt more like a distraction than a focal point. Additionally, the 'Donate Here' button was overly repetitive, appearing both in the navigation bar and as a key element on the homepage. The navigation bar itself had vague labels, offering little clarity about where each button would lead. Lastly, the footer was cluttered and redundant, further adding to the confusion.
Before Re-Design
Content Heirachy
As we gathered information from the content, it became clear that there were several urgent changes we needed to make. The most pressing issues were with the layout and the content itself. We could see that these areas needed immediate attention to improve the overall user experience.
After Re-Design
Converge Session
During the converge brainstorming session, we aligned on several key aspects from the diverge phase: consistency, videos and images, content, layout, booking options, and the navigation bar. We agreed that focusing on these elements would have the greatest impact on improving the user experience.
Design process
in this section
1. Information Architecture Analysis
2. Brand Visual Identity
3. Design Systems / Style Guide
IA Analyis
Navigation:
Navigation feels scattered and would benefit from simplifying categories to help users find what they need more easily.
Organization:
Some parts of the current system are useful, but clearer labels and better organization would make it more intuitive for users
Brand visual Identity
The original visual branding of the Mini Therapy Horses website doesn't fully align with its mission, creating a disconnect for users. While the color scheme aims to be inviting, it often feels overwhelming and makes navigation challenging.
design systems / style guide
Once we finalized a cohesive color scheme, we created a comprehensive style guide and design system to streamline the wire-framing process. Our system includes a variety of components and variations that improve user navigation and build confidence throughout the experience. We also ensured our color palette meets accessibility standards and selected iconography that resonates with users, creating a more intuitive and familiar interface.
User experience:
A thorough review of links, design, and structure would streamline navigation, condense content, and create a smoother, more user-friendly experience
We created a refined color scheme that provides better contrast and readability. This updated palette enhances accessibility while aligning more closely with the brand’s mission and better meeting the needs of the users.
Wireframe & prototype
in this section
1. Navigation
2. Lo-Fidelity / Sketches
3. Mid-Fidelity and Mobile Wireframe
4. Hi-Fidelity Wireframes
Navigation
For our navigation, we aimed for a simple and intuitive design. The 'Therapy Program' and 'Shop' tabs lead directly to their respective pages, while the 'About Us' menu expands to include sections like 'Meet the Minis,' 'Meet the Team,' 'FAQ,' and more. The 'Contact Us' dropdown provides easy access to 'Volunteer Opportunities,' 'Schedule a Visit,' and 'Sponsor a Mini.
Lo-fi wireframes & Sketches
Throughout our sketches and wireframes we aimed to create simplicity and consistency. Allowing an ease of navigation for the user while instilling confidence in their decisions.
Before Re-Design
mid-fi & mobile
content
Adjust the format of the information to align with the context of each page for a more intuitive navigation experience.
clarity
Streamline the webpages by condensing the content into clear, cohesive paragraphs for easier readability and navigation.
high-fi wireframes
Our high-fidelity prototype minimizes clutter and distractions, while maintaining the warm, inspiring, and uplifting essence of the Mini-Therapy Horse brand. Users can stay inspired throughout their search for unique therapy experiences, all while effortlessly navigating the website.
With the previous website’s cluttered and disjointed design, our goal was to create a cleaner, more cohesive experience that felt less overwhelming and more visually appealing. The old site was weighed down by oversized images and scattered text, resulting in a dense, clunky, and confusing navigation. By streamlining the content—condensing text, images, and videos—we’ve crafted a layout that is clearer, more intuitive, and enjoyable to use, with a strong focus on balancing clarity, content, and aesthetics.
After Re-Design
Aesthetic
With the previous website's cluttered and disjointed structure, we set out to create a cleaner, more cohesive design that's less overwhelming and more visually appealing.
Testing
in this section
1. A/B Testing Variations
2. A/B Testing Results
A/B Testing Variations
While the changes across each prototype were subtle, they provided valuable insights from our users. For this iteration, we specifically focused on the navigation elements on the homepage. Through A/B testing, we varied the prominence of buttons related to accessing information and booking to identify which elements users were most drawn to. This approach helped us better understand user preferences and behaviors.
A Prototype
In our A prototype, we highlight how the homepage offers immediate access to multiple options, enabling users to easily learn more and book their desired session without having to navigate through various elements.
A/B testing results
In our B prototype, we focused on providing users with an efficient way to browse available sessions, offering a single button for easy access to detailed information and booking options.
Our A/B testing results were fairly evenly split, but the feedback we received was incredibly valuable. Users responded positively to the updated page layouts, with many sharing favorable comments. However, we identified some areas for improvement, such as refining the wording on a few buttons and navigation elements to enhance clarity and make the user experience even more intuitive.
user feedback
Our user testing yielded valuable insights, with particularly helpful feedback on both prototypes. While opinions were divided between variations A and B, users tended to favor version B for its cleaner homepage layout and the more direct path to the therapy page for booking.
B Prototype
takeaways
The key takeaways from our A/B testing highlighted several opportunities to refine the wording and alignment. However, overall, the website’s layout and color scheme were viewed as a significant improvement.
re-design results
Before
homepage
After
contact Page
Before
After
Before
Our Services Page
Before
After
Confirmation page
After