GO Project - Website Redesign
To create a user-friendly, informative, and compelling website to increase user interaction
Project Type
Freelance - Responsive Web Design
Duration
May 2023 (2 weeks)
My Role
User Research
UX/UI Design
Interaction Design
Overview
Established in 1968, GO Project is a non-profit organization providing year-round academic, social-emotional, and family support to students from the New York City public schools. My mission as the product designer was to revitalize and amplify user engagement on their existing website.
The Problem
Website inconsistency hinders users from finding information and taking action effectively
The current website suffers from poor navigation with inconsistent labeling and a lack of hierarchy, which makes it challenging for users to find the information needed and limit the user’s ability to interact with the organization to take action.
Research & Insights
Immersing in the problem space
In order to understand the problem space, I narrowed down my research goals to the following:
01
Identify the strengths and weaknesses of the current website design to discover best practices and potential areas for improvement.
02
Learn about the main motivations and barriers of the users.
03
Understand users’ expectations of the organization regarding information, communication, and support.
Heuristic Evaluation
Prior to making any modifications to the existing website, I decided to perform a heuristic evaluation. By taking this step, I can ensure that any modifications made to the website are grounded in a deep understanding of its current state, enabling me to create a more seamless and satisfying user experience.
Main Issues:
Lack of visual hierarchy in navigation menu and overall design
Missing CTAs for target users - volunteers, job seekers, and families
The excessive number of content pages hinders users from quickly accessing essential information.
Affinity Mapping
To supplement and validate the insights obtained from the heuristic evaluation, I engaged in 5 user interviews with various stakeholders, including users such as donors, volunteers, job seekers, and the Senior Student and Families Services Coordinator at GO Project.
Key findings from user Interview:
Users are motivated by the organization’s mission and impact. They are unlikely to support if they are unclear about what the organization does.
Users are more inclined to donate when several payment options are available.
Users find the current website challenging to navigate because the content is all over the place and hard to look for information.
User Persona
Aligning on user needs & motivations
Drawing upon the insights gleaned from the heuristic evaluation and stakeholder interviews, four distinct personas have emerged:
Alice - The Corporate Donor, Cody - The High School Volunteer,
Sarah - The Education Job Seeker, and Maria - The Parent.
How Might We Statement
These statements will serve as prompts during brainstorming sessions, enabling me to generate ideas that directly tackle the specific challenges faced by each persona.
Shaping the user’s needs into specific & actionable questions
01
How might we clearly and succinctly communicate GO Project’s mission and impact to individuals?
02
How might we organize the website’s content so that individuals can easily navigate and find the information that they need?
03
How might we redesign the donation page to improve its visual appeal and make it more engaging and trustworthy to individuals?
Information Architecture
Restructure information architecture to streamline user navigation
Based on the heuristic evaluation and stakeholder interviews, it's clear that the website lacks hierarchy and clarity in its navigation. To improve navigation and help users find relevant information, I restructured the information architecture and introduced user-specific CTAs on the landing page. This streamlined the navigation process, reduced clutter, and simplified the menu.
Wireframes
Bringing it all together
01
Enhancing Engagement
In order to engage and cater to the primary target audiences - donors, volunteers, career seekers, and families - I prioritized incorporating clear and prominent calls-to-action (CTAs). By revamping the homepage, I placed a heightened emphasis on effectively conveying the mission and impact of the GO Project. The ultimate goal was to craft a user experience that deeply resonates with individuals, fostering motivation to support the cause.
02
Simplifying Donation Process
To optimize the donation process by creating a secure and reliable system that offers users multiple payment options. By streamlining this process, I aimed to enhance the overall user experience and instill trust in the donation process, ensuring that users feel confident and comfortable when contributing to the cause.
Streamlining Volunteer and Paid Opportunities
03
With the extensive involvement of volunteers and seasonal staff at GO Project, my focus was on creating a "join our team" page to streamline the process. The objective was to consolidate both volunteer and paid roles onto a single page, simplifying the user experience.
04
Simplifying Enrollment
In response to the challenges faced by current families in understanding GO Project's programs and navigating the website for the application, my focus was on creating a new "enroll now" page. The primary goal was to streamline the application process while providing comprehensive program details on a single page. By doing so, I aimed to alleviate the difficulties experienced by families and ensure a seamless and user-friendly experience for them when enrolling to GO Project.
Branding
Elevating brand identity through design system
Taking into consideration the existing logo and primary brand colors, I made strategic updates to enhance the brand's visual identity. Expanding the color palette with lighter and darker shades helped to balance and neutralize the vibrancy of the primary colors. Additionally, I introduced Open Sans and Montserrat as new typefaces to create a clearer distinction and hierarchy between headings and body texts, ensuring improved readability and visual appeal.
To prioritize accessibility and enhance user experience, I incorporated a set of carefully chosen icons. These icons not only aid in effortless website navigation but also inspire confidence in the donation process by providing clear visual indications.
Primary Colors
BCD430
19A7B4
54A546
E8F1B1
Neutral Colors
000000
4B4B4B
F0F0F3
FBF4EC
FFFFFF
Typography
Buttons
Body - Montserrat
Heading - Open Sans
Iconography
Components
Usability Testing
Testing out in the real world
A usability test was conducted with 5 participants from the target user group to evaluate the redesigned website. The results unveiled valuable insights, highlighting areas where further enhancements can be made:
Priority Iterations
✨ Iteration 1
✨ Iteration 2
✨ Iteration 3
While developing my design system, I conducted color accessibility tests on the primary CTA with 6 users ages 25-60.
Although the initial button design met WCAG color accessibility standards, users found it challenging to access. This unanticipated outcome prompted the development of the final button iteration, significantly enhancing user-friendliness and accessibility.
Final Design
Designing for mobile responsive web
Upon evaluating the existing website, I discovered it lacked responsiveness in mobile browsers. To improve mobile accessibility, I prioritized creating a responsive design specifically for smaller screens. Given time constraints, my focus was on optimizing the most critical feature: the donation process. This approach aimed to ensure a seamless and professional experience, enhancing credibility and user trust throughout the responsive screens.
Takeaways
Thoughts & Lessons Learned
Quick decision-making: Due to time constraints on this project, I opted to perform a heuristic evaluation of the current website. By combining insights gathered from user interviews with this evaluation, I successfully narrowed down the project scope.
Prioritizing information: The current GO Project’s website is very content-heavy. By understanding the business and user goals, I learned to effectively organize and present information to achieve both goals.