The International Baccalaureate is an international educational foundation. They have schools and programmes all over the world. They wanted to improve their website to make it easier for the different target groups. I was responsible of designing wireframes, create a prototype with a front-end colleague and deciding about functionality.
The International Baccalaureate is an international non-profit educational foundation headquartered in Geneva, Switzerland. The IB offers world-leading programmes to over 1 million students aged between 3 and 19. Working with governments, top universities, 3,900 schools, and the students themselves; the IB needed to improve the experience for its audience.
“It was time for us to become strategic in our online communication to ensure that we provide value for our audience,” says IB Online Media Manager Matt Shaw. “Through a survey we ran in March 2014, users told us that the website wasn’t working as well as it needed to. We wanted to ensure that we provide a user experience for our visitors that are above and beyond expectations.”
This has been a project at Nansen since summer 2013. The website is responsive and was released at during winter 2014.
The whole project was run by the London office. With the client based in The Hague, colleagues in London and Stockholm, we were of course forced to have great communication along the way. Using the scrum method, we had daily stand-ups, sprint meetings and weekly demos with the client.
I got into the process where some of the client workshops already had been done and it was time to sort out all different content to make a specification of functions along with a sitemap. The IB had lots of content for several target groups, so one of the hardest things at that point was to define what content they should keep and what to throw away. With A3-papers and post-its we started off with sorting all content out.
It then turned into hand-made sketches. In that way we could easily copy and paste irl different areas on the pages. A completely new information structure was created to fulfil the different needs of the target groups. The content now reflects the information that each user group needs when visiting the site. A comprehensive search function allows students and parents to filter all 3,900 schools by country, language, and programmes.
This was then transformed into html in the Nansen Blueprint Tool, which we developed in house. The Nansen Blueprint tool is a prototyping tool which gives you real code to implement in the frontend later in the process. Since I don’t have any coding skills by myself, I had a frontend colleague to help me in these sprints.
This was an easy way for the client to follow our progress. They used the same url to see the latest changes, they could add annotations during meetings to make it easy for us to make changes. We used this for all sprint demos and meetings and the project was transparent for anyone involved.
When the Blueprint was approved, our designer Alexandra started using her design skills.
The client then added all content in the CMS while we took care of all user flows, technical decisions and visual design. You can see the result at www.ibo.org.
LEARNINGS AND FINDINGS
Working with a client in The Hague and colleagues in London, we learned that it had to be a very coordinated communication between us. Daily stand-ups and weekly sprint demos was great, but also the fact that we was totally transparent with the client and the status of our work was something that really helped us. They could log in, add a comment and we were able to make the changes requested quite fast.
I have been working with several projects where the client adds content to the CMS. Something I have learned from this is the importance of having a great communication with the editor. I have seen so many design solutions being destroyed by that simple thing that the editor adds more text than the design can handle. I think this is a common problem for us who actually develop the design framework, and we need to be more responsive about their needs.
If you are interested in more information about the project, please contact me.