Chris Allen
Ladders
Redesigning a nonprofit website
Challenge
The website of the organization needs to be revamped in order to better interact with its audience by delivering more informative content and building a consistent visual style.
Project manager/ UX designer
My role
Project time
3 weeks
Tools
Figma, Miro, Invision, Octopus
My UX design process consisted of five key phases
empathy phase
What is 25 Ladders?
25 Ladders is a non-profit organization partnered with Arlington ISD located in Arlington, Texas. The organization's mission is to assist the youth from ages 10 to 25 in educational development, mentorship, career guidance and community partnership.
Site evaluation
First, we began our research by evaluating 25Ladders.org. We wanted to put ourselves in the shoes of the user. Our goal was to find areas where their present mobile and desktop website design may be improved.
(current desktop and mobile version of 25Ladders.org)
Define phase
Redlining
After reviewing their website, we documented our results by redlining and annotating current issues.
​
-
Dead Ends (Clickable text would take you to a dead-end)
-
Not enough information about the organization
-
No call to action buttons
-
Misleading video thumbnail ( the video thumbnail on the main page looks as if the website was about nutrition).
-
Out of place hero text
-
Distracting colors (some of the body text and the background colors compete, making it harder to read)
-
Form elements missing labels
-
Overlapping text and images ( when you scroll, the text overlaps some of the images)

Insights
Following redlining, we made several attempts to contact the organization in order to gather more information about the organization's needs and challenges but we received no response. Therefore, we had to rely on secondary research data.
Competitor analysis
We then began conducting research on other nonprofit organizations similar to 25 Ladders. We discovered recurring challenges amongst several nonprofits such as little to no experience with business management, poorly planned business model, lack of sponsors, donators, volunteers, or poor marketing, which results in a lack of community awareness of the organization.
User interviews
After learning about what other nonprofit organizations struggle with, we then began to conduct users interviews to gather qualitative data from the organization's potential users. We had our interviewees complete a few tasks on the 25 Ladders desktop and mobile website. Below are the key takeaways that we discovered from our interviewees.
Next, we were able to form our persona, Mike. Mike is enthusiastic about education and raising awareness about how education and mentorship have influenced his life since he was a child. He currently owns a software firm and is searching for a nonprofit organization to collaborate with. Mike comes across 25 Ladders while doing some research on local education-related non-profits; but, after reviewing their website, he is turned off from working with them due to their unprofessional appearance.
The Problem
The website did not appeal to the users and harmed the organizations overall brand, causing fewer users to learn about what the organization does and reducing the donor acqiusition rate.
The Solution
Our team will overhaul the 25 ladders website and appeal to the user by showing detailed information about the organization, presenting nice pictures of the organization in action, and making the website easier to navigate.
We will create a cohesive mobile design system to strengthen the brand’s image to potential donors, volunteers and parents.
Ideate phase
​
Card Sorting
To begin our ideate phase, we asked ourselves how would we like our users to navigate through the newly designed website and what content should be included. Therefore, we conducted an open card sort and then created our site map from our card sorting results.
Open card sort
We reviewed the current website and our interview data and listed all of the content that was already on their site and content that should be added that wasn't available. We also renamed some of the headers in the primary navigation so users wouldn't be confused on where to find the information they were looking for.
Card sort results
Site Map
Next, we developed a site map using the results of our card sort to provide a visual representation of our website's layout and navigation.
Style guide
We created a style guide as the final step in our ideate phase to ensure a consistent look while building our UI. Green was chosen as our major color since it represents growth and complements the organization's objective. We used yellow as a supplementary color to draw attention to call-to-action buttons.
Our font selections and sizes were made with the goal of making readability as easy as possible for our users. We also wanted to include commonly used icons to avoid misunderstandings about what each icon signified and how it worked.
Prototyping
Wireframing
My partner and I were ready to begin making digital wireframes. Since there were only two of us we decided that one of us would work on the mobile design and the other would focus on creating the desktop version.
We had to work quickly and efficiently to meet our deadline, so we sketched out a few paper wireframes and then went straight into developing mid-fidelity digital wireframes.
We chose to develop our wireframes in the order of our sitemap so that we could both work at the same pace. We also completed all of our work in Figma on the same page so that we could compare wireframes and ensure that our designs were similar.
Test
User testing
We had to do some user tests before we upgraded our wireframes to high fidelity. We created a testing plan that required our users to complete a series of tasks and assessed their performance. Our goal was to find any problems that we had overlooked and correct them.
Testing takeaways
We made notes on a few things that were pointed out to us during testing.
-
The user suggested aligning text to the left.
-
The primary logo wasn’t functional on all wireframes.
-
Add a signout button
-
Inconsistent color and spacing in body text.
-
The color of the call to action buttons are competing with the primary theme color.
-
The design needs more margin space.
After reviewing our test notes we went back to our wireframes and began making modifications.
Iteration 1
Our body text was originally middle aligned which caused readability issues, therefore we aligned the body text to the left and made sure all of our fonts were the same.
Before & After
Iteration 2
We went back through our navigation and made sure that all of our primary logos were functional. When pressed they will take you back to the main page.
Iteration 3
There is a button to login into your account when you press the hamburger menu. We made a sign-in button but neglected to make a sign-out button, so we designed one to correct the error.
Iteration 4
We made a color change to our call to action buttons. To bring more attention to the user we changed the buttons to yellow.
Before & After
We ran a few tests after our iterations and then began upgrading our wireframes to high-fidelity design.
Final Design
After creating, testing, and iterating our wireframes, we arrived at our final design. Now I will show you our redesigned mobile and desktop version of 25Ladders.org.
Home page
25 ladders' homepage page includes a timeline of the organization's history, a mission statement, a list of services provided, testimonies, contact information, and ways to get involved.
Primary navigation pages
-
More information on the organization's current and upcoming events, such as the I Rise Program, can be found on the programs page. The I Rise Reading Academy is a Summer Intervention Reading Academy for struggling readers that focuses on Reading Strategies, Word Study Analysis, Basic Writing with Sentence Structure, and TEAMS (Technology, Engineering, Arts, Math, and Science).
​
-
Users can sign up to assist the organization with its day-to-day operations for the youth on the volunteer page. The volunteer page also includes information on the various types of volunteer opportunities as well as the standards that must be met in order to be considered.
​
-
Users can sign up to donate to the organization by contributing money and office supplies on the donate page. You can also find out how far current goals have progressed thanks to the contributions of others.
Amazon Smile
Amazon Smile is a donation program run by Amazon that donates 0.5% of your eligible purchases on Amazon to a charity of your choice. 25 Ladders provides a link that will direct you to Amazon, where you can donate to the organization when shopping.
Sign In
The 25 Ladders website offers tutoring and mentorship services for adolescents who need extra help in a variety of areas, including academics, job placement, and career aptitude testing. The sign-in screens are shown in the wireframes below.
Amazon Smile
Sign In
conclusion
What we solved
-
The website is easier to navigate through.
-
We created a chat widget to contact someone in the organization.
-
The website now provides users with more detailed information about what they do.
-
The website now has high-quality images.
-
The mobile and desktop version of the website are cohesively designed which strengthens the brand’s image to potential donors, volunteers and parents.
-
Improved accessibility.
Final words
My partner and I worked very well together, because our group consisted of just two, we had to operate strategically in order to meet our deadline. We are really satisfied with the way we redesigned the organization's website, and we believe it provides the organization a more credible and professional appearance.
Thank you