A UX case study on redesigning of both the Information Architecture and User Interface of a website.

An actual interactive prototype done in Axure.

Disclaimer: This brief was created by the General Assembly (GA) course to imitate a real-life project.

Coming from a background of web design and front-end development, redesigning a website would be a simple job to do. But this time round, we added the process of UX to it.

We believed that an effective website can help to increase conversions, strengthen the brand and creditability of the .

Importantly, it also improves the digital experience for users.

Note: This is an article about the journey of what we did to get this website transformed.

First, the brief

To redesign the Information Architecture (IA) and key pages layout/wireframes of website. And create a interactive prototype that illustrates the persona’s user journey in navigating the website.

A background of the University

SIM University (UniSIM) has been renamed the University of (SUSS), as part of its restructuring into Singapore’s sixth autonomous university.

Our Methodology

Our Tools/Softwares

Persona — Chosen one

UX Process

Our Research

To know how SUSS website perform.

We did an initial investigation on the current SUSS website. At first glance, it seems to me it was just a simple design with probably little information.

SUSS current website

Creating the current Information Architecture (IA)

Then we did a click-through of the website to find out if there were more insights. To show you a summary of how deep this website goes (Refer to the diagram below)

This is the current IA of SUSS.

Finding information wasn’t as easy as we thought. And those yellow boxes are actually leading users to other microsites.

Major Problem: Most of Mark’s key requirements has to do with Admissions and Programme section, which currently linked out to another microsite.

Content Audit

Shiyang and I doing content auditing

To reconfirm our findings, my partner Shiyang and I did another round content audit. This time we found more issues like duplication of pages and more broken links.

Sample of the content auditing (Total of 330 listings)

So we had to do a major clean up of information before we could moved on to our next process.

Heuristic Evaluation

Doing Heuristic Evaluation together with another group. (From the left: Myself, Shiyang, Jen and Daniel)

Moving on we did a Heuristic Evaluation using 10 Usability Heuristics for User Interface Design by Jakob Nielsen.

Here are some of the findings.

  1. Primary level navigation tabs are not highlighted when users enter into secondary level navigation links and beyond.
  2. Inconsistency in design layout. The clickable areas are different for every single options.
  3. Users are directed to different home pages/microsites after clicking on different links.
  4. No error messages displayed when users input wrong details in the Contact Us form.

Competitor Analysis

We also create how a user flow will look through the different schools as part of the analysis.

User flow chart between 3 schools (SUSS — Singapore University of Social Sciences, SIT — Singapore Institute of Technology and SMU — Singapore Management University)
Comparison chart

Congnitive Walkthrough + Usability Testing

In order to gather more research findings, we went on to ask 4 users who has the same persona as Mark to take on the role and executed the tasks.

Shiyang doing a cognitive walkthrough with one of our users

At the same time, we interviewed all of these users to find out more on how they felt during the walkthrough.

Defining Our Design Goal

Our design goal is to help young prospective students to find relevant information (admission, programme and financial aid info) in a fast and simple way.

A photo of the categories used

Card Sort

Card sorting is a method used to help design or evaluate the information architecture of a site. In a card sorting session, participants organize topics into categories that make sense to them and they may also help you label these groups.

We did a hybrid card sort on 28 users internally and externally to test out the different categories naming. By doing this, we would know whether the categories’ name make any sense to them. In the test, we also allowed user to input their own categories.

Problem: In our card sorting, there were some terms that has very low score e.g. Departments, UC programme office etc. Reason being some of the terms used are only relevant to the internal staff of SUSS.

Solution: We had to make certain calls to place them at certain categories in order to move on to tree testing. If given more time, we will definitely reconsider some of the naming and do a few more rounds of card sorting.

Tree Testing

Tree testing is a way of evaluating a proposed site structure by asking users to find items based on the sites organisation and terminology.

To follow up on the card sort, we did our tree testing which helps us to test on our previous card’s accuracy.

Card Sort (On the left) and Tree Testing (On the right), the pink boxes and thick lines shows that the topics are closely related.

Results

We had a 71% successful rates for our Tree Test.

Our New Information Architecture (IA)

Our new user journey map

Wireframes

In order to do a rapid mockup, we did a research on how we could get it delivered fast.

Solution: We have found a plugin that could import Sketch templates into Axure. So that’s where we did all out wireframes.

Because of my background as a front-end developer, I actually considered and visualized the design in both desktop and mobile view. And how would some of the functions be integrated.

Some of the mid-fidelity wireframes in Sketch

Prototyping

After spending 4 days with Axure, we are so proud of our prototype. Basically from zero to Axure hero (Just kidding…).

The new outlook

View our prototype

Disclaimer: Photos used in this prototype are part of an art direction I hope to set. Photo credits: NUS and SUTD.

Responsive design in mobile view

Usability Test

Shiyang conducting a usability testing with one of our users

In 2 days, we recruited 3 users to carry this test.

Task: We gave users the scenario based on Mark’s persona and user flow.

Results (3 users): 
Average time taken per task: Less than 25s. 
Task successful rate: 80 %

Some feedbacks:

Iterations

With the feedback we got from users, we synthesize the feedbacks and worked on the ones that has common patterns.

Synthesizing the feedbacks from users and the dotted ones are the ones we will be working on.

The changes we worked on.

  1. Accordion on programme information details to be bigger
  2. School address to be added
  3. Add a mega menu flyout to the ‘Connect’ tab to show more information

Points

#1 UX process is all about collaboration over competition, working with my partner Shiyang helps to push me further during the period of my conceptualizing and development of the wireframes. It helped me to realize some of the key factors I might have missed out. Kudos to Shiyang.

#2 UX involves evaluative stage during the development process. Results or solutions derived from the methodology will need to be tested it out.

#3 On myself, I probably could have done better in time management on the prototyping phrase. As a designer and developer, I placed a high expectation on the solution, wanted to deliver a high quality website which is dynamic and content loading would a breeze (content loading could be in the form of AJAX). Within me, I really wanted to perfect every single function on the new website. But the same time, Axure to me is a totally new software to learn and in the 4 days of prototyping I had to research and work on the functions and finding different method to do many of the these dynamic features, which in this case it might not be ideal for project delivery. For my next work, I will really take this into consideration features vs resources vs time.

For the project to have a good website it really boils down to have a good and solid IA. This will help to our users to save a lot of time and effect to find the information they need in real life.

Thank you for reading my article, hope you are blessed by it so far. Feel free to reach out to me if you would like to chat more.



Source link https://uxdesign.cc/redesigned-of-singapore-university-of-social-sciences-suss-e8d0513f71ea?source=rss—-138adf9c44c—4

LEAVE A REPLY

Please enter your comment!
Please enter your name here