College Website Redesign for University of South Carolina — Union

Before starting to talk about the project, I’d like to show a diagram that explains the UX design process.

The diagram was designed by my partner SeungJoo and I. We dissected and organized the UX design process into three stages: Discover/Define, Design and Test. Our design was inspired by the recycle symbol composed of three mutually chasing arrows. It’ shows a infinite process which applied in every UX design project.

PROJECT 2 CHALLENGE: Update the structure and redesign USC Union’s website.

USC Union is a small two year community college that offers Associate of Science/Associate of Art majors, online classes, ESL and continue ED classes. I started the project by selecting the persona Jessica, who is 21 year old, associate of science major, currently enrolled. She has a list of needs and pain points. Persona is the representation of a business’s current users. All design decisions should be made catering to the persona’s needs and solveing her problems. But because of time limitation and the scope of this project, I needed to prioritize her needs. Finally I came down to 3 major needs/pain points that I think other students face too.

STAGE 1: DISCOVER/DEFINE

Base on Jessica’s needs, I came up with two user tasks to test on the current website. I tested 5 participants, no one could finish even one task within 5 minutes, and we ended the test here because they were frustrated and didn’t want to waste any more time, but I got some interesting findings that will help me for the redesign:

- all of the participants clicked into the side nav bar before using global nav. I think it’s because global nav bar was small and not eye-catching.
- people were very disappointed as they expect to find a list of academic programs in the “academic” page, but it’s not there.
- after failed to find academic program info in the “academic” page, the next place the participants look is “admission”, but there are so many links in this page, people completely missed the link that they are looking for.
- 2 participants told me the “staff” button on the side nav is not important and shouldn’t be there.

Overall, the current website usability failed tremendously. There were too many categories, too much information with poorly organized content hierarchy that users weren’t able to identify. Therefore, I decided the design goal for this project is to eliminate confusion and provide faster navigation for the user.

Now it’s time for competitive analysis.

  1. User Flow

I chose three community colleges as USCU’s competitors and documented the user flow using the same two tasks and compared their flows. It turned out that the amount of steps took to finish task 1 are similar with USCU, and in task 2, USCU actually has the shortest flow. However, I don’t think the amount of clicks should be the solo measurement in terms of good user experience, at least not in this case. Essentially user experience is not as simple as a math equation. It’s more important for USCU to declutter the screen, and to break down the overwhelming amount of information that the users were not able to identify.

2. Competitive Analysis

Then I compared the competitors’ site features and elements, as well content wire block. These exercise were much more insightful. It helped me to spot trends that USCU had missed.

Just to name a few differences I spotted on competitors’ site,

- the logos are small and grouped with global navigation bar
- attention-grabbing images with call-to-action button on homepage
- no side navigation bar on home page, but plenty of short-cut to direct users into the site
- use of quick link, search bar, bread crumb navigation and interactive controls
- fixed header
- fully utilized screen
- frequently used visual cues to emphasis important actions
- no one uses PDF files or PDF forms

3. Content Inventory

This was a very a time consuming step. I literally entered every navigation title, its link, image, file type, URL and compiling everything into a big spreadsheet. I was skeptical as how it’s related to the project, but as I was filling out the spreadsheet, I found things that are useless, spotted duplication and identified all kinds of relationships in the content. The process forced me to understand all of the content before I try to work with it later. It turned out this painstaking process was actually very crucial and necessary.

4. Sitemap

This was basically a flow-chart of the content. I think the purpose of a sitemap is similar to that of a content inventory and I didn’t find it very insightful at this point, however, I do think it would be beneficial if I had done sitemap on the competitor’s site and I should definitely create a sitemap before making the new website.

STAGE 2: DESIGN

After the research and analysis, I then started to draw a sitemap and drafted a few key pages on paper while keeping these goals in mind:

  • emphasize on main actions that users need
  • hide or eliminate less important information
  • maximize space for user needed information
  • clear hierarchy
  • clean design
  • use visual cues to guide user’s navigation
  • use alert system to keep user engaged

To validate my sitemap, I needed to do a card sort and because of time limitation, I decide to go with closed card sort, which participants are provided with group names, and are asked to place each of the cards into one of the pre-established groups. This went pretty smooth, except I found 2 out of the 5 participants had a hard time differentiate “Admission” with “Academics” so I decided to add “academic program” in the side navigation on the “Admission” page, as well as in “Academics” page.

Next step — design in Sketch, then translate to low-fidelity prototype using Invision.

STAGE 3: TEST

I was excited and can’t wait to start my 1st testing. Again, I tested with 5 new participants. The navigation time was dramatically reduced comparing to the initial website, however, there were issues that I didn’t think of.

  1. 3 out of 5 participants used “current student” button as entry point, yet the “current student” button was in the quick link, not in the global nav, and the font size was smaller. It needed to be moved to the global nav.
  2. in the “Academic” page side navigation, it had “view classes” and “online classes”, 1 participant went into “view classes” instead of “online classes” to look for online history class info, which I didn’t except. So then I built out the “view classes” page, and separated class options into regular and online class, and made a link that takes user to “online history class”.
  3. 3 participants complained the font size was too small in “quick link” and hard to see because of the lack of color contrast between the background the font.

So back to Sketch, I made adjustments base on testing results and filled out more content details. I adde copy of “Real people, Real stories” as alumni testimony at top of the homepage w/ “Apply” button to attract prospective student to sign-in; added brief descriptions of 3 main programs to the images on homepage that speaks to prospective students’ needs, hopefully to engage them and allure them into the site; I emphasized “online education” in both the homepage and academics page because it’s relevant to current students’ life style and solves the persona’s problem of scheduling conflicts.

After the second prototype, I performed another user test with 5 participants. The result was amazing. On average, every participant was able to complete each task under a minute with 3–4 clicks. Hooray!

PS: here is the link to the prototype

https://invis.io/9A7LIEAJC#/164823571_HOME

Overall, the project went pretty smooth for me. however, I do feel card sort could potentially be very difficult and time consuming, especially to keep track of all the results from each participant. I feel I chose the easy way this time because I did closed card sort. I will try open card sort in the future and maybe develop a excel system for the results.

Also I wonder if there is some kind of grid system in Sketch. I feel my pages are very messy and I was not able to align things. Yet knowing this was low-fi project, I tried not to be obsessed over details. But in the future, I would definitely want to improve the aesthetic of the pages and make them look more professional.

If I had more time, I would continue to improve the redesign. As mentioned earlier, I prioritized 3 needs because of the time constraint. But if time allows, I would go back and visit the persona’s other needs, design new tasks, and start the process over.

I like problem solving challenges. It forces me to form structured thinking. and I was very glad to learn how to use tools such as content inventory, site map and wire block to aid process.

Like what you read? Give Stephanie Liang a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.