Sue Hua | Scholar & A Dream

Scholar & A Dream is a 501(c)(3) nonprofit organization based in New York City

Project overview

Scholar & A Dream's mission is to enhance the lives of students of color through scholarships, career development, and mentorship.

S&AD's existing website launched in 2018. It’s outdated, lacks visual hierarchy, and non-responsive to mobile devices. The client aims to migrate their website from Wix to a self-hosted site because of its technical limitations and design constraints. The redesign will focus on enhancing the existing visual design of the website and optimizing for a future website re-build and launch.

The purpose of the website is to appeal to prospective donors, while also providing resources to students applying to S&AD's scholarship programs. From the website’s navigation, donors are directed to a dedicated Donations page, which has external links to various methods of payment. High school students interested in applying to the scholarship, can access the Google Form application form through a link on the homepage.

Build empathy with the client through stakeholder interviews

Stakeholder interviews

I worked closely with S&AD to redesign their website. My primary stakeholder was the Chief Technology Officer, who oversees the website. I also met with the Chief Business Officer to gain insight into their non-profit business goals, as well as the Head of Education and Head of Partnerships to learn about their student and donor user base. These stakeholders provided me with an account of the usability issues users face on their website, as well as the organization's goals and aspirations.

Below are S&AD's non-profit goals as outlined by their team:

Migrate the website from Wix's website builder host to a standalone, self-hosted site

Appeal to prospective enterprise donors and corporate sponsors to scale partnerships

Engage with students and parents interested in applying to their scholarship

Increase charitable funding to develop a 4-year full tuition scholarship for students

Sponsor student programming and events accessible from an online student portal

Set up a Donorbox form (via Stripe) for donors to allow recurring payments

Supplement user insights with a website audit and secondary research

Heuristics evaluation

Stakeholder interviews clearly defined the client's business goals and provided detailed feedback on their users. As a result, I chose to forgo user interviews. I built my hypothesis on the user insights provided by the client and supplemented my knowledge with secondary research. I included qualitative questioning during the usability testing to validate whether these assumptions. As a starting point, I began my research auditing the existing website's user interface and content. I rated the issues between 0-4 based on impact to usability (0=not a usability issue, 4=severe usability issue).

view Full analysis →

Secondary Research

I gained knowledge related to non-profit website design and how to optimize for donations through topical research. Not to lose sight of their student constituents, I also completed a competitive analysis of nationally recognized non-profit organizations focusing on equitable access to education and higher learning. Analyzing these websites gave me a frame of reference for how a well-designed website and effective content strategy can be implemented for non-profits. Below are the key findings from my research:

Poor content usability is common issue. Effective non-profit websites make information accessible increasing trust and credibility with donors.
Provide answers to donors upfront. If potential donors have questions, they have little motivation to find the answers if not readily available.
Keep the donation process simple. Once users decide to donate, a clear CTA and easy donation process keeps them on the right track to complete the action.

Donors want to know the organization's mission, goals, and impact. This information must accessible from the homepage. User struggle finding these details.
Donorbox is an online donation platform plug-in used to collect information from donors and process payments via Stripe or Paypal. It allows for one-time and recurring payments.
Content should be optimized for both the organization's constituents and donors. Create clear and distinct pathways for students and donors.

Align on user needs and motivations

Proto-personas & user journey maps

With insights from the stakeholder interviews and supplemental knowledge from topical research, two distinct proto-personas emerged: The Corporate Donor and The Student. I added a secondary proto-persona: The Individual Donor. While institutional and corporate funding is a goal for S&AD, it would be negligent to disregard the grassroots donors the organization has historically relied on for donations.

To grow empathy for the proto-personas, I created user journey maps to clarify how they would encounter S&AD's website, from initial discovery to long-term loyalty. I presented these to the client to ensure we were fully aligned on these assumptions before moving forward.

Identify intersections between the client & user

Project goals

With a solid understanding of S&AD's users, I created a diagram outlining S&AD's non-profit business goals and their user goals, keeping in mind technical constraints. The website needed to create pathways for both donors and students to access relevant information and content. This would involve updating the navigation, defining user-specific work flows, reorganizing existing content, and updating the visual design to establish legitimacy.

Streamline how users navigate the website

