The current website was developed in 2009 and since then it has never been updated. The problems that the website presented were quite diverse. It was hard to navigate on mobile devices because it wasn’t responsive. It wasn’t easily accessibile to screen readers because the navigation was positioned on the right side of the screen. It had almost 10000 pages and duplicated contents making it hard to consume.
Moreover looking at the analytics we discovered that most of the traffic was coming from social networks and mobile devices. So this was one more reason to go responsive.
I set the whole project content-first. I immediately involved editors, marketing and administrative staff into the doing and together we started defining the information architecture of the first pages. After a series of interviews aimed at identifying the target we created some personas and we mapped some core tasks and flows that we wanted to offer with the new website. Based on the results we designed a set of mobile-first views with post-its.
While developing these wireframes we also drafted the sitemap. We wanted to make sure to avoid duplicated contents on the new website. We tried to understand what people looked for. What is really necessary to show on a certain pages like a faculty page for example. And what we must show by law. We choose Draw.io for crafting the sitemap. Thanks to this tool also the editors could directly contribute.
Later I created for the corresponding post-it pages a collection of mobile-first Google Drawings layouts. Basically I replicated the information architecture inside this easy-to-use app from the Google Drive suite. I invited editors to fill these wireframes with real texts and real pictures. This helped them first understand what it means to write and consume information on a small screen, and second find out possible missing texts or pictures for the new website.
Once the Google drawing wireframes were completed I created a set of mobile-first HTML and CSS wireframes. We used this wireframes for the presentation with the stakeholders. We invited them to open the wireframes and follow the pitch on their mobile devices. We also underlined how our approach was focused on the quality of the contents. They completely got it.
While working with the editors I understood the type of contents I had to deal with. I started the first design exploration with an interesting approach developed by Dan Mall called Element Collages. The idea is quite simple. You don’t draw full comp but you design elements and components that spontaneously come out of your mind. You focus on the mood and the visual language. And so I did. We presented this visual exploration during the first meeting with the stockholders as well.
Some styles were already defined in the university brand manual. The year prior to the website redesign the university changed its logo and introduced new design guidelines. The developed work was mostly print oriented. Therefore I was challenged also in the definition of the digital identity of the university.
After the presentation I created a repository with the Patternlab.io project from Brad Frost & Co. Considered the potential size and scope of this project I thought that this was the right decision to make. The university website will be in constant and continuous evolution therefore I saw a set of interchangeable components to be more appropriate instead of a set of fixed templates. Thanks to this framework I was able to create several templates starting from the same organisms. Moreover I could inject real data via JSON so that editors could understand how their contents worked on the website. I pushed every new version of the Pattern Library to a new subfolder via GitHub Pages so that every change was easily accountable afterwards. This was particularly interesting right after the end of the project. I could look at how a certain organism changed their shape based on the evolving requirements.
Few versions later Arillo (the company I was working for as Product Designer) joined the project and together we tried to understand how we could maintain and scale the Pattern Library in the future. We also tried to considered how this system could live together with the CMS. After a round of thoughts we opted for porting the whole library inside the CMS. With this approach editors would not create new pages from existing templates but they would simply select the preferred organisms for each page.
During the porting of the Pattern Library we started working closely with the ICT department of the university. They developed REST API of their most used services, like the timetable or the university news, in order to allow us to get the data and inject it in the new website.
After most of components were designed, after most contents and texts were in place and after most of the API were developed we decided for a soft launch of the website. We set a subdomain next.unibz.it that would live together with the old website. We placed a banner on top of the old website that invited people to check out our work.
The new website offered new and different things from the old one. And this is why we opted for a soft launch. We also set a feedback button. This enabled us to directly communicate with the university community. Thanks to this form they were free to report problems, missing information or share new ideas.