GO Project - Website Redesign
To create a user-friendly, informative, and compelling website to increase user interaction
My Role
UX/UI Design
User Research
Interaction Design
Timeline
May 2023 (2 weeks)
Tools Used
Figma
Notion
The Problem
Website inconsistency hinders users from finding information and taking action effectively
GO Project is a non-profit organization providing year-round academic, social-emotional, and family support to students from the New York City public school. 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.
Solution
What does success look like?
01
Easy-to-
navigate
02
Visually
appealing
03
Increase user interaction
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 in terms of information, communication, and support.
Heuristic Evaluation
Prior to making any modifications to the existing website, I decided to perform a heuristic evaluation. This evaluation allows me to delve into the website's strengths and identify areas where improvements can be made in terms of user interaction and overall usability. 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.
Lack of visual hierarchy in navigation menu and overall design
Main Issues:
Missing CTAs for target users - volunteers, job seekers, and families
Lack of clarity around terminology used for navigation menu
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. These interviews aimed to gain a deeper understanding of their motivations and pain points in relation to the current design. By directly interacting with the users and listening to their perspectives, I aimed to uncover valuable insights that will inform the creation of an effective and user-centric design.
Key findings from my interviews:
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. These personas provide a deeper understanding of the diverse user groups and their specific needs, allowing us to tailor our design and user experience to cater to their unique requirements.
How Might We Statement
Shaping the user’s needs into specific & actionable questions
To ensure that the solutions effectively address the pain points of the different personas, I have translated their needs into HMW statements. These statements will serve as prompts during brainstorming sessions, enabling me to generate ideas that directly tackle the specific challenges faced by each persona.
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.
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
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.
03
Streamlining Volunteer and Paid Opportunities
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.
Usability Testing
Testing out in the real world
A usability test was conducted with 5 participants from our target user group to evaluate the redesigned website. The participants expressed satisfaction with the changes implemented compared to the existing website. Based on the test findings, the following feedback were made along with two areas requiring adjustment:
The website is a lot clearer, simplified, and easy to navigate.
I can easily get a sense of the organization’s mission on the homepage without having to dig through the menu.
Very intuitive and the overall design instantly create trust and credibility.
Priority Iterations
Iteration 1
Repositioned the “enroll now” button for better accessibility.
Iteration 2
Increased overall text size to improve readability.
Final Design
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.
Designing for mobile responsive web
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.