Embedded Files
Summary
Summary
Overview
Overview
I partnered with a nonprofit organization called Clear Direction Mentoring (CDM), evaluated the current experience of their website, and proposed a high fidelity redesign. The objective was to attract newcomers and donors to the organization by improving the information architecture, navigability, and usability of the site.
CDM provides long-term mentoring and internship opportunities for underrepresented students in the field of STEM. However, nonprofits typically don’t have as much access to designers as companies do because designers tend to gravitate towards paid positions. Therefore, I decided to do a UX project in the nonprofit space and use my design skills for a good cause.
My role
Throughout the duration of the project, I worked with 4 stakeholders from CDM and took on the role of both a UX researcher and UX designer. My responsibilities involved gathering user pain points, conducting market research, restructuring information architecture, and leading design meetings with CDM. The lead stakeholder and main point of contact was Julia Derk, the director of the nonprofit. I was also responsible for building low, mid, and high fidelity designs and conducting usability testing.
The problem
CDM struggled to get donations because their website was confusing and challenging to use. The information was arranged in such a way that the content users expected to see on a given page was either missing, difficult to find, or found in an unexpected area. In fact, users did not immediately know what CDM's purpose was. Therefore, the site didn't effectively promote the nonprofit to newcomers who could be potential donors.
Defining project success
From the redesign, users know what Clear Direction Mentoring does as an organization
Users can easily navigate the site and know where to find information
Users would be willing to support CDM and donate money
Research
Research
Testing the initial experience
Testing the initial experience
To evaluate Clear Direction Mentoring's website and better understand the problem, I conducted 4 moderated user tests of the initial experience. Each user took the perspective of a potential donor and provided verbal feedback about the site and whether they would be convinced to donate to the organization. At the end of my testing sessions, the general consensus was that users did not feel inclined to donate any money. I created an affinity map of the pain points to find repeated patterns.
Major pain points
Too much text: The long paragraphs of text made it difficult to digest information about the organization
Lack of media: Leaving media, testimony, and past experiences out made the organization appear less credible
Inconsistent styling: The varied styling for each page became distracting and made the organization look unprofessional and less trustworthy
Unorganized information: The site became difficult to use because information was missing or hard to find
Key opportunities to improve
The styling of the site could be cleaner and more consistent
The text could be shortened and supplemented with images for better readability and understanding
Adding quotes, testimony, and past projects would increase the organization's credibility
The pages could be reorganized and better displayed in a nav bar for easy navigability
Competitive analysis
To inspire and inform my key elements and visual design, I observed what was on the market and see which features I wanted to add in my redesign. I created a feature comparison chart, which compared CDM's website to 3 other sites: Dream Makers Project, Access Opportunity, and Hope Communities.
Characteristics of a donor
According to CDM, a donor is anyone who can donate in $2 increments. College students are included in this target audience, which makes them valid users for feedback and usability testing. To gain a better understanding of who would likely donate to CDM, I conducted some market research.
Donors on an individual level
Have been working for several years in industry long enough to have excess wealth
Typically past college age since college students tend to have less money
People who work with / are exposed to students (potentially parents)
Interested in the STEM field
Donors on a corporate level
Educational institutions / organizations
Universities
Tech companies or businesses tied to STEM
Design
Design
On a weekly basis, I would lead design meetings with stakeholders from CDM. The purpose of these meetings was to show my progress, receive consistent feedback, and determine next steps.
Mapping out a user flow
Mapping out a user flow
Before creating the wireframes for my redesign, I utilized the context from my donor characteristics to identify the steps a user would take to make a donation to CDM. Then, I created a single path user flow to inform the pages I would add to my wireframes.
Restructuring the information architecture
Restructuring the information architecture
Since one of the major pain points of the original experience was a lack of organization, it was crucial for me to reorganize the structure of the site. I gathered the general content requirements from CDM and created a diagram to visualize the new, redesigned information architecture.
Sketching initial design concepts
Sketching initial design concepts
I sketched low fidelity wireframes using pencil and paper to gain preliminary feedback on the general structure and flow of the site. The goal was to provide opportunities for content visibility, stylistic consistency, and intuitive layout. I found that deviating from large blocks of text had a positive reception from both users and CDM.
Points of feedback
On the donation page, action items like choosing the donation method should be towards the top of the page so that users won't have to scroll down to find what they need
The hamburger menu will not be necessary on desktop because of the nav bar
To protect the identities of high school minors, fellows will not have their individual names and portrait images displayed
CDM does not have regular events, so there shouldn't be an events page
Transitioning to mid fidelity wireframes
Transitioning to mid fidelity wireframes
After finishing my low fidelity sketches and getting approval from CDM, I built my mid fidelity wireframes using grid on Figma. While I did not worry about fonts, colors, and images during this stage, I fine tuned the page hierarchy, spacing, and sizing of my elements. To put real, textual content on these wireframes, I used the existing text on the original site and contacted CDM regularly to request any content I needed.
Testing and professional feedback
In addition to receiving feedback from CDM, I received feedback from Brittney Urich VanHorssen, a lead product manager at Amazon Business. I also presented my designs to 5 college-aged users. Suggestions for improvement included the following:
The "Apply" button should be renamed to "Join us" to better invite high school students into the organization
Avoid using the acronym "CDM" in the page headers and use a call to action instead
Use sentence case throughout the prototype since it is easier to read than title case
Text (sentences) that exceeds one line should be left aligned for easy reading
The "Donate" button should be differentiated from the rest of the buttons because it is the main call to action that should catch the user's eye
On the "Our People" page, rows of 3 headshots should be centered so that it doesn't look like someone is missing
Creating the high fidelity prototype
Creating the high fidelity prototype
Continuing from my mid fidelity wireframes, I created a style guide that included colors, branding, sizing, icons, and components. Then, I built out and prototyped my wireframes to resemble what the developed site would look and feel like. CDM gave me access to their image library so that I could have the necessary media for my designs. The most prominent changes I made were:
Having a heavier use of media to show users what CDM does
Using minimal amounts of text to highlight important concepts and avoid overwhelming the user
Reassigning content to pages that match user expectations
Designing with a consistent, clean style to promote professionalism and credibility
High fidelity interactive prototype
Testing and points of feedback
This time around, not only did I receive feedback from CDM and Brittney, but I also conducted 3 moderated usability tests with a script to ensure consistency in my interviews. My testers consisted of instructors, users who better fit the characteristics of a donor. Suggestions for improvement included the following:
STEMM is not a common acronym, so for the home page, a text animation could cycle through the different parts of it so that users will know that the extra "M" stands for "medicine"
The "Join us" page needs consistent buttons for calls to action so that users can have an easy, visual target to click on if they want to apply for something
Drop the shadow on the nav bar when there is a hero image so that the nav links have better contrast
When small text is contained in a colored box, the text can be lost in a sea of color, and the box can clutter the page. Remove the colored boxes
Portrait images and icons can be reduced in size to clean up the page
Users will click on the images of board members and mentors on the "Our people" page with the expectation of a short bio to ensure credibility. This page is extremely important because donors are supporting the team who directly works with the students
Evaluation and Results
Evaluation and Results
Compared to the initial usability tests where users did not feel inclined to donate, the feedback was quite positive for the final usability tests. I was even able to get the opinion from a user who already donates money to organizations like Cooper Union. A quote from an instructor: "Great job on the mock up. The site looks really good all around!" To measure the success of my project, I asked 3 questions at the end of my moderated user tests:
Does the site effectively sell the organization to you?
Is the information easy to digest? Is it well organized and formatted?
Overall, do you feel inclined to support and donate to the organization?
From my 3 moderated user tests, the answers to these questions were "yes" all around.
Reflection
Reflection
What I learned
Communication and external client relations: Throughout the duration of the project, I learned and practiced how to effectively convey my ideas to groups of people outside of an academic setting. This involved compromising decisions to meet both design standards and client needs.
Visual design skills: By getting professional feedback from Brittney and referencing other precedents, I was able to refine my use of color, sizing, and spacing to create visually pleasing layouts.
Testing: It is important to iterate and repeatedly test designs with a variety of users and stakeholders. This way, I was able to incorporate various perspectives into my designs to make them better.
Importance of a public, online presence: An organization can succeed or fail based on their public presence, which is heavily influenced by how they present themselves on a website. The way a site is designed can influence how much people trust the organization behind it.
Moving forward
If I had more time to work on this project, I would want to design the mobile experience for CDM. In today's age, many users only access the internet through their mobile devices. With this in mind, there is an opportunity to make CDM's website more accessible. If the organization had a clean, professional, and intuitive experience for both desktop and mobile, they could reach more users with their cause.
Something I would also like to note is that my contact with CDM ended after handoff. While I wasn't able to directly contribute to development or see it through, I was happy to see that CDM started to incorporate my designs when I checked their site. In the future, I hope that CDM thrives and gains the funds to reach more students form historically marginalized groups. Our world would certainly benefit from diverse minds in STEM.
An update
About 3 months after handing off my designs to Clear Direction Mentoring, most of my designs were incorporated into the website. Being curious about the success of my work, I decided to check the site's online traffic. I am happy to report that over those 3 months, the online traffic increased by 40%!
From Clear Direction Mentoring
Hi James,
I'm glad that your professors and peers liked your process and product. We do too! Thank you so much for your tremendous work on this project. We are so excited to begin working on implementing. We'll let you know if we have any questions and otherwise, wishing you the best! We appreciate your efforts this semester and look forward to seeing the amazing things you do next in your career.
Cheers,
Julia
Page updated
Google Sites
Report abuse