Touchstone Family Association website redesign
As an UX/UI designer employed by Touchstone Family Association, I recognized the company website didn’t fully reflect the impactful work they do. I decided to undertake the project independently for practice.
Touchstone Family Association is a nonprofit focused on strengthening the social health and independence of families and children in the Vancouver area through effective intervention and support services. My passion for their cause motivated me to pursue this project.
Timeline
March 2024 - April 2024 (9 weeks)
Tools
Figma
Miro
Google docs/forms/sheets
Zoom
Whatsapp
đźš« Whats the problem?
The current website is outdated and fails to effectively convey the organization’s quality of services and positive community impact.‍
Given that the organization addresses deep social issues, it is essential to enhance the website to accurately reflect their mission & allow users to find the services they need with ease.
Research
Usability testing
I conducted usability testing with 2 supervisors, 2 youth workers from Touchstone, and 4 participants who have families and would be potential users of Touchstone's services.
The testing aimed to identify pain points in the user experience, particularly in navigation, information clarity, and overall design of the current website.
Outdated design and dull colors: The website failed to engage users and appeared unprofessional.
Confusing navigation: The menu was poorly structured, and links often didn’t lead to expected pages.
Lack of clarity in services: Users had to search for essential information, and the site was text-heavy with minimal engaging visuals.
Not mobile-friendly: The site was difficult to navigate on mobile devices and lacked detailed information , leading to concerns about making donations.
Surveys
After identifying key issues through usability testing, I conducted two surveys to gain further insights into user perceptions. These surveys provided additional data to validate and support the findings from the usability testing.
The majority of participants found the website unappealing and would not recommend it to others in need of family services.
Heuristic evaluation
I conducted a heuristic evaluation post survey. I systematically assessed the site against key usability principles to identify potential issues and areas for improvement. By applying these heuristics, I aimed to uncover design flaws that might impact user experience and overall effectiveness.
Critical issues found
Non responsive design
Missing help sections
- Poor information hierachy
Inconsistent design
Competive analysis
Though competitors websites had room for improvement, they successfully addressed user needs that Touchstone's website overlooked.
I wanted to see what other non profit and family organizations in the Vancouver area were doing well and not so well to give my project more scope.
- Prominent CTAs for core actions such as donating or finding services.
- Brand identity
- Consistent design elements
- Clear differentiation of services
Goals
After taking into consideration the feedback from research and testing I formulated these solutions to address current issues being faced on the website.
How might we (HMW)
- HMW rebrand the website to better communicate Touchstone’s mission and values while making the site more visually appealing and trustworthy?
HMW improve the website’s navigation and information architecture to help users easily find the information they need?
HMW  optimize the website’s design and layout to ensure a seamless and intuitive experience across all devices and screen sizes?
Information architecture
Sitemap
The original site map was cluttered and inconsistent, making it difficult for users to navigate and find their desired information efficiently. This redesigned site map provides a streamlined, user-friendly structure that eliminates contradictions and ensures a more intuitive browsing experience.
Old Sitemap
New Sitemap
- Reduced cognitive load: I reduced the size of the sitemap to streamline navigation, allowing users to find key information more quickly and achieve their goals with fewer steps.
- Simplified Language: Replaced complex terms with more understandable and relatable language, such as 'Family Support' instead of 'Family Preservation.
- Organized Navigation: Grouped related services and information under clear, distinct categories for easier access.
- Reduced Redundancy: Removed duplicate links and consolidated content to minimize confusion and streamline the user journey.
Wireframes
Early sketches helped me map out the site’s layout and navigation, focusing on what users need most. They were a great way to quickly explore ideas and make sure everything felt intuitive before moving on to the final design.
Design System & brand
I aimed to bring feeling of care, unity, and hope into the rebrand, creating a more inviting and comforting experience for both potential donors and those seeking support services.
Logo
The new logo is scannable and easy to digest. The heart symbolizes support, the family represents unity, and the sun adds warmth and positivity
Colour
For the primary colours I chose Deep Sea Blue which It evokes feelings of calm and introspection. Sandstorm Yellow has a grounded, earthy quality that can evoke a sense of determination and strength.
Imagery
I aimed to convey themes of togetherness, empathy, and family through carefully selected imagery. This approach ensures that the rebrand resonates emotionally with users and effectively reflects the supportive and nurturing environment that Touchstone offers
System
Improvements & Final UI
Original design
Original home page
Original donation page
New homepage
Donation Page
About us page & Responsiveness
Testing & prototype
Participants praised the new layout, highlighting its improved navigability and more professional appearance.
User testing provided valuable insights into the effectiveness of the redesign. The reorganization of key sections made information more accessible, and the refreshed colour scheme was well-received.
Overall, the redesign successfully enhanced the user experience, addressing previous concerns and elevating the site’s appeal.
Quotes:
- "The layout is much easier to navigate and looks good in general."
- "The site looks more professional and trustworthy."
- "It’s easier to find the information I need and Its easy to understand what Touchstone do."
- "The colours make the site feel more modern and inviting."
Reflections (What did I lean?)
Information Hierachy
Designing a visually appealing website while ensuring it is functional and user-friendly is a critical balance. I learned that aesthetics should not overshadow usability; both elements must work together seamlessly to create a satisfying user experience.
Rebranding for Sensitive Services
Rebranding a company that offers sensitive services requires understanding the audience's needs and emotions. I learned the importance of conveying empathy and trust through design while balancing professionalism and warmth.
Impact of user feedback
Incorporating user feedback is essential for refining design solutions. I discovered that real user insights can highlight critical areas for improvement that may not be obvious initially. Applying feedback allowed me to address pain points and make informed design adjustments.
Thanks for viewing
