Responsive Web Redesign for Helping Hands Inc.
With businesses increasingly expanding themselves to the digital world, I partnered with Helping Hands Inc. to revamp their website, rebrand their online identity, and streamline content organization to ensure a delightful experience for its users.
Overview
Roles: UX/UI Designer, UX Researcher
Teams: Valerie Bui (me), Susan Ison (Executive Director)
Tools: Figma, FigJam, Zoom, Maze
Duration: 5-6 weeks
What is Helping Hands Inc.?
Helping Hands Inc. is a non-profit organization that aims to provide a nutritional program for daycares and child care centers throughout Utah. They have helped 350 family daycare providers so far and plan to continue their mission for as long as they can.
What is the Problem?
Based on competitor analysis and user research, Helping Hands Inc. has identified key areas for improvement to better serve its target audience and stand out in the market. With the potential to rebrand and establish consistency in messaging, visual identity, and content organization, a website redesign is recommended. Enhancements such as modernizing branding elements, optimizing navigation for quick access to essential forms and information, and creating a more engaging and memorable user experience can significantly improve user engagement and drive direct visits to the site.
Objectives:
User Goal
Improved user experience
Access to relevant information
Trust and credibility
Engaging visuals and content
Business Goal
Increased conversions
Enhanced brand image
Improved user engagement
Expanded reach and audience growth
Helping Hands’ Current Website
Information Architecture
Sitemap
I improved organization and navigation by restructuring and categorizing similar content tabs, as shown in the sitemap. Additionally, I emphasized the placement of CTAs for enhanced user engagement.
Ideal User Flow
A user flow was created to walk through a user’s journey from navigating the website up until they reach the contact page where they get in touch with the business.
Design
Style Tile
I maintained the playful header font for continuity and improved readability with a contemporary body font. The color palette* draws inspiration from a clear blue sky and lush green grass for a friendly feel, while vibrant orange highlights CTAs.
*Color contrast accessibility conforms to WCAG 2.0 guidelines.
High-Fidelity Wireframes
Navigation, Visual Hierarchy, & Information Architecture:
In the 'Homepage' hero section, the main heading, mission statement, and two CTAs, "Join Us" and "Learn More," ensure a structured format for easy information consumption and enhanced user experience.
In the 'Forms & Manuals' section, links are alphabetically organized, while 'Newsletters' follow a chronological order, with recent newsletters on top.
The 'AccuTrak' guide and FAQs are presented in an accordion-style design, allowing users to navigate content at their pace.
I introduced a top navigation bar and footer on every page, eliminating the need for left-side navigation tabs in the original design.
Responsivity:
To ensure a seamless and inclusive user experience, a mobile version of the website was developed.
Branding:
I aimed to preserve the original website's playful and inviting character while introducing a cohesive visual theme inspired by a clear blue sky and lush green grass, enhancing the website's charm with a unified and immersive design.
Desktop Version
Forms & Manuals
Homepage
Accutrak
Mobile Version
Forms & Manuals
Homepage
Accutrak
Success Metrics
I conducted an unmoderated usability test with 7 individuals. My primary goal was to gather insights on the navigation and getting feedback on the overall design.
Users were able to successfully finish most of the tasks in under a minute with high percentages of “Direct Success” which shows the information architecture was in the right direction. Finding the AccuTrak guide was the most difficult task to navigate according to the data which brings me to the next steps in making iterations while incorporating feedback from Susan.
Quantitative Data
Qualitative Data
Iterations + Final Designs
Changes: added a language tab for multilingual support
Changes: added an email form for convenience
Changes: rearranged and renamed “Online Claims” for better navigation
Final Product
What I Learned
Communication is key
Effective communication and collaboration ensured that both the client and I have a shared understanding of the project goals, requirements, and expectations. By engaging stakeholders in the decision-making process and seeking their input and feedback, I was able to meet their needs and expectations, leading to greater stakeholder satisfaction
Information Architecture
Information architecture is crucial in a website redesign because it determines how content is organized, structured, and presented to users. By structuring content in a way that supports user tasks and goals, information architecture helps to drive user engagement, conversions, and ultimately, the success of the website.