Sitemap

The existing navigation was simple but had little structure which made finding information challenging. From the website audit, I identified a total of 7 unique pages. Of those, 6 were accessible from the navigation bar. To create an effective navigation, the information architecture and hierarchy of the website needs to support it. For S&AD, the solution was to maintain a flat hierarchy while grouping relevant pages together into sub-menus. I proposed creating pages specifically dedicated to the scholarship programs, which streamlined the process of accessing the applications for students, as well as reducing the clutter of irrelevant information on the landing page for donors.

Differentiate between donor & student interactions

User Flows

Using the site map as a blueprint, I planned how users would flow through the website to complete their key tasks. From the perspective of my proto-personas, I defined the specific scenarios and decisions each would take to achieve their goals. For the Corporate Donor, I created a Corporate Partners page. For the Individual Donor, I focused on improving the existing Donate page. As identified in my heuristic evaluation, students didn't have a dedicated page to find scholarship information. When accessing the scholarship application, they got redirected to a Google Form. These were severe usability issues. Knowing it was S&AD's goal to eventually host their own website, I prioritized the dedicated Scholarship Programs page, as well hosting the application forms on their website instead of using a 3rd party.

Iterate on the redesign through wireframing

paper sketches

With the basic information architecture in place, I continued my ideation with paper sketches. I considered how content specific to each proto-persona should be organized. As the primary landing page, the homepage presented a challenge because it would need to cater to both donors and students. The biggest overlap I identified for both proto-personas was the need to establish a sense of trust and legitimacy for the organization, so I focused on having S&AD's value proposition as a non-profit organization prominent with additional details regarding their impact further down the hierarchy.

mid-fidelity wireframes

I used Figma to create mid-fidelity wireframes based on the paper sketches. I further iterated on the website's structural layout and added more detail to the various elements of the design. I completed a content audit and copy edited to ensure the existing content was adding value. I scheduled a meeting with the client to review the screens and ensure alignment before committing to a higher fidelity. I received minor feedback to include options for alternative payment methods in the updated Donate page, which I added.

Elevating brand identity through visual design

Style tile

The client wanted to keep their existing logo but was open to updating other aspects of their visual branding. Based on secondary research, it would be critical for S&AD's branding convey professionalism and trustworthiness to establish credibility. This perception was important for donors who provide funding and students who entrust their personal information with the organization.

I kept the brand colors of navy and gold, since those colors are associated with professionalism and achievement respectively. I expanded the color palette to include lighter and darker shades of each hue to give more nuance and flexibility. I updated the typeface, since the existing Josefin Sans font felt outdated. I opted instead for Montserrat, which is a geometric sans-serif typeface with high readability.

Conduct usability testing with a high-fidelity prototype

high-fidelity wireframes

Initially I planned to use the mid-fidelity screens for the prototype but decided to go with high-fidelity instead. Since the client referred existing users as test participants, I did not want them to be distracted by the conceptual mock-ups. While requiring a significant amount of work upfront, creating the high-fidelity wireframes paid off since I gathered valuable feedback from users on the updated visual design.

Test parameters

The goal was to determine whether users could complete their key task flows in the redesigned website. I also planned to validate whether the assumptions I made during the research phase held true and observe any areas of hesitation, confusion, or difficulty to participants while navigating the website. I prepared qualitative questions to gauge their overall perceived value of the redesign and updated visual branding. Additionally, I included questions about their perspectives on the existing website.

A total of 10 participants (5 donors, 5 students) were recruited through S&AD’s extended network, as well as adjacent professional networks. Each participant belonged to either the donor or student behavioral categories and include a range of ethnicities, incomes, locations, and genders.

View high-fidelity prototype in figma →

I like how the new design's navigation is less busy at the top... The website looks more modern and easily accessible. If I need further information, there are links that will redirect me to where I need to go. - M.A., Student, Test Participant

Test Results & Findings

I synthesized the test results through affinity mapping, recording user feedback, comments, and observations on sticky notes. I made groupings of common themes and categories. While I measured quantitative metrics including Task Completion Rate, Time On Task, and Error Rate, the differences were marginal. In contrast, the qualitative data was actionable and insightful. While there was general positive feedback on the redesign, I focused on the most frequent usability issues that participants identified. I prioritized next steps by focusing on the most impactful and high-priority areas to address. I combined the donor and student usability issues and plotted them on a grid, effectively ranking them by severity and frequency. Issues that were more frequent and severely impacted the website's usability would need to be solved for.

