Redesign of University Site and IA

THE BRIEF

Colleges within larger Universities face large information architecture (IA) challenges, need to address the needs of a varied audience, and need to feel connected in some way to the larger University website. The client is a School within a University and is looking to design a new version of their site.

THE PROMPT

I have to redesign the IA and content strategy around an experience for users of a college websites. My design should meet the goals of the users, the goals of the college, and its existing brand. My design should also be tested by users and follow IA heuristic best practices.

I was assigned the SMU School of Accountancy website to redesign and was provided with 3 Personas: Mark, Jessica and John.

Tools used: Omnigraffle, Sketch, Invision, Google Sheets, Keynote


Upon receiving the topic for the project brief, I began by analysing the SMU School of Accountancy website: defining it’s business and brand goals.

From the research, I decided to focus on one of the three personas, Mark, on how he would interact with the school website and the information that he may be seeking for.

Persona

To confirm my assumption of the website, I decided to perform some contextual research at the university campus.


CONTEXTUAL INQUIRY

I went down to the SMU School of Accountancy campus to conduct a contextual inquiry. However, it was a school holiday and there aren’t any students at the campus. Luckily, I managed to interview three Prospective/ Continue Education students/users, ranged from 17–43 years old, during the break.

Some of the questions I asked: background information, computer/mobile usage, academic information, website information and a walkthrough of the current website.

One example: ‘What do they usually do when at the university website ?’. The interviewees said that they will first look for the course they are interested in, the admission criteria, fees, the application deadline and the course schedule. They normally used either their desktop or mobile to search for information.

The methods of research the interviewees did are largely similar. I gave them the tasks of searching for the admission requirements and the curriculum of the BAcc (Bachelor of Accountancy) course. At the homepage, they would hover over the global navigation and look through the drop down on each navigation. After searching fora while, they could not find the tasks and automatically, they will find it through Google or the internal search.

During the search, the interviewees expresses that they are frustrated and confused:

“I cannot find.”
“Are you sure it’s on the site ?”

Time spent finding the tasks = an average of 3 min 29 seconds

In conclusion to the interview findings, the key takeaway that I found is that the important information should be easily accessible and finable to the users.


NAVIGATION SITEMAP

Next, I mapped out the current SMU School of Accountancy website to give me a better view of how it looks.

Current SMU SoA sitemap

I found that most of the important information required for a prospective student are not visible at first sight and have to be redirected to the main SMU website. It gives my a better understanding of information architecture of the website and that the contents should be re-organized during the redesign.


COMPETITIVE ANALYSIS

In order to get more information about the university campus, I focused on exploring the layout and task flow for the four universities.

I chose to compare the SMU School of Accountancy with three other universities and another school from the same university : NUS Faculty of Law, NTU Nanyang School of Business, NYU Stern School of Business and SMU School of Economics.

Layout Analysis

For the layout analysis, the global navigation are mostly on the top, only the secondary navigation varies for each universities.

USER FLOW COMPARISON

I mapped out the user flows with 5 different tasks (Admissions Requirements, Curriculum, Scholarships & Financial Aid, Campus Housing and Double Degree) needed to be done from the need’s and pain points of the persona.

Admissions Requirements
Program Structure/Curriculum
Scholarship & Financial Aid
Campus Housing Information
Double Degree Programme

Similar pathway was mapped out for the other comparative universities.

  1. Different Local University with a different school/faculty
  2. Different Local University with the same school/faculty
  3. Overseas University with the same school/faculty
  4. Google Side Ways Entry
  5. Same Local University with a different school/faculty

From the 5 different tasks, I decided to focus on the Course Curriculum pathway.

User Flow for Course Curriculum

From the analysis, I found that SMU SoA has the most number of pages and clicks. This gives me lots of rooms for improvement, ease the use and simplify the navigation against the other universities.


CONTENT INVENTORY

From the Content Strategy class, I created a spreadsheet cataloging the website for the content inventory. I analyzed the home page, programmes page(most of the other pages are of similar content)and identify the source, type and attributes for each piece of content.

Content Inventory for Home Page

HEURISTIC EVALUATION

I conducted Abby Covert’s heuristic evaluation to find the usability issues on the website.

Heuristic Evaluation

Define Problem

Bachelor of Accountancy (BAcc)’s curriculum is placed under a different navigation with a confusing name

Design Problem

Desktop - Important information not available, redirected to Main Site and use of mnemonic words/jargons
Mobile- Not working, can’t find the information, thought the navigation was a loop

Design Opportunity

To redesign the navigation for users to access important information easily and be intuitive

CARD SORT

I began to perform the process of closed and open card sorts to help the users find what they need, and understand what they have found. It involves the placing of all the navigation topics onto cards and asking the interviewees to group them into different categories.

Interviewees performing the Card Sort

I interviewed a total of 21 interviewees, ranging between 17 to 45 years old. Below are some of the findings from the closed and open card sort responds that I received.

