Mayeda Khan
/
Experience Strategist
BACKGROUND
The World Bank Group's Inclusive Education Initiative (IEI) is a multi donor trust fund which aims to improve educational participation and leaving outcomes of children with disabilities. The IEI also has three pilot projects within Ethiopia, Nepal, and Rwanda. The IEI collates, disseminates, and coordinates evidence-based research and resources to form a quality assured global knowledge hub and community of practice (COP) on disability-inclusive education.
Role
UX Lead
Scrum Master
Team
Project Manager
Creative Director
Timeline
2 months (2020)
Deliverables
Journey Mapping
Sitemap
Wireframes
Style Guide
Visual Design
CHALLENGE
The IEI group came to Blue Water with the need for creating a responsive website to provide project details and provide an accessible knowledge repository for those looking for education and leaning material regarding disability-inclusive education. Because this was a global repository, accessibility and low bandwidth design were imperative to its success and usability.
BARRIERS
Knowing that our audience for this website would include people from all facets of life, we wanted to better understand the barriers that existed for our diverse user base in participating and accessing this online community and their specific needs.
*Audience analysis based on answers (in French and English) of 263 participants ranging from technical experts, C-level employees, academics, teachers, and on-ground facilitators.
GOALS & NEEDS
As the first step of understanding IEI's ultimate digital goals, we conducted stakeholder interviews with seven World Bank employees and consultants across a range of specialties. They were asked questions regarding the fund's mission, values, characteristics, and unique organizational needs. Some of the quotes that stood out to us:
"The site needs to be accessible in every format including videos with sign language.”
“We want to be the go-to resource on inclusion for children with disabilities.”
“it’s necessary to drive donations.”
“We want to be the go-to resource on inclusion for children with disabilities.”
So, who are the intended and organic users of this website anyways? Through stakeholder interviews and a client workshop, we identified some key user groups and outlined their individual content, technology, and accessibility needs to ensure we were creating an inclusive experience that could be accessed across the world.
Needs
-
Language requirements (French and English)
-
AA accessibility requirements
-
Color contrast feature
-
Limited interactivity for low bandwidth users
-
Mobile-friendly
-
HTML only pages
-
Transcripts and subtitles for all videos
-
Audio recordings for all publications
-
Knowledge repository with ability to upload images and documents
-
Content tagging system for publications and press updates​
-
-
Newsroom
-
Events (Past and Upcoming)
-
Multiple time zone capabilities​
-
PROCESS
Once we established our needs and requirements for our users, we started drafting a sitemap based on client direction and existing IEI content and publications. Based on the immediate needs for this website and initiative, we set out to create a lean website that provides insight into ongoing projects and also has dynamic information to maintain ongoing users.
With the sitemap approved and signed off by all parties involved, we started wireframing the website to identify key points of interaction, prioritize content, and identify areas of high accessibility need. Due to the straightforward nature of the website and user low functionality needs of the users, we only needed two iterations of wireframes to suit the needs of our clients. Revisions were done on final designs since visual design was considered an important aspect of accessibility and readability for our user base.
HOUSTON,
WE HAVE A SOLUTION
Now that we had basic design concepts and content aligned, we started creating a visual identity for the brand and website. This included creating a color grid based on brand colors that had the appropriate color contrast ratio and ensuring font sizes were readable. The pink that was provided by client also had to be darkened to fit 4.5:1 contrast ratio between our text and accent colors. Style guides and final designs are displayed below:
Accessibility toolbar placed on the bottom of mobile device for ease of access across all pages.
Mobile menu placed in bottom of mobile device for those with dexterity issues. We also did not use a hamburger icon to remove any confusion for those who are not so familiar with digital design basics.
OUTCOMES
Because development for this website would be done by World Bank's internal web development team, we provided our final wireframes and designs, and I was responsible for annotating all designs with functional specifications for desktop and mobile. The website recently launched to positive feedback and will be undergoing updates in the near future to include an accessibility toolbar and community dashboard.
How is the website holding up for low bandwidth users?
Through the Google Chrome Network Developer Tool, I tested the dev website to determine how it performs for low-speed 2G users.
​
Based on several tests across multiple pages, I found that each page loaded HTML under 3 seconds and all images and fonts populated within 8 seconds. This was great news to us and the client team, since many IEI users rely on 2G internet across the world.
What are people saying?
