← Back

Unibz

I designed and co-developed the website of the university from where I graduated in 2015. The whole project was content-first, pattern-driven, and designed in the open.

First contact

While I was close to finish my thesis Prof. Kris Krois asked me if I would be interested in designing and developing the new university website. Of course I was honoured and I applied for the call.

In the open

When you design or develop products for public institutions it’s crucial to involve the whole community right from the beginning. And so I did for this project. Even before the project kickedoff I set a project timeline on GitHub which shows to the state of the project. During this step I also realised that the university had no GitHub account. So I created one for open-sourcing possible future projects.

Starting Point

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.

Content First

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.

Visual Language

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.

Pattern Library

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.

CMS

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.

APIs

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.

Launch

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.

User feedbacks

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.

← Back