Findings from Open Card Sort includes:

  • Repetitive and redundant information

- Faculty, Students

  • Struggle to classify

- Hard Knowledge Skills- Curriculum, Heart Skills, Soft People Skills

  • Do not understand/Jargons

- Interactive Pedagogy, Unique Learning Experience

  • Irrelevant content

Findings from Closed Card Sort includes:

  • Redundant Information

- Accommodation (added to see how it’s placed, removed)

  • Struggle to classify

- Advisory Board, Faculty, Staff, Students, Alumni

  • Do not understand/Jargons

- Teaching Innovation

After several rounds of closed and open card sorting, some of the key takeaways includes a simpler navigation, removal of repetitive content, Jargons and emphasised on the content needed that is of importance to the users.


NEW SITEMAP NAVIGATION

Through the findings and information obtained in my research, I was able to reconstruct the new sitemap navigation.

New Sitemap Navigation

The reconstructed Global Navigation includes: About, Programmes, Admissions, People, Research, News & Events


“I know that the users want to accomplish the task and wants to accomplish it quickly.” All the tasks are centered around allowing the user to quickly and efficiently find the information they need.

DESIGN REFERENCES

There were problems for the global navigation and the mobile version for the university site. I looked at other websites to see how they designed the interactions. Below are a list of websites that I referenced:

SUTD http://ugadmissions.sutd.edu.sg

Lasalle http://www.lasalle.edu.sg

SOTA http://www.sota.edu.sg

University of Nevada,Reno http://www.unr.edu

Brooklyn College, Feirstein Graduate School of Cinema http://www.brooklyn.cuny.edu/web/academics/schools/mediaarts/schools/feirstein.php


USABILITY TESTING

I created a few sets and various fidelities (low to medium) in my prototype. I tested my prototype with 11 users. All the users are able to complete the tasks at hand.

Users testing out the prototypes

Task 1

You are on your mobile phone and would like to know more information on the Course Curriculum for Bachelor of Accountancy (BAcc).

Task 2

Also, you would like to know more about the Double Degree Programmes the school offers.

PAPER PROTOTYPE : TEST 1

Expectations

User would use the menu to search for the assigned tasks

Key Findings

  1. User was able to find the tasks easily
  2. A slightly higher fidelity to help user understand better, design rather than utility

Conclusion

I decided to implement my design solutions in the next higher-fidelity prototype.

WIREFRAME (DESKTOP) : TEST 2

Wireframe (Desktop)

Link to the Wireframe created using Sketch and InVision:

Key Findings

  1. Able to complete task at hand
  2. No major problems

WIREFRAME (MOBILE) : TEST 3

Wireframe (Mobile)

The wireframe was created using Sketch and InVision.

Key Findings

  1. Words too small
  2. Wider space between top menu and image on Homepage

HIGHER FIDELITY PROTOTYPE : TEST 4

Higher Fidelity Prototype

For the next prototype , some of the key findings were:

  1. Main menu icon too small
  2. Whole chunk of text, people might not read

FINAL PROTOTYPE : TEST 5

Link to the Website prototype:

Link to the Mobile prototype iteration :

Overall, I found that the average time for the final prototype went from 3 min 29 sec to an average of 43 sec. The feedback I received were positive .

“It’s intuitive”
“It has a clean interface”

USER FLOW REDESIGN

The revised website’s user flow allows the users to complete the process in a quicker and much efficient way. Below is the proposed redesigned flow :

User Flow Redesign

CONCLUSION

In conclusion, here are some objectives from the brief:

· Redesign the navigation of the website for both web and mobile

Showing users relevant content will allow them to access important information easily and be intuitive

· Evaluate and strategise the website’s content and information architecture


NEXT STEPS

  • Increase Functionality on website (desktop & mobile)
  • More Usability Testing
  • Interaction Design done in Hype (ex. Collapsable Menu)

All in all, the project turn out well. I enjoyed learning about information architecture even though it was difficult to understand from the start. I found Abby Covert’s heuristic evaluation really interesting (would read more about it in the future) and Hype ( tool which I am greatly interested in, but due to time constraints, wasn’t able to really use it for this project).

The most challenging part of this project for me was during the first card sort. At first, I didn’t really fully understand how I was supposed to come up with the card sort for the users to organize. I created a ton of cards and the users had a hard time sorting it. There were many redundant cards that are not needed. Luckily, after the first rounds of the card sort, I managed to get the idea of it.

If I had more time, I would like to come up with more design concepts that would work well on both the web and mobile. One point that I note is that when designing mobile, there are some inherent constraints:small screen, single window visible only and more navigation. So the userflow for the web and mobile might be slightly different.

For upcoming projects, I will be sure to continue to focus on obtaining more research and synthesizing the information . I also will be sure to spent some time doing a heuristic analysis during and after the prototyping process .

Thank you ^-^
One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.