Information Architecture: Redefining the User Experience

Px
Microcopy & UX Writing

--

Re-Designing IA for the Singapore Polytechnic

In layman terms, Information Architecture(IA) is better understood as site mapping. I first came across this term back in May when my friends were discussing it. At that time, it was still foreign to me, ‘What are they talking about?’ How was IA related to UX?

The Task

To re-design the IA for Singapore Polytechnic.

It took me a while to realise that it was not so easy just to shuffle the website contents around or remove it, reason been there are always key information that need to be retain that deem important by the school or for student reference.

My objective is to streamline the process of user accessing or getting their information in more clearer perspective.

The current website design and IA:

SP current website
SP Sitemap (As-is)
Content Inventory and Audit

User Interviews

After sessions of interview with my users, it is apparent that the website are overload with information that does not interest them (1), have repeated information that confuses them (2) and directed them out of parent site (3).

Card Sorting

During the card sorting session, users have grouped contents that seems to be in its correct category which turns out to be different from the website. From there, it made me realise that the website requires a content re-org.

Having their pain point as a direction, I used tree-testing to further justify the to-be IA. And with help from the dendrogram, it also give me more understanding how user will like to access the information.

Card Sorting Results

The to-be Information Architecture for the 3 personas

To-be IA

With the new IA, we can now do a review of Mark’s user flow to accessing information from the website.

Meet Mark!

As compared, Mark’s user flow have more clarity now. Instead of going multiple routes, his access to information are more direct.

The Solution Statement

  1. Enable user to navigate the website seamlessly without having diversion.

2. Minimise micro-sites landing and access information directly on the main website.

3. Reorganise and categorise main, sub headers and contents for clarity to user.

Prototype

With little knowledge of Axure, I decided to give it a shot and use it to produce the lo-fi wireframe.

d98vdu.axshare.com/#c=2

Iterations

Usability testing was an important process to test out user interaction with the prototype. Lucky me, I got to gather some feedbacks on usability testing:

  1. Layout can be improve to have a consistent layout e.g. Academic Schools and Full Time programmes
  2. Main page background can be consistent with the colour scheme
  3. Image (thumbnail) should be clickable
  4. Search bar can be improved with an more intuitive animation
  5. Button control should be able to control the drop down instead of hover option

Takeaways

The part that I enjoy most is card sorting and building the IA. I find the process flow very challenging yet enjoyable. However, time management is the key to make sure all process and works progress on time.

Also getting the right users to do card sort or usability testing enable to gather qualitative inputs so when screening for users, additional effort must be put in.

On my next project, I hope to explore more ux software to produce a hi-fi prototype.

14 Jan ‘18: Prototype Update

Decided to re-work on a hi fidelity prototype. Thank you all for contributing your feedbacks and comments! It allows me to improve, learn and get better at using the tool!

Prototype: https://2jxm8f.axshare.com

--

--

Px
Microcopy & UX Writing

On the path to learn and understand human behaviour and emotions to redesign solutions that aid people in their everyday life.