UX Case Study — Magister website

Overview
Magister is an international student organisation in Cape Town that organises internships, volunteer work, and offers assistance in Cape Town during the students’ stay.
Magister’s website provides information about its programs, accommodation, and activities in and around Cape Town. When I was translating their website to Dutch I noticed that there were quite a few usability issues. I decided to carry out a UX study on their website and suggest improvements.
Approach
I created an IA (Information Architecture) design document to understand the goals, audience, competitors, and structure of the website. Below is a summary of my findings:
Goals
· To place and organise internationals in their desired program.
· To provide guidance for internationals that are coming to Cape Town and surroundings.
Intended Audience
· International people that come to Cape Town, South Africa.
· Students, Interns, Volunteers
· Other; Researchers, Event/ Touring Organisations, Sponsors
Competitors
After some research, I found 3 organisations competing with Magister. Below is a competitive analysis table where I have compared the 4 organisations’ websites.

By comparing these websites, I found some interesting insights and new ideas for the Magister website. Magister’s website does not offer safety information, pre-departure tips, or live chat support. I think these would be great additions to their website.
Site Content & Structure
I restructured the website’s content; below you can find the architectural blueprint for the new structure.

With this information, I could further explore the website and its usability.
Design
Before I move on to the usability of the website I will take you through some of the design changes that I have made. I felt that the website’s colour scheme was quite dull, so I decided on some more colours for a wider variety of design options.

I also redesigned the logo to make it look more modern and straight forward. I removed the circle/ line, since it does not have any meaning, and I chose a different, clearer font.

Usability Issues & Solutions
HEADER, NAVIGATION BAR & FOOTER
Below you see the current header and navigation bar. It feels like there are too many options in this section already. Too many icons and navigations; I will break these down in this section.

Social media buttons

When trying out these buttons I found that 3 buttons out of 5 are irrelevant.
- The Twitter button links to the home page of Twitter; Magister does not own a Twitter account.
- The Google+ button links to an error page
- The Skype button links to the Skype app (if you have the app), but it just opens the app, it doesn’t open a conversation with Magister.
So that leaves Facebook and Linkedin, which actually link to the Magister pages. The rest of the buttons should be removed since they are of no use.
Another suggestion I had was to put the social media buttons in the footer, instead of the header. Users know where to find them in the footer since many other websites put their social media buttons there.
Language options

It is great that this website can be translated into different languages since it is meant for international students. However, I would suggest putting just 1 language, or “flag”, in the header, with a drop-down button next to it, so you can see that there are other language options, without having to look at them directly.

Search bar
In addition to the current header, I’ve also added a search bar. The website currently does not have one, but it can be a big help for some users who are specifically looking for one thing and don’t have time to search through the whole website.

Navigation bar

The navigation bar shows 8 global navigation buttons which is too much. “If at all possible, try to limit the number of global navigation elements to between five and seven” — John Shile. In my IA design document, I restructured the navigation system of the website. Instead of 8 navigation buttons in the navigation bar, I narrowed it down to 5. See the new navigation bar below.

I left out the HOME button completely because you can use Magister’s logo to get there (this is commonly used throughout the internet).

Then there is HOUSING, which wasn’t there before.

The accommodation that magister offers is currently placed in a small section on the home page even though accommodation is very important when students want to come to Cape Town. This is why I decided it should get its own page and its own navigation so that it is easy to find.
The next navigation button is PROGRAMS which includes the Internships, Volunteer, and Courses.

The ACTIVITES button includes the same content as the current TRAVEL button plus some extra local activities where you don’t have to book tours for.

The GETTING THERE button, which is currently not on Magister’s website:

This page includes Safety Information, Pre-Departure Tips, and Transportation information of Cape Town. I will explain this page further on in the UX study.
And lastly, there is the CONTACT page, which includes the FAQS.

If people have questions, they will often go to the CONTACT page to find an email address, phone number or to send a message. When they are on the CONTACT page and see the FAQS option, they might find the answer to their questions already before having to get in contact.
Eventually, this is the new design for the header and navigation bar

Another change I made to the navigation bar is the hover design:

And the ‘current page’ design:

It has a cleaner and more sophisticated cleaner look by removing the big orange block and by making the hover and ‘current page’ design different from each other.
Footer

Magister’s current footer is a dark shade of grey and has almost no information on it, except for their copyrights and a quote from a French writer Antoine de Saint-Exupery.
Below you will find the new design I made for the footer.

I brought back Magister’s logo into the footer, but I swapped the colours around so you can see that the logo also works in a different way. In the middle, I’ve put social media buttons. Like I said before, I took them out of the header and put them into the footer. This way, when users have more information after scrolling down the website, they might be more interested in checking out the social media page as well. I kept the copyright in the footer, just not as prominent as the logo and social media.
HOME PAGE
Below you can see the top of the current home page.

