REDESIGN-REBUILD-RECLAIM

Project 2, for General Assembly

Image for post
Image for post

Understand the Information Architecture and Redesign the website for S. Rajaratnam Institute of International Studies.

As we were drowning in thought and studying the colleges existing website, we were thrown in a little lifeline. The project brief had layed out to us 3 User’s persona and their needs that they would have to full-fill through the website and also what their pain point would be.

The first persona was Mark, a 17 year old high school student who is looking for prospective colleges to study further. Next we have Jessica, a 21 year old majoring at the institute and she is returning from a break. Last we have 38 year old John, interested in Higher Education- one whom I could relate the most with as I have been faced with his needs and dilemma’s just a while ago.

So by reason of relatablility I chose to focus on John’s needs and pains in advancing his professional life while balancing his personal well being.

Image for post
Image for post

Thus we follow John’s journey….

THE CURRENT SCENARIO:

He starts by visiting the website:

Image for post
Image for post

He has often used the site to read publications produced by the Institute and that has been his primary usage of the website, but again now he has a new purpose. He first starts by understanding the programmes available and their time schedules as he has been allotted specifically 1 year. By studying the Academic Calendar, he figured that there is a course available in within his timeline.

Image for post
Image for post

Thus his first pain point,

Lack of Clear Descriptions

and there was nowhere it was mentioned if could just pick up from where he finished. Could he just continue his studies as he is an Alumni or should he re-@apply?

Next he wonders who his fellow classmates would be,

“Hope I’m not the oldest in the class? Even if I am i’d like to be prepared”.

But as he browses through the website he’s worried that there lacks any information about a few things that are important to him to balance his work and family. First of all,

“Are there any additional costs included, excluding tuition which is mentioned here?”

he definitely needs to run it through with his boss as the organization is funding him.

What about the Class Schedules, I cant find any information.

And the most important…

“What about childcare? I know the Institute doesn't provide it, but now i have to find time to search for option.”

As he reaches this he realizes his break times up and he has to get back to work.

BEHIND THE SCENES:

STEP 1: Heuristic Evaluation of the existing website.

Image for post
Image for post
The perceivable flaws of the current website

This one was the easiest step as the website was quiet obviously designed with too much emphases on University goals thus flooding the main page with publication and media content. This is not an ideal situation for users who want more detailed information on what the Institute has to offer.

Step 2: Break down and study of existing Information Architecture

Image for post
Image for post
Every page on the website was documented

We worked in groups to break this down as it made sense to collaborate on such a monumental task. So I teamed up with the students who were allotted this University to save time and work more efficiently. We burried ourselves in the website to study and analyze how information was sorted and presented in this existing scenario.

We hence created a site map to visually present this complex website.

Image for post
Image for post
Image for post
Image for post
The existing site map

Step 3:Card Sorting to help categorize the Content by calculating its proximity and hence grouping

Even though we were given personas for this step we had to interact with real users to see if our understanding of the information was relatable to the real world. We got users to actually sort the card in groups that they could make sense of and we did it through various mediums, using paper cards as well as using online tools so that we could reach to a lot more users.

Image for post
Image for post
Card sorting process

This was the point when we saw some light at the end of the tunnel.

We were able to get a little bit of clarity of what real users want and feel when using the website. We had the privilege to talk to a future student who was looking to to apply for a PhD programme and she gave us insight on what the University goals were as well as what student expectations are.(Thanks to Freda for arranging the interview and sharing the information as it was her cousin who helped us through)

Step 4: Analyzing the findings

Image for post
Image for post

Screening questionnaire was first sent out to find suitable users and analyze their priorities and mode of research:

Finding — People preferred searching on the mobile which we would be suggesting to the University.

Image for post
Image for post
Dendrogram to analyze the best Merge Methods to create headers, at the 44% mark I found mine.

Step 5: Competition Analysis

Image for post
Image for post
Competition analyses

The study of other University website did help me get some interesting insights of how to effectively send information across without wasting too much of the users time.

This would definitely contribute to better conversion rates and thus more probability of a student analyzing the standards of the college and hence enrolling.

THE SOLUTION

Image for post
Image for post
Visual Breakup of IA

The current website is basically split into main header for navigation — Middle body of content(not very sorted) — Footer too big in size and vague.

The Proposed website will have the main header — Include shortcuts for quick navigation — Visual break with carousel to make the webpage more approachable. News bar & Events bar to reach latest publications and current affairs. Quick Link bar in a shuffle display format to provide links to almost every page with one click option. Last the footer.

Step 2: The Wireframe

Image for post
Image for post
First cut

Step 3: User Testing again.

Image for post
Image for post
Second Cut
Image for post
Image for post

At this stage there were a lot of iterations done to my website, some comments were as follows: Too much white space — scrolling too long — some terms were still vague — I go straight to the bottom to check first. — repeating information can still become more concise.

THE FINAL PROTOTYPE — Solutions provided

  1. Shortcut buttons ie direct link to essential pages like Calendar, News, Endowment and Directory
  2. News and publications have filter option to reach desired results faster.
  3. Shuffle buttons to provide all access navigation on main page.
  4. Infographics and video section at main page to transfer as much information to the user and to build brand connect.

You can watch John navigating through the new RSIS website with ease below:

https://vimeo.com/210058613

THE WAY FORWARD…

Research plays such an important role, if we did get access to the college and personally if we could interact with the RSIS students, I could have had a 360degree view on the website and maybe better ideas would have popped up.

MY LEARNING

Interacting with real users and their insights and findings did help me in bettering myself and my product. I realized the importance of research and the impact it can cause. I have come to absolutely love this journey of challenging myself to become my best and everyday is a new lesson leant and a new experience faced.

Image for post
Image for post

PS:

Image for post
Image for post

Interview with college Admissions Member

— — — Mervin Kok

Written by

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store