A UX case study on redesigning of both the Information Architecture and User Interface of a website.
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.
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 SUSS website. And create a interactive prototype that illustrates the persona’s user journey in navigating the website.
A background of the University
Persona — Chosen one
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.
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)
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.
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.
So we had to do a major clean up of information before we could moved on to our next process.
Moving on we did a Heuristic Evaluation using 10 Usability Heuristics for User Interface Design by Jakob Nielsen.
Here are some of the findings.
- Primary level navigation tabs are not highlighted when users enter into secondary level navigation links and beyond.
- Inconsistency in design layout. The clickable areas are different for every single options.
- Users are directed to different home pages/microsites after clicking on different links.
- No error messages displayed when users input wrong details in the Contact Us form.
We also create how a user flow will look through the different schools as part of the analysis.
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.
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.
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 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.
We had a 71% successful rates for our Tree Test.
Our New Information Architecture (IA)
Our new user journey map
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.
After spending 4 days with Axure, we are so proud of our prototype. Basically from zero to Axure hero (Just kidding…).
The new outlook
Disclaimer: Photos used in this prototype are part of an art direction I hope to set. Photo credits: NUS and SUTD.
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 %
With the feedback we got from users, we synthesize the feedbacks and worked on the ones that has common patterns.
The changes we worked on.
- Accordion on programme information details to be bigger
- School address to be added
- Add a mega menu flyout to the ‘Connect’ tab to show more information
#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.