I believe these 3 columns are supposed to be some sort of quick access links to other pages. However, the most left column’s title is ‘Programs for Students and volunteers’, but describes theirs ABOUT section, and the orange buttons underneath, link to the FAQs and the COURSES. This does not seem to make any sense; a lot of random information has just been put into one place, but the user can’t do anything with it. The middle column makes a bit more sense in the way that the information is a description of the title, and the first orange button links to an internship page, however, this page does not mention any volunteer positions. The second orange button links to a very random page where you can apply for some sort of package deal with Magister (see below).

The most right column describes the title, but once again the buttons underneath have nothing to do with them. The first one also brings you to the page you see above and the second one links to the CONTACT page. None of them actually link to the TRAVEL page, which you would expect.
You can also click the images that are put above each column; this will reload the page you’re on.
My solution to this random, put-together section is the following:

I put a nice photograph of the mountains in Cape Town in the background because this is the first thing you will see when you enter the website and a nice impression of Cape Town goes a long way. On top of this image are 4 quick access points which will lead you straight to the page you are looking for. I put these buttons at the bottom of the image so that they don’t interfere with options the navigation bar. These quick access options are chosen based on data analysis to see which pages are most visited (I don’t have access to this data so these are based on what I think people would visit most).
As you hover over the buttons the type will go darker, so that it is clear that these buttons link to something.

Below the quick access, you will find the ABOUT section.

The word ‘About’ is in the same orange as ‘South Africa’ in the logo of Magister. This orange colour will repeatedly come back throughout the website in a subtle way so that that colour can really define Magister. The About section is a little paragraph containing information about the Magister organisation itself. Currently, there is not an official ABOUT section on their website. I have added a photo of a student on top of Lions Head next to it, again to give the user a nice impression of Cape Town.
Underneath the ABOUT section is the COMMUNE section, where the commune of Magister is described. This is currently on their website as well:

I changed the image that comes with the text to a photo of a Magister group together. This image describes the commune in a better way than a link to Facebook. My new design:

I made the background of this section in a darker colour so that there is a clear division with the ABOUT section and the COMMUNE section.
Lastly, below COMMUNE, there is the REVIEWS section. You can read feedback from students that have used Magister. This section can currently be found on the CONTACT page and is called ‘Testimonials’.

It is very common for website users to look at reviews before they sign up for anything, this is why I took the reviews from the CONTACT page, which is the last page on the website, to the HOME page, so that it is one of the first things you come across on the website. I also changed the name from ‘Testimonials’ to ‘Reviews’ because reviews are a more common word, and more used than testimonials. Since there are many users on this website with different mother languages it is better to stick to words that are commonly known and used. I also added a ‘star rating’ system so that you can quickly see the opinion of someone without having to read through the whole text. The new design:

I have added arrows on each side of the review so that you can click through the different reviews. On the current website, the reviews just appear and disappear within a few seconds so there is no time to properly read through the reviews.
Below you can see the current home page and the new design I made for comparison.


HOUSING
The current Magister website does not have a HOUSING page. On their HOME page, they have a small section about accommodation:

All you can currently do in this section is read about the accommodation in Cape Town, and click the ‘request housing’ button, which will send you to that package deal page I mentioned earlier. The images and their captions on the right are very random; Some describe an area, 2 of them are the same area (Observatory), one describes a kitchen etc. The images are stretched out and you can’t click on them to get more information or to see more images.
Finding the right accommodation is a big part of going on an internship abroad. This is why I made a separate page for accommodation that gives more information and shows better images.
At the top of the page is a little description of Magister’s accommodation.

Underneath you can find all the different areas where Magister has accommodation available and the number of open rooms. The images show the outside of one of the Magister houses in that area. The reason I chose for this approach is that when you organise an internship or volunteer work you are placed in a certain area. So whether it is a budget room, single room or apartment etc. you want to live as close as possible to your work or school. This is why you chose your area first before you choose your room.

When you hover over the images or text a block will appear around it, showing that you can click on it.

When you click on one of the areas, the available rooms are displayed in a darker tone box over the areas.

On the left the name of the area, the photo, and the available rooms are displayed, just as before you clicked. Underneath that is a short description of the area, so the user has some background information. On the right, you see the available rooms. At the top, you can see the name of the house, underneath you, find an image of the open room. The arrows on the side indicate that you can look through different pictures of that room. Below that you can see what sort of house it is, for example, this one is a two bathroom, five-bedroom house. Underneath it gives more detailed information about the room, whether it is a single or double room, furnished or unfurnished, and how much the monthly rent is. Then there is the ‘apply’ button if you would like to apply or this room. This button will send you to an application form on the website. On the right, you can see and exit button and a scroll bar. You can scroll down to see the rest of the rooms in Bo-Kaap.
You can see the full, redesigned HOUSING page below:

PROGRAMS
Magister offers different programs such as internships, volunteer work, and courses. Their PROGRAMS page currently looks like this:

