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:
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
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
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 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 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
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):
Things we found through interviews:
Based on our research data, we did 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.
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’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.
We did feature prioritization to decide what we would need to include in the website.
Primary and Secondary User Flows
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.
Click here for the interactive prototype of mobile version.
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!
