Project 2 — University Website Redesign

For project two we were tasked with the redesign of a university website.

Our newly earned UX skill-sets were deepened (user research, synthesis, iteration), and a whole bunch more were added to our library (card sorting, prototyping, Sketch!). Some of which, we weren’t to stoked about –hello, content audit!

At it’s core, my UX process remained the same: Think about the product/problem > Research/Test hypothesis > Iterate on findings. However this time around I had more tools to work with, and had to figure out the best way to incorporate them into my current workflow. Time is a limited resource, especially when working on a huge project on a two week deadline, so time-blocking, and cutting the fat were necessary strategies that helped me maintain a sense of control over the scale of the project.

Think about the product/problem

I was tasked with redesigning West Virginia State University’s website. At first I was overwhelmed by the magnitude of the assignment. University websites are the home of tons of content! Most predate the “bootstrap” revolution and haven’t been updated to match current website trends. Needless to say, a little guidance was necessary in order for us to figure out where to start tackling the behemoth.

Current Students
Current Students continued

This is where learning about User Personas came in handy. We were given two personas to work with, both students with their own sets of contextual motivations and pain points. I chose to use Jessica as my imaginary user that I would cater to. After creating three tangible tasks for her to complete on the website, I was able to grasp where to focus my criticism. The user persona was instrumental in identifying where a users experience was pleasurable, painful, or just completely missing. By walking through their three tasks, I was able to pin point just exactly what needed to be fixed. And by extension, I was able to conduct user testing with these tasks, which provided further insights.

Jessica is our guide.

The bitter pill to swallow was creating a content audit. This part sucked. Heavy. Heavy sucked. But I totally understood the necessity of the bitter tea. Content audits provide the designer with an inventory of items on any given page. This Is a great way of understanding the anatomy of a page and it’s siblings. By conducting a content audit on a home page, I was able to see the core of the site’s identity, and from there, I gained a deeper understanding of what to look for. I could easily spot inconsistencies and redundancies across pages because I had started with an inventory to serve as my “digital style sheet”. It also served as a good reference when browsing through competitor’s sites.

let’s not make this a habit

The content inventory, trained me to identify website content into three types of information: navigation (sub navigation included), main content, and supplementary content. With this framework established, I started to color block how these types of content landed on each page of the site that was used in the user flow. I did the same for three other competitor sites. Color blocking content was one of my favorite tools for drawing an analysis between the client and competitors. It’s quick, easy to call out/annotate, and looks purty when presenting. I think this is something I’m definitely going to keep in my tool bag as I continue to develop my process. Furthermore, I think the gains (insight wise) were more client friendly (when presenting) than sharing three content audits. I’m glad I went through the process though. It’s helpful to know what tools I enjoy, and how I plan on using them.

content color blocking: an enjoyable experience

Test/Hypothesis

I created a user flow for how my persona would execute a single task on my client’s website and on three other competitor sites. I concluded that the user flow and navigation of my client’s site was way too cumbersome. It was bloated with pages that lead to dead ends, there was ample redundancy, and way too many options. My client’s competitors had a far leaner approach to navigation. They used a smaller controlled vocabulary, and their global navigation had far less items. I decided that my action step was going to be reduce. My assumption was that users didn’t need all of the navigation options on the site, and that reducing the bulk of them would provide a more concise experience.

I used the card sorting methodology to test what were essential and non-essential elements of our client’s pages navigation and content pages. After a preliminary sort, I tested again to determine the hierarchy of page elements. This method was fun because my testers provided a lot of insight by vocalizing their thought processes. I got a lot of feedback and ammunition for building a case for my next steps. Also, I found that card-sorting can fall in a squishy grey are that can be both empirical and anecdotal. A sweet spot for building arguments for or against something.

My iteration process was a fiery sword.

I painfully had to hack away at all of the slack, and then consolidate it into meaningful neat packaging. At first it was hard to remove elements from the site, but I recalled a principal of design that is tried and true: keep it simple. I knew that I would get hung up on what is meaningful or not, but the results of my card sort synthesis allowed me to take a less biased perspective. I simply defaulted what the users though, when my guts were shaky I looked at the data .If there was no apparent need for an Area’s of Study Page under the “New Students” tab, remove it! That information could easily be found in the “Academics” section anyway, and according to users though process, it seemed more appropriate to go to Academics to look for majors, rather than searching under New Students.

When I tested my second prototype, users were able to complete all tasks with no problems. I attribute this to redesigning for a mobile experience. I decided to eliminate huge chunks of text and replace them with images instead. This was grounded in the hunch that user’s aren’t expected to read, but rather, scan. My strategy was create pictures that acted as buttons to screen-layovers and pop-ups. This would provide an experience where bulks of information can be scanned over quickly, while important end points were shoved into a focused singular perspective –this way it would be lost in the fold.

From this…
…to this.

In summation, I’m grateful for the depth of this project. It forced me to consider what strategies worked best for me. Considering that I had limited bandwith, I discovered that doubling down on card-sorting yielded more results that would impact my design decisions. I’m eager to learn about more research methods and how they fit into generating solutions.

Like what you read? Give Win Sea a round of applause.

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