Instead of showing information on the programs, you only see their ‘package deals’. All the orange ‘proceed’ buttons link to a form where users get to sign up for their desired course, internship, or volunteer position. Without having any information, the user is supposed to sign up. This does not seem right, so like I said before, under the PROGRAMS navigation I put all the information on internships, volunteer work, and courses.

At the top of the page is a short introduction to the programs. Underneath the user can choose between the 3 options; internships, volunteer, and courses. I made these options because users are often looking for 1 program to participate in. You will hardly find people who do an internship AND volunteer work at the same time. Once the user clicks one of these options, the button will go dark and program text turns orange and information will show underneath.

The user can choose the desired internship through the dropdown menu:

A photograph of Magister participants is shown at the internship to give an idea of what it would be like:

Below the image, the user can find the program information.

This is important information that can make or break the decision of the user. Maybe a program is too expensive, too long, not in the desired location, or the work is not what you are looking for. It is important that the user can see this information straight away without having to contact Magister about it.
Underneath the information, the user can find the ‘Apply’ button to apply for their program. This will link to the application form, where the user can choose a ‘package deal’ if they want to.

This same method is used for the option of ‘Internships’ :

And ‘Courses’:

Below you will find the before and after-design of the ‘PROGRAMS’ page.


GETTING THERE
The GETTING THERE page is a page that currently does not exist on the Magister website. However, through competitive analysis, I found that other international student websites do include this. This page gives information about safety and transport Cape Town and South Africa and provides pre-departure tips.
This page uses the same method as the PROGRAMS page by giving a short introduction at the top and then giving 3 options for the user.

The user gets to choose what they want information on.
When clicking the ‘Safety’ option, the information shows up underneath:

Safety information is very important for the audience of this website. They are young people, often students, who are from another country with different cultures, rules, and safety standards. South Africa has got that image of a dangerous country to travel to and this should not be ignored, but rather be pointed out and providing tips to stay safe. Not only the students themselves but also parents would like to send their kid safely to another country.
The other options work in the same way.
‘Transportation’:

Transportation is also very important to look at when you are moving to another country. For example, for many users coming from Europe, cars in South Africa will be driving on the other side of the road. Also information about drivers licenses, and purchasing a car is something users will be looking for. Other international student websites offered this information, but without images. I added images here so that users will actually know what these types of buses, taxis, and roads in Cape Town look like. It will be hard trying to find the MyCity bus if you don’t even know what it looks like.
The last option is ‘Pre-Departure tips’:

This option provides information on weather and what to bring when you come to South Africa for a program. The audience of this website could be from a country with a very different climate, so it would be good to know what the weather in Cape Town can be like and how to prepare for it. Also, medications and prescriptions that people use are not always easy to find in another country.
See the whole designed page below:

CONTACT
Magister’s current CONTACT page looks like this:

As mentioned before, I moved the testimonials to the home page so that it is one of the first thing users will see when using the website. The Google Maps is not working on the website now, so useless to have it on there. On the right, you can also see a fax number, which will never be used nowadays.
I reorganised the rest of the information with the same method I used for the GETTING THERE and PROGRAMS page and I added the FAQS to this page.

At the top of the page is a short introduction so that people feel free to contact Magister. When clicking ‘contact details’ the following shows up:

Phone numbers, their email address and skype address are shown on the left. I used icons here instead of writing out the words ‘email’ or ‘WhatsApp’ to give it a cleaner look. Users will recognise these icons so there won’t be any confusion.
On the right is a working Google Maps of where they are located. Underneath you can press the ‘directions’ icon and their address which will put you straight to Google Maps directions.
At the bottom, the user can find social media links if they would like to connect with Magister on there.
The next option is to ‘send a message’:

Here you can send a message straight from the website to Magister without having to use your email, which is quicker than having to copy their details and use your email. After you hit the ‘send’ button you will receive an automatic email from Magister saying they received the message and will be in touch with ASAP.
Lastly, the option of ‘FAQS’:

The frequently asked question is always a handy tool on a website to avoid users contacting you with every small question they have. Since users always have a specific question, I thought it was pointless to have all the FAQS laid out at once, as Magister does on their current website:

With the new design, the user can look for their question by searching by topic or by typing in a keyword of their question, for example: “Course length”. Once you have selected or typed in your topic the questions are shown underneath.
On the current website, you can click the question and the answer will appear underneath:

There is not much wrong with this approach, only that it can take up too much space.
I came up with the following solution:

When you hover over the question, the answer will appear over it:

This way the answer does not take up more space of the page and the user does not have to unclick it to make it disappear again.
See my new CONTACT page design below:

The Results
Below is a summary of my design changes:
· New logo and colour scheme
· Number global navigation reduced from 8 to 5
· Social media links reduced from 5 to 2
· Logical links to forms, quick access pages, and social media
I believe that the changes I made for the website will improve the overall user experience which will develop the users’ trust. The audience of this website is making a big life decision by moving far away, they want to be ensured that everything is trustworthy and runs smoothly. The new website design is a good start to ensure this feeling of trust.