I want to see higher quality content... which shows all the work that goes into S&AD behind the scenes. I want to see how they impact the lives students in high school, college, and beyond. I want to see the entire journey. - R.R., Donor, Test Partcipant

key findings

Users didn't think primary navigation links were clickable because of the drop-down menus. Users thought the primary links were inactive.
Users were dissatisfied with the quality of the website's content. Users' biggest request was for higher quality content to accurately reflect the positive impact the organization has on the community.
Scholarship eligibility and requirements were the highest priority to those applying to the scholarship. Completing the application without this information is difficult since users are limited to one session and can’t save their work.

Users applying to scholarships wanted to save or review their work before submission. Students were concerned about losing their progress when navigating away from the application.
Donation form and alternative payment methods should be more prominent on the Donate page. The hero image was full-bleed, so it required scrolling to access the donation form.

Soliving usability issues through iteration

Prioritiy Iterations

I chose 4 revisions to implement based on the prioritization grid exercise. Beyond frequency and severity, I also considered what could most realistically be implemented within the project's deadline and time constraints, as well as any technical limitations that were shared by the client.

Before

Users didn't understand the primary navigation links were clickable and the drop-down menu's functionality.

After

Add arrow icons to indicate drop-down menus. Primary navigation links become inactive on hover.

Before

Finding information on scholarship eligibility and requirements were the highest priority for users applying to S&AD's scholarship.

After

Add eligibility and application requirements to the Details section on the Scholarship pages so it's more accessible before the applying.

Before

Users applying to the scholarship wanted to save and review the form before submission.

After

Add a Review section before submission, allowing users to review and edit their responses. Change link copy to "Submit".

Before

The donation form and alternative payment methods are not prominent on the Donate page.

After

Change the page hierarchy so the donation form appears first, reducing scroll and allowing users to quickly make a donation.

View the final desktop screens →

Designing for mobile responsive web

Mobile Screens

With revisions applied to the final high-fidelity screens, I focused on developing mobile responsive screens before development hand-off. Based on the the heuristic evaluation, the existing website design had many inconsistencies and errors in spacing and image resizing when viewed on a mobile browser. In the redesign, modular elements were created that could easily stack on a smaller viewport with center alignment.

Reflecting on what I learned and what's next

learnings

Redesigning S&AD's website was a meaningful opportunity. The founders of the organization volunteer their time to give back to their community and impact the lives of underserved students. I was excited to contribute by redesigning their website to better reflect the impactful work they do. As I reflect on the project, these are the lessons I learned:

Effective client management involves investing time into building a collaborative relationship. Working with the client meant balancing their needs and goals with that of the users, which weren't always aligned. Having open communication and transparency with my stakeholders helped immensely.
An effective content strategy makes a huge difference. Due to limited resourcing, the client didn't have a content strategy, which meant a majority of their website's content was outdated and poorly organized. I spent a lot of unanticipated time doing copy editing since the quality of content directly impacted the quality of the design.
Creative problem solving can overcome technical constraints. Moving off Wix and relaunching the website to be self-hosted is a massive undertaking with many technical considerations. What I realized throughout the project was that the most obvious solution is not always the easiest to build. An example is account creation. While widely requested, this wasn't a feature the client could realistically prioritize for the initial re-build so I had to problem solve to find alternative solutions.

Next Steps

For this project I focused on redesigning the website to optimize the experience for donor and student users. To continue iterating, I would focus on:

Measure impact of the website redesign. The website rebuild is slated to go live by the end of 2023. At this stage, I would want to measure whether the redesign was successful in increasing donations and student engagement.
Explore creating dedicated donor and student portals for highly personalized content. This would require Account Creation, which would allow students to access their application forms and check their application status.
Designing an effective user-centered content strategy. While creating a content strategy was not in scope for this project, S&AD would greatly benefit from having a defined content strategy.

Scholar & A Dream

Redesigning a non-profit organization’s website for desktop and mobile web