The University of Applied Sciences Potsdam has a problem: its website. Like, seriously, go take a look: fh-potsdam.de. Dozens of target groups, far too many editors and hundreds of subpages (501, to be exact) made redesigning the experience a major challenge.
Under the title “Everything’s a mess! ” (orig. 'Alles großes Durcheinander!') our course had a big goal for just 5 months: redesigning the entire experience of our university’s website. What seemed like a simple task in the beginning quickly became an incredibly complex project due to the numerous pain points we figured out during our research.
The most problematic aspect was the large number of target groups and their needs — they differ enormously from each other in this case. For example, a registered student needs a completely different experience than a potential prospective student.
So our focus was on target group distribution. Turns out: it’s not that simple. Our university has over 3,5k students in five faculties, more than 300 employees and about 20 other relevant groups. For a clearer definition of the target groups we used a brainstorming method and worked out which target groups were relevant and how they could be clustered.
What’s exciting is that the groups only partially overlap in their expectations of the website — and, conversely, the content per target group must be defined very precisely. The 1st step was to divide the many groups into only 2 super-groups: internal and external individuals.
This means that already enrolled students/professors/employees belong to another group than potential students/press/etc. All further research, design and development was based on this distribution of target groups.
The first problem to tackle was the main navigation menu, which is available throughout the entire website. It’s a mess — hundreds of sub-menus, weird UI behaviour and overall just frustrating. Just take a look and try not to cry.
Our approach was creating an entirely new information architecture. For this purpose we organized a Card Sorting Workshop in which we had 4 groups work out different approaches to a new information structure.
Following the workshop we picked one of the approaches and modified it to our needs. It would later become the navigation for both our extensive search and navigation system.
Next up: competitor analysis. We analysed national and international university websites and focused on two questions: How do the other universities deal with their content? and What is shown on the site and what is their focus?
For this purpose, a legend was created in which the size and colour of the areas provide information on how present the individual contents are presented on the university page. For example, dark blue is a quick access module and yellow is a news module. Subsequently, a handful of selected universities were analysed and presented in tabular form.
This overview allows you to compare the websites: for example, that the University of Weimar offers much more content (27.3%) on its homepage, compared to ours — 0%. Or that the UAS Johanneum already presents the individual departments with 23.3% on its homepage. This area is also not present on fh-potsdam.de. Also very present were the CTAs for student applications, which are also not to be found on the FHP page.
Overall, it can be stated that there are obviously standardized patterns for such complex university pages. These include sliders, action banners, study organisers and the like. The priority given to the homepage in particular varies greatly from university to university.
We could therefore not identify the planned, fixed set of rules that we wanted to create with this method — which encouraged us to create our own set of rules concept for our university website.
We carried out a further analysis during the qualifying examination in the design department. At that time, there were around 500 candidates on campus who had only recently worked extensively with the university website. This gave us access to a quantitative user group that is very relevant (in a financial way) for the university.
In an interview with a large number of candidates from all three areas of design (communication design, product design and interface design) we asked a number of questions that were intended to point out problems and difficulties with the website.
Some of the gathered intel and quotes were quite frightening:
“It's stupid to make [my choice of university] dependent on the website ... but if friends hadn’t recommended the FH;P to me, I wouldn't have applied for it.” — Communication design examinee
“I then wrote an e-mail out of desperation because I couldn't find the information.” — Interface design examinee
Apart from the interviews during the qualifying examination, at the beginning of the course we talked to students on and around campus to get out of the "designer bubble" and find out how other facultys work with the website. As there is no quantitative comparison here, I would like to quote just one single quote that summarises the results well in my eyes.
“So when I want to open the semester schedules, I was actually always looking for the picture someone sent in a WhatsApp group. But that was outdated at some point and I asked for a link to it, never found it otherwise. [...] And now I always go to WhatsApp, then Marked Messages and then I click on the link from there.” — Student B.A. Childhood education and upbringing, 4th semester
The final result, which we presented to the university management and communications staff, was an interactive prototype to visualize our concept. Parts of the project and the learnings will be used as a basis for the redesign of the website, which will start this year. A few impressions:
The home page. It was important that all target group needs were matched. For internal users, there is the prominent search, with which the target site can be found quickly and without any detours. The video is for the external users and should offer impressions of the university and the city of Potsdam. See the video here ›
The search bar. Using the search bar reveals this menu: it offers the possibility to search for specific subpages or to use one of the quick access menus, which are divided into different target groups and their most used recent searches.
One of the five database views, People. To make content more readable, all database content has the same view points. In this case, People, it shows all employees of the University. It can be filtered with the right sidebar.
Filters. The filter options vary from database to database. For People it is possible to filter by faculty, for degree programmes it is possible to filter by number of semesters — and so on.
Content page. Breaking out of the database view brings more individuality and enables, for example, the individual facultys to present their study programmes in their own way.
Obviously, all pages are responsive. To include over 50% of the current web traffic, all pages were designed for mobile devices as well. They are responsive versions of their web versions, just the menu was completely remade to fit the unique way mobile users navigate the web.