UXDI Project Two — Information Architecture / Wireframe
Where do I begin? Two weeks went by, it was all a blur and it seemed like it was yesterday. To be honest, I have no recollection of the specific order of events and I will be writing this entry based on key events that happened.
Act 1: Exposition
Scene 1: The Challenge
Redesign the Information Architecture (IA) and key pages layout/wireframes of a school/college website.
Scene 2: Singapore University of Social Sciences
Drew lots and were placed into several pots with an assigned school. I was drawn into the pot with a bigger group and was assigned the task of revamping the website for Singapore’s sixth university—Singapore University of Social Sciences.
Instinctively, everyone began to search for their respective school’s website. For SUSS, on first look, I was actually rather neutral about the design and did not see any problems with the site in general. But from a graphic design perspective, the logo—ouch!—is quite hard to swallow. I will not go into the details as to why I have such distaste for the logo, and I believe that Darryl from BrandingSG have summed it up pretty well. Aside from the logo, I do think there should more effort in the marketing or branding of the university, especially when it just got rebranded and is spotting a new look.
Another surprise I found out while doing some background research: SUSS was previously called SIM University (UniSIM). During my polytechnic days, UniSIM was a popular private university as the go-to school for working adults seeking continuing education or certificate programs to aid them in their professional practice. And to be honest, I wasn’t even aware SUSS was UniSIM.
Scene 3: Personas
We were given three personas from which we will work from. The personas formed the target audience of the school, representing students from the past, the future and the present:
- Mark, a 17 year old high school student. Prospective student.
- Jessica, a 21 year old current student. Currently enrolled and returning from break.
- John, a 38 year old alumni. Interested in returning to alma mater for higher education.
For this project, I will be working from John’s perspective. However, I believe that the school’s website should cater to all kinds of users: prospective students, current students, alumni, staff, etc. Although I am focusing on John’s needs and pain points, it is also important to consider other personas: Mark and Jessica.
“I want to improve my skill set, but can’t commit alot of time”
Act 2: Rising action
Scene 1: Strength in Numbers
First off, we do need to keep stock of what pages the site has and a quick look at the dropdown menu already frightens me. Naturally, five of us who are working on the redesign of the SUSS website got together to get the most tedious task out of the way. Together with Adrian, Sybil, Yvonne and Jing Li, we formed our Content Audit and Information Architecture task force. Let the powers combine!
Scene 2: Stocktake
The Content Inventory and Audit was literally a stock taking session of what the site has as well as the problems that we faced while keying in each inventory. There were many problems that we encountered, such as missing page links, hyperlinks that link pages in circles, etc. But the more serious problems we faced were duplicate pages in different categories as well as the numerous header and site navigation we encountered.
After understanding what the site had, we moved on to the next phase — to eliminate duplicates and distill the website based on the needs and wants of the user. For this project, we will try to put ourselves into Mark’s, Jessica’s and John’s shoes, and identify which are the pages that are the most crucial to the website. Every one of us took on a persona and marked out the pages that we would consider visiting or if there is any crucial information. In addition to that, we added questions that we might have asked if we were in the shoes of the personas.
Scene 3: Cards and Trees
We consolidated all the questions that we might ask as well as the crucial pages that the personas would visit if they visited SUSS website. These questions and sites would form the basis of the card sorting exercise that we will be conducting.
So what is card sorting? To be honest, it feels like a more sophisticated version of solitaire. Card sorting is a research technique for discovering how people understand and categorise information. We can use the results to group and label your website information in a way that makes the most sense to your audience.
From a total of 206 cards, we revised it several rounds—five revisions, to be exact—before deciding on the final card count of 46 cards. Why did we took five revisions and almost three days to finally decide? Firstly, as a group and with different life experiences, we do have different perspectives in how things should be categorised. Secondly, and more importantly, we took a rather measured approach with each individual card, for example, would we require a “payment mode” card as well as a “payment procedure” card, or do these cards naturally come together and have a strong similarity traits to it. If they are too similar, it does not make sense to add to the card list. A longer list of cards will definitely discourage the user from completing the task, and we should be looking at the problematic cards than those that are too similar to one another.
… as a group and with different life experiences, we do have different perspectives in how things should be categorised. Secondly, and more importantly, we took a rather measured approach with each individual card …
46 final cards and ready to rock and roll! But alas, the happiness was short-lived. We had a set of 46 cards and conducted a hybrid test with two preset categories — Home and Student Portal. We all thought we were ready and launch the cart sorting test, but after two users, we immediately saw the problems in how the questions and categories were set.
- Instructions were too long, user tend to skip it and proceed to test without reading it. Might lead to higher abandoned tests.
- “Home” category is too vague. We placed it in to see how people will respond to it. Users understood what “home” means, but it is the dumping ground for information that users are unsure.
- Confusion over the terms “Course”, “Programme”, “Graduates”, “Undergraduates”
- Generally where the cards with the words “course” appears, it is all grouped up in one category
- User complained that the cards are too many. But according to the statistics, they completed the test between 00:07:49 and 00:09:23. Noticed that user did not take too long to understand cards.
- Might need to change or add some wordings, e.g my examination results
- For the fresh graduate, user did not find it necessary for her to know if the course is full-time or part-time course as she is not considering any part time courses and assumes all the courses are full time.
- For the working adult, he could not find the card that states “skillsfuture” which is an important consideration for him.
Back to the drawing board! We sat down, discuss, refine and reword some of the cards so that it can be clearer and more neutral for all personas. We launched the second card sorting tests in the hope of better feedback and success. Fingers crossed.
30 completed and 38 abandoned.
32 (32%) applicants have been rejected by the screening question and did not participate in the study.
68 people participated and 30 (44%) of those people sorted all 46 cards into an average of 6 groups.
The results were… somewhat surprising.
Looking back, we made a mistake of having a screener question that narrows down the personas. One of my user feedback reveal that they were not actively looking for further education at this moment but are considering it in the long term, hence they chose the rejection option. On the other hand, having the screener question allow us to gather feedback from users that were the closest to the three personas.
One of the key takeaway from the results is the inconsistency of how users categorise programmes and admissions information. For instance, the card “Graduate Programme” is sorted into 26 unique categories, under “Courses”, “Programmes”, “About the School” and “Admissions” being the most common category title. Also, one of the user which I did the card sorting with, also mentioned that graduates, postgraduates and undergraduate could be misleading for most users.
One of the key takeaway from the results is the inconsistency of how users categorise programmes and admissions information.
The dendrograms is certainly a useful analysis to have. In one of the morning stand-ups, a classmate mentioned that their group merely flipped the dendrogram 90 degrees anti-clockwise and they worked out their information architecture from there. Quite an ingenious method to see things!
Our group followed this method and used it as the basis of our information architecture. We begin grouping the cards based on the dendrograms. However, all was not plain sailing. There were some disagreements over which categories should some cards fall under. But all was resolved using the other data analysis that the card sort produced. We used mainly the similarity matrix to determine which cards are more similar to which ones and further classify some of the cards in the appropriate group.
We took the problematic cards that could fall potentially fall into two categories, as well as questions that each persona might ask based on the needs and pain points first highlighted in the persona. We then conduct another type of test called the Treejack, where we set up a “tree” that is similar to what you will see on a website navigation bar, and get users to navigate through this test to see how user can easily find the information that they require.
Again, the results were… somewhat surprising. The results range from a 100% correct hit-rate, to a 100% failure rate.
- we kept those with a majority success rate at its original location
- those with 50–50 success rate, we took a look at the pie tree to see where users will end up.
- those with a majority failure rate, we took it apart and reclassify it based on where users end up most often.
Scene 4: Information Architecture
After much debate, the group decided on the information architecture that will suit all personas, and hopefully allow users to find the information they require quick and easy. At this point, the group will break up to allow us to individually focus on designing the revamped website. Also, we do realise that our respective website will take different forms depending on the persona we are working on as well as the background research each of us have conducted.
Act 3: Climax
Scene 1: The long and lonely road
So, back to being alone and engaging in multiple monologues. With all these information, it certainly is a long and lonely road ahead trying to dissect and analyse them.
To make things more efficient, during the Treejack and Card Sorting test, I engage in short survey interviews to find out about what people think about certain elements of a website. One of the main things I am concern with when redesigning the website is how the redesign could actually impact the student decision journey in some point or another. Ultimately, most schools are profit-driven organisations and the worst we can do is to redesign a webpage that drives prospective students away.
“Education is likely the most considered purchase that any of our students will ever make. This is a person that needs a lot of information. You try not to bombard them, obviously, but we want to make sure they have everything in front of them. Digital provides us the ability to easily and succinctly convey that information and then provide depth to that conversation.”
— Les Lifter, VP of Brand Marketing (Link)
Some questions include:
- Side navigation vs top navigation
- How do you classify programmes? By schools, by courses, or do you visit the admission section.
- Undergraduate vs graduate vs postgraduate
- Did you use web and/or mobile to research about your prospective school?
- What are your main motivations to go to school?
Source link https://uxdesign.cc/uxdi-project-two-information-architecture-wireframe-4f4787893217?source=rss—-138adf9c44c—4