SMU Accountancy Redesign: Information architecture

For Project 3 of General Assembly’s UXDI course, I was tasked to relook at the information architecture of SMU’s School of Accountancy website.

TIME 
2 weeks

TOOLS 
Hype, Omnigraffle, Keynote, Google Sheets, Sketch

The persona I chose to focus on was Mark, someone who would be interested in locating curriculum as well as information from other schools in SMU.

From the get-go, before usability testing, I looked at how the current site manages its information and if it is built for mobile. In terms of heuristics, parts of navigation used formal language, and thus there would be a bit of difficult navigating it. As well, the modular sections on the front page might not translate well into mobile, and was rather messy due to mixing of News and course information. The mobile version had some problems with accessibility, as the menu was unusable and enhanced difficulty in locating information.


SITE MAP & TASK FLOWS

A look at the current site map proved that there were repetitive information that could be adjusted and combined into a shorter column. As well, important content like CURRICULUM and DOUBLE DEGREES, that our persona would like, could be drawn further upwards for easy access.

(left) Propose to manage repetitive Students & Alumini sections; (right) To combine Faculty
(left) Propose to merge Scholarships into Fees & Financial Aid; (right) Draw out Curriculum and Double Degrees & Second Majors

When attempting tasks like (1) Locating Curriculum (2) Locating Second Majors / Double Degrees information, current task flows for the SMU Accountancy site reveals that it would make our persona jump through a few hoops as well. In comparison to U Penn, and even sites from other Schools in SMU (Economics and the SMU front pages), the Accountancy site lacks in efficiency and findability.

(left) Task 1: Locate Curriculum; (right) Task 2: Location Double Degrees / Second Majors information

RESEARCH

7 closed card sorts and 5 open card sorts later, I was able to get some findings that supported my initial assumptions:

What happened most frequently

  • Participants asked about the differences between WHY SMU ACCOUNTANCY? and WHY ACCOUNTANCY?
  • Participants asked why there is a need to separate FEES & FINANCIAL AID & SCHOLARSHIPS
  • Confusion about TEACHING INNOVATIONS
  • Accounting Challenge ACE was sorted into either events or awards, because it sounded like any of those. It is instead an app that helps accounting students to increase knowledge in a fun way
  • Accounting Research Navigator sounded confusing as well; sounded like a paper instead of research resources

Items not included in cards and/or suggested by testers, in both closed and open sorts

  • Add STUDENTS and/or FACULTY & STUDENTS
  • Add FAQ
  • Scholarships & Financial pages should be combined

DESIGN IMPLICATIONS

  • Go ahead with the combination of proposed pages
  • There were confusion over the labelling of certain items, the future might see some copywriting changes.

A REDESIGNED SITE MAP

The redesigned site map aims to facilitate locating information for our persona, as well as remove clutter and repetition. For this new version, items in ABOUT has been significantly reduce, as FACULTY, STUDENTS and ALUMI has been merged into OUR PEOPLE. CURRICULUM and DOUBLE DEGREES were drawn out, Admissions was included for better accessibility, and finally, LIBRARY was renamed into RESOURCES, and that would mean that an educational app like Accounting Challenge ACE could be dropped into this category.

With the help of this site map, I proceeded with another closed card sort, and the results coincide mostly with the simplified site map. I went ahead with the design process.

While Scholarships and Fees were sorted into RESOURCES, I decided to keep them in the BACHELOR column eventually, as they were only applicable to the undergraduate course and not the Masters.

At this point, a look at the task flows again has shown that improvements has been made to how quickly my persona can locate information.

DESIGN

After sketching out some wireframing ideas, I moved along to wireframe, transiting from a website width to that of a mobile.

Wireframing transitions

NOTABLE CHANGES

Apart from improving the contrast of the top navigation in accordance to the SMU front page, the modular layout of the Accountancy front page has been removed and replaced by a PROGRAMMES layout that is currently being used in other SMU School websites. This would allow for greater consistency thoughout the website, as well as better clarity and less clutter. It also brings the most important information that my persona would want in a website to the forefront: programme details.

PROGRAMMES layout currently being used in other SMU School websites
(left) Added in information for current BAcc students; (right) Added in admissions critera link as well as a quick APPLY NOW button

As well, in the current Second Majors page, information is only available for students who already have a first major from other schools, and is looking for another. As such, if persona Mark is someone who has Accountancy as a first major, he would garner no information from this page. To facilitiate the searching process I have moved information about classes offered from other Schools in SMU into this page. The Curriculum page now has a quick APPLY NOW button, as well as quick access to admissions requirements.

For the mobile version, the top header has been cleared of the overcrowding problem of the current mobile design; instead of combining both the SMU logo and the Accountancy logo in one bar, they now have their own place of rest.

(left) Cleared up the top bar of overcrowding issues; (right) Consistent application of brand colors and typeface

For the inline navigation, my surprising find was that of the three people (including two 17-year-olds) I tested this version with, no one realised that this was a navigation. My purpose in this was to bring over side navigation from the web version for the sake of consistency, but I discovered that in this respect, it does not work for mobile. My user suggested that an open version of this inline navigation would be ideal, as if it were loaded like this on the first page of BACHELOR OF ACCOUNTANCY, users would realise that this is something that would be interactive and expandable.

(left) Proposed inline navigation that failed; (right) Open navigation suggested by user

PROTOTYPE 3

With the above findings, I proceed with another prototype. This time, I added in dashes of red throughout the mobile version, as this was a color that was featured prominently in the current web version. It is a sense of identity for the various sites in SMU (i.e. Economics is blue), and it was something that was lost in the current mobile version. The front page has also been simplified, and copy was kept to a minimum of 18pt, for legibility reasons.

The inline navigation has been replaced with a left-right draggable version, which would save space, and serve as an indication of where the user is at at this point of surfing. My (previous, three) users thought it looked fantastic and that it is a great idea, but questioned if it could bring about gesture fatigue with this potential for endless scrolling.

(left) Front page, color coded with Accountancy colours; (middle) simplified layout informed by the current website; (right) contact information that will appear on all pages
(left) Bachelor of Accountact page with redesigned inline navigation; (middle) Curriculum page, with the inline nav. indicating user location; (right) Expandable information

As well, extensive content like course descriptions are managed with the help of expandable interactions. The layout for such processes were, again, informed by what is currently being used in the website.

This prototype can be found here.


Next steps and Discoveries

  • Test out this version of inline navigation again, with age-group specific users
  • Dive into other personas
  • Iterate
  • It is important to sketch and prototype with paper. This is to to avoid prototyping the wrong product, or waste time with mid-high fidelity wireframes

Thank you!

One clap, two clap, three clap, forty?

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