Redesigning College of Education website within University of Alaska Achorage

My project 2 for UX design immersive course in General Assembly is redesigning Information Architecture (IA) and content strategy around an experience for users of the college website (https://www.uaa.alaska.edu/coe/).

PERSONA

I have a given persona John that represents a big group of people who have similar needs and pains when they look into get in a college. Using my design process I am going to discover and define problems of the current website to meet the goals of both users and college .

John is a 28 year old teacher, interested in higher education to become a special educator. To help what he is looking for on the website I made his concern to few tasks.

TASK

He wants to know about general information about his course, especially if

  1. it will help him advance professional development

2. it’s learning outcome and requirements

3. tuition fee

DESIGN PROCESS

I started with user research to discover problems. I used competitive analysis, content inventory, card sorting methods. After that I synthesized data to identify problem and solution. I started sketching from low to mid fidelity and iterated. I made the iteration prototype and tested to users. I synthesized feedback and made more mid fidelity iteration. Now I am in the process of synthesizing third usability test from 3rd iteration prototype.


USER REARCH

  • CONTENT INVENTORY

To understand the current website, I documented the entire contents by page name, content/file type, function, description, priority/redundant level, where it links to and where images are located from home page to every page to find admission requirements (one of my persona’s task).

I have 2 different way to find the task in current website.

  1. I learned the high priority content is currently not in the college webpage but either in pdf or direct to outside of college.
  2. There is a global navigation for college site and dropdown quick links on footer for university global navigation.
  3. There are so many repetitive navigation elements and low priority elements are taking spaces in the global navigation.

  • SITEMAP
programs & degrees. one part of global navigation sitemap with Omnigraffle

We learned software Omnigraffle in class. I created a global navigation sitemap to see how contents are listed. Here is a part of global navigation sitemap.

There are 8 majors under programs and degrees but in theirs sub-nav so many different words and kinds of degrees. Also, Since not every major has graduate programs, I would consider categorize them by undergraduate and graduate instead by major.


PDF and redundant/outdated global navigation on sitemap with Omnigraffle

Also, under professional and continuing education (PACE) tab, there are 30 pdfs. It would be more efficient if the content is on the actual webpage where is relevant to. It can save users time to search and download pdf.

One to the right, under NCAT Accreditation and Institutional report 2010 tab, there are 5 to 18 sub navigation on each level 2 sub navigation. This tab alone has more than 100 sub-navigations that are not even clear what it is unless clicking it and going to each page. This information is 6 year old and need to be updated as well.

  1. Reorganize pdf content and long list of sub navigation
  2. relocate redundant content
  3. update outdated content

will be necessary for the current navigation.


The link below, you can see the entire elements of global navigation sitemap.


  • COMPETITIVE ANALYSIS

I picked 3 competitors that have similar number of education alumni based on LinkedIn: University of Detroit Mercy, private college Lewis & Clark in Portland, University of Louisiana Lafayette. I compared 2 different information: user flow and structure of content.

-user flow comparison

user flow of finding admission requirements in each college of education website with Omnigraffle

Like I mentioned in content inventory and sitemap, our site ends up to either pdf or outside of college website to finish task. But 2 other competitors have easier access to task since they have a global navigation of university site inside their college page. But once users get out of college site they have to reselect degree, college and major. Users have to select same information multiple times. If users can have that specific contents where it is relevant within in college site will be helpful and save time

-content structure comparison

This method helps me to see how competitors have structured the same content on their page.

One big different is that all competitors have a nice global navigation of university on top of their page and useful quick links on their home.

I would create a new global navigation and add useful quick links.


  • CARD SORTING
open card sorting for global nav elements

To create global navigation I performed open card sorting. I let users create categories and group elements. Users have different ways to group them. But I was able to see the pattern that everyone put handbook information, which was all pdf, under category of programs & degrees. Other elements besides academic related they put under either About us or Student service.


closed card sorting for prioritize content within college of education

To organize content inside college of education page, I performed closed card sort, how they would prioritize elements and find what’s redundant.

Users wanted to see the order of program options, requirements, professional field experience. But I still had to place learning outcome that our persona wanted to know so I decided to include it in page too.


card sorting process

Users were very frustrated when they see unclear terminology. There was a few words in common that everyone got confused. I performed another closed card sort that have descriptions of the word and ask them to name the group. I was be able to pick the term professional development which was field placement before.

card sorting result. reorganizing categories

SYNTHESIS RESEARCH

The problem of current website has

  • long lists of sub navigation, new category is needed.
  • lots of pdf files that can move to content on the page
  • missing global navigation
  • unclear terminology
  • redundant and outdate content

The goal for this project is to keep college brand and content but provide them to users where they can find easier.


1ST SKETCH / ITERATION

sketches of current homepage and idea of iteration
low fidelity wire frame of current home page (left) and 1st iteration (right)

I started with sketching current home page layout, adding global navigation and changing categories of local navigation.

Then I made low fidelity of current homepage layout in Sketch software. Based on card sorting and synthesis, I added texts of contents and navigations. When I had rough version of layout. I uploaded images of wireframes in prototype website InVision and linked pages to navigation elements. Users will be able to test from home page to browse for content and interact with it.

Right after one usability testing I noticed my tasks which were find admission requirements and tuition fees were’t challenging enough for my project. So I made one more task which is find professional development. One user mentioned that my breadcrumb has more contrast than global navigation so global navigation isn’t standing out as it should. I went back to Sketch and made the global navigation the most contrast on the page and text of breadcrumb smaller. Again after the 2nd iteration I uploaded them to InVision and made 2nd prototype.

2nd iteration home page

USABILITY TESTING

I gave users scenario and tasks to complete. I asked them how they feel about the steps and the way laid out and organized. If they have any suggestions to fix the problem. I tested 6 users.

  • Scenario

John is interested in special education of master degree.

  • Task
  1. find general information about the course especially professional development and requirements.
  2. find how much it will cost.

They were all be able to complete it after one or two tries.


FEEDBACK

feedback from 2nd iteration prototype usability testing
affinity mapping of feedback from 2nd prototype usability testing

I hear more complains than compliment. I saw the dislikes’ pattern and be able to tell what I was missing.

  • LIKES

Users mentioned they liked the look of breadcrumb and finding program information was clear and easy.

  • DISLIKES

They thought admission requirements should have link or be able to find from program general information. Some users tried to find education major program from Academics on global navigations even if they are already in college of education site. They said the first page of major course should be overview or objectives instead program options.

SYNTHESIS / 2ND ITERATION

3rd iteration home page

Based on feedback from 2nd prototype, I went back to sketch and made changes.

  • I moved global navigation to the very top of screen and made it as fixed header.
  • I made welcome text on home bigger and moved to the top of the image carousel so users can see where they are and I was hoping user will see the text underneath.
  • I added admission requirements content inside programs and degrees.

comparing current local navigation (left) and 3rd iteration (right)

This is how local navigation changed after researching, few iterations and usability testing.


PRESENTATION

After 2 weeks of working on the project with repeating of research, synthesizing, iteration, usability testing. I gave 8 minutes of client facing presentation in class.

It took all day to prepare and put slides together and think about what to say. I was never used to give public speech. I was trying to make this story comfortable to me so I don’t have to memorize every single words.

I still need more practices and I will never gonna enjoy it but I was glad people told me I did better and sounded more confident than last time. They said my slides and big pictures were easy to follow and helpful.

I LEARNED

All the process and method of user research is important. Before I performed card sorting I felt like I could skip this process and why not put them in the way I think it’s right. I didn’t know where to start because my navigation was so much and all seemed redundant. But card sorting definitely helped clear categories and priorities. It was nice to have backup data.

Analyzing research was challenging especially content blocking. Writing down the difference was easy but I couldn’t tell which way of layout is better and what I should consider to take from others or not.

I enjoyed iteration after getting feedback. Users usually have patterns of likes and dislikes. I liked coming up with way to fix but I didn’t enjoy working on sketch software as much. I wish I had 2 bigger screens. Working in a 13 inch screen laptop was pretty tedious and I wasn’t able to keep same positions of the same elements one page to next so in InVision everything shifts little by little.

NEXT STEPS

I focused on the course information and couldn’t work on better way to find tuition as much. I would do more iteration and usability testing for it. And then possibly make higher fidelity to test.

Overall I enjoyed it. Some process were overwhelming and changeling. First week I wasn’t sure how this project was gonna finish with content inventory, competitive analysis but definitely after card sorting on second week it gave me direction. Time went so fast when there were a lot to do but I feel good about the project and after finishing presentation. I really appreciate everyone who did usability testing and card sorting for my project and gave me helpful feedback including for presentation. Also all other peers and instructors who were there for each other.