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:

  1. Users are motivated by the organization’s mission and impact. They are unlikely to support if they are unclear about what the organization does.

  2. Users are more inclined to donate when several payment options are available.

  3. 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.