• Yiming Wang

The Walking School Bus (TWSB)

Transformation of A Content Dense Website into A Clear and Responsive Website.




Brief


The Walking School Bus is a non-profit charity organization that provide students in developing countries with access to education.


The problem our client currently has is that their website is too content dense (over 100 pages), which makes it hard for their users to explore and find the information they need. There is no enough contrast between fonts and background pictures and the website loading speed is very slow.


Our goal is to redesign existing website, make it responsive and simplified. Providing people with better user experience thus raise the chances that they will help with the organization.


Client required functions: Payment, blog, social, store and donations.



Research


After thoroughly read through all the contend from the website, the first thing we did is to identify between business goals and user goals, in order to tailor our research questions to answer these specific goals.


Business Goals vs User Goals

Business Goals:

  • Raise awareness

  • Educate users the TWSB’s works

  • Attract donors, fundraisers and researchers


User Goals:

  • Understand TWSB’s mission, works and impacts

  • Donate and participate in expedition

  • Transparency of TWSB


Brainstorming and Ideation

Current mission statement of The Walking School Bus:


“WE EMPOWER EDUCATIONAL ATTAINMENT THROUGH MUTUALLY BENEFICIAL PARTNERSHIPS THAT PROMOTE OUR HOLISTIC, RESEARCH BASED APPROACH OF: ACCESS, NUTRITION, & CURRICULUM.”


It is hard to read as well as to understand. As mission statement is so important that we brainstormed it in the first place, here is the result:




Competitor Analysis


Bill & Melinda Gates Foundation

Our client likes this website as well. It is very clean with a hamburger menu instead of a traditional top menu bar. The layout of the information is very engaging and attracts people’s attention immediately. With the annual letter ——10 tough questions they were asked—— at the top raises visitors interest to learn more.




Heart and Stroke

Heart and Stroke is recommended by one of our interviewee. The website is very eye catching, big blocks of red gives visitors the emergency feeling as well as representing the colour of body organisms. They used two menu bars above and below the main picture, which helped organizing their content nicely.





World Vision

World vision is very famous locally and internationally. Their style is very simple and clean and works they did are displayed clearly on their website. Donors can choose which child they want to support and see how they have helped with the child by receiving reports. They will also receive cards from the child they sponsored.


All three websites are content dense but they are showing their information in a very organized way so that visitors won’t feel overwhelmed. This is the most important part that we need to help improve for The Walking School Bus website.


Survey


Survey Using Google Form, Picture from TWSB

We prepared google form for our survey and distributed it through our social medias and reddit. We also made another copy and asked our client to help sending out the survey to TWSB community so that we can get insights from people who are currently using the website.


I contacted one big local charity organization through their Facebook group and they kindly agreed helping us spread the survey through their community and twitter. Thank you Charity Village!



Our survey highlights (from 59 responses):


Charity Survey Result Data

Things we found through interviews:


Interview Findings

Based on our research data, we did affinity diagram.


Affinity Diagram

Content Audit


As the website currently has more than 100 pages and the information lacks organization, we felt the necessity of conducting content audit first.


Content Audit Overview

After content audit, we had a clearer idea of all the information on the website and together with our research results, we already had a better idea of how to showing all the information on the website.



Planning


We had two personas, one is interested in donating to TWSB and the other one is a researcher who is willing to participate in the next expedition.


Leah is interested in donating to TWSB.
Martin is interested in participating in next expedition.
Customer Journey Map

Leah’s friend introduced The walking school bus to her and she is interested in the organization. She googled and opened their website. She found the cause of TWSB is very attractive and she is willing to help. When she wants to learn more about the organizations works, she found that there are too many things happening and she could not find what she was looking for, she could not even figure out how to hep with the organization. At the end, Leah was getting overwhelmed and left the website. The circled out part is the user pain point and we would solve it.



Storyboard

We did feature prioritization to decide what we would need to include in the website.


Feature Prioritization

Primary and Secondary User Flows


Leah’s User Flow
Martin’s User Flow

Final Site Map


Design and Prototype


As charity’s nature decided that there are always a lot of information to be shown on the website, even though we cut down the pages dramatically and displayed them in a more organized way, there were still many pages for us to design.


We did tons of hand sketches for both desktop and mobile version, and had them tested by several people.



We had following feedbacks:


  • Add SHARE functionality on Expedition page.

  • Title on mobile homepage looks like a CTA button to some people. (Once real text was added, confusion was no longer there.)

  • LEARN MORE button at the end of each section so there would not be that much copy to load unless it is clicked.


We improved our design after following these suggestions and digitalized all the pages.


Mobile Pages Overview

Click here for the interactive prototype of mobile version.


Desktop View

Click here for the interactive prototype of desktop version.



Conclusion


While the content and images of the original TWSB website was rich, it was very cluttered and hard to navigate through the different elements.


By eliminating duplication, keeping a static navigation bar on the mobile and desktop site, and clearly showing what the initiative is all about, it is easier to navigate through the site, commit through the easily accessible DONATE button and ultimately get Leah to donate and Martin on an expedition.


This achieves the user and business goals.


During the whole project, our small group of 3 was working together tightly and everyone was always willing to help each other.


I am proud that we finished this big project in a relatively very short time, and our clients are very happy with our work.


Thank you Sachia and Annie!