User comment: "Information is hard to find because you have to scroll through a wall of black!"
CAMBRIDGE
INSTITUT
RESEARCH & EVALUATION OF A SCHOOL WEBSITE FOR OPTIMISATION AND FUTURE DESIGN PROPOSALS
Background
Cambridge Institut is a language school and English language test centre based in Munich, Germany. The school team decided that they needed an overhaul of its website as feedback had been quite negative despite the school's standing and stellar reputation among its many students.
The school website is live and the work on the site is still ongoing. Below you will see details of how some of the problems with the page were identified and approached, and how changes have already started to be implicated.
This project discusses just a small sample area of the overall ongoing project.
You can see the updated version of the site here: www.cambridgeinstitut.de
Problem
Many of the students and visitors to the website complained that the site was complicated and difficult to use. Upon opening the page it was clear to see that the structure of the site was very dense and not very accessible.
For example, the text on the page was very difficult to separate and read, and a simple task like finding a course is quite complicated to navigate. In summary, the site needs to be simplified and made more user-centric.
Solution
Despite the obvious problems with the site, there were several stages to this project. The first was to get to the root of the problem by conducting an audit of the site, followed by interviews based on users' own experiences to glean some insights into how to proceed with a future iteration. After the initial research stages, I came up with some proposals for the client.
Tools
Miro
Figma
Whiteboard
Pen and paper
Sticky notes
Team
1 UX/UI researcher & designer
1 Marketing manager
1 developer
My Role
UX/UI researcher & designer
Timeline
Overall: 4 weeks
Research & feedback: 2 weeks
Design & testing: 2 weeks
Research & Design Process
Research Stage 1 (Content Audit)
For the first stage of the project, I decided to audit the website and see for myself the possible pain points that users are experiencing. Because of the sheer size of the website and its content, I have only included three levels here. you can see the results below.
Research Stage 2 (User Interviews)
I had already seen for myself the strong and weak points of the website, but I wanted to get a feel for how real users were finding the experience. I conducted interviews with eight participants from a broad age range. Each with their own reasons for wanting to use the site. I asked them questions while they used the website. The questions were based on:
Site navigation and accessibility.
Features users would like to see on the site.
Features they would not like to see on the site or that are not of interest to them.
If they would find a personal dashboard helpful for the website.
When I had gathered all of the feedback, I tried to make sense of it by organising the data into affinity maps. You can see the results and insights below.
User Journey (Choosing a Course)
Based on the above feedback, One of the first steps was to figure out a smooth path to finding a joining a suitable course. I wanted to create a shorter path to reaching the aim as, at the time of the project, it was very cumbersome. As a result, I put together a sample user flow that could help with designing the real thing. You can see it below.
Old Navigation & New Wireframe Ideas
Between the audit and the user interviews, there was a wealth of information to work with. And, because the site was live while the research being was conducted, there was no time to lose in initiating changes and reiterating the site.
You can see from the screen grab on the right that changes were needed urgently. With this current model, it needed quite a few clicks and lots of hunting in the text to get anywhere. It was not very intuitive. With this in mind, I set about putting some wireframes together just for the landing page for mobile and desktop.
You can see them below.
Initial Changes
The wireframes were handed over to the marketing manager and we discussed possibilities with the design. Note that there was no time here to design high-fidelity wireframes as we needed to get the new website out there ASAP.
This was enough to get the next iteration of the site published with the new layout and navigation set up on the site and everything explained to the developer.
More iterations will follow in this design as we pick out the micro-features that need to be reiterated.
You can see the before and after versions of the landing pages below.
Before
Before changes were made, this was the landing page of the site. The only options to click here were language and contact details. The menu was somewhat hidden.
After
This is the new iteration where the user can clearly see options on the top navigation bar and find what they are looking for easier.
Future Steps (Micro Iterations)
01
Now that the navigation has been somewhat tidied up, the next steps will include micro iterations that will include a user dashboard and a more efficient booking system.
02
There is still a lot of work to do with the navigation of the site and with some of the design choices, but final design decisions rest upon the management of the school so some ideas may be rejected.
03
Once the core structure of the site is in place, there will be room to include other features that the users mentioned that they would like to see on the site, such as vocabulary or grammar activities.
Learnings
The biggest takeaway from this project was the fact that the client has the final say in a design as they have control of the budget. New design ideas come to us and that's great, but we can't always implement them depending on certain factors like time and budget.