Scuola IaD
The project carried out for Scuola IaD included a redesign of the current website, based on a need for site renewal accrued by the School's board. We defined a new Information Architecture that would facilitate user navigation and we opted for a more minimal, linear and coherent design.
Background
Scuola IaD is a School for Digital Education and is defined as a scientific, teaching and service structure of the University of Rome "Tor Vergata," which ensures the methodological and technological skills necessary for learning in digital contexts. With this in mind, it is essential that the Scuola IaD website, its main business card, be intuitive in use and complete in terms of information; starting from this objective, we therefore carried out a re-design of the current site.
The macro phases of design included:
1. Discovery: understanding and analysis of the current website, to map information and highlight critical issues, through expert review and user testing.
2. Informatione architecture definition: definition of a new Information Architecture through card sorting and tree testing activities.
3. Prototype (desktop): creation of a navigable prototype of the site.
4. Validation: evaluation and implementation of the prototype through two user testing sessions.
5. Prototype (mobile): design of screens for mobile devices of the site.
Discovery
To analyze the website as is, we conducted an expert review, meaning we analyzed the site ourselves to:
-
Understand its current Information Architecture, navigation, content type, and visual language adopted by IaD School.
-
Understand user usage scenarios of the site.
-
Highlight any critical issues, based first on criteria such as Nielsen's 10 heuristics
To continue the discovery activity, we conducted 4 user tests with 4 potential users (students) on the current Scuola IaD website. The goal of the user tests was to do further analysis of the website, trying to understand how users were moving between the different pages and identifying what were the major obstacles in navigating and searching for information. After a time of free exploration of the site, we asked users to perform some tasks:
-
Searching and analyzing information about a master's degree.
-
Enrolling in a master's program.
-
Requesting assistance and support.
-
Searching for information about a workshop (Enterprise Crisis Management).
Information architecture definition
After analyzing the Information Architecture of the current site and conducting 4 user tests, it became clear that we needed to restructure the information on the site into a new architecture. We therefore conducted two activities, each involving the participation of 10 users for a total of 20 participants. These activities informed the structuring of a new architecture for the site.
Card sorting activity: we carried out the card sorting activity, with 10 users between the ages of 18 and 55, using an online software (optimal workshop) that made it easy for users from all over Italy to participate.
The participants were presented with 18 cards, each representing a
different theme from the Scuola IaD website, and they were asked to group them into categories.
Tree testing activity: we conducted the tree testing activity, with 10 users aged 20-57 years, different from the participants in the previous activity, using the same online software (optimal workshop) used for card sorting.
Users were presented with the structure of the site (in text version) and asked to perform 4 tasks:
-
Register for the exam to obtain a computer certification
-
Contact IaD School via email
-
Access the list of virtual classrooms
-
Locate the physical location of School IaD
After both activities had been carried out, the new information architecture shown in the following image, which was used to create the prototype (version 1), was structured.
Prototype (desktop)
Having defined the new Information Architecture, we designed a new navigable prototype based on it. For the visual, we opted for a simple and straightforward graphic style, reusing the color palette present on the current site in order to make it consistent.
Below is an explanation of the three main types of pages we used on the site, then declined into the various case studies: navigation page, search pages, and detail pages.
1. Navigation page (homepage)
The navigation page corresponds to the homepage. It is characterized by the header and a top menù that link to other pages. It then shows three sections, which link to the dedicated pages: educational offerings, events (containing 3 featured events), and news (containing 3 featured news items). Finally there is the footer which includes support, contacts and locations, and links to social networks.
2. Search pages
Research pages generally have a title, an introduction and a list of cards that can be more or less structured.
3. Descriptive pages
Such pages generally have a title, an introduction, an image (with some exceptions) and text organized into paragraphs and navigable by a side menu.
Validation
After finishing the prototype, we wanted to test users' interactions with it and verify the actual effectiveness of the Information Architecture we hypothesized. To do this, we conducted 10 usability tests with students who were 22 to 31 years old. We had two phases of testing:
The first phase was devoted to researching any issues that did not arise and gathering feedback on navigation, the structure of the site and the pages themselves.
At the end of the first phase we made changes and improvements to the prototype, for some details we instead made a conscious decision not to make changes. The purpose was to verify that the changes were actually welcomed by the users.
Prototype (mobile)
After validating the whole website we then decided to develop also a mobile wireframe (high fidelity) for each page, so that would be easier for developers to understand the functioning of each screen.
Project overview
Professional Project: Fifth Beat
Duration: 3 months
Design Team: Nina Zanarelli, Arianna Bosio, Glenda Marie Galzote