The Cube

WorkLife Office

Services Provided:

UX/UI Design, Information Architecture

Team:

Kate Schleusener, Isabelle Derocher, Adria Mestre

Tools:

Figma, WordPress, Elementor, Optimal Workshop, JamBoard

Duration:

June 2022 – December 2022

Project Manager:

Dr. Kate Birdsall

Home page of the MSU Work-Life Office website.

Background

Michigan State University’s WorkLife Office is dedicated to providing resources, creativity, inclusion, safety, and information. The office wanted a new website that expressed these characteristics and wanted a redesign that is user friendly, easy to navigate, and helpful to all MSU employees. While the office has a developed message, it isn’t always clear due to website deficiencies, including an overload of information and navigation issues. These were two critical issues that the redesign needed to address. 

Goals

Highlight – Create a space that highlights WLO’s work, resources, and services.

 

Grow – Grow WLO’s audience and user base, and increase site traffic.

 

Inform – Easily inform users of what is available through WLO.

Problem Statement

The WorkLife Office website is overwhelming and is challenging to navigate. The target audience can’t access important resources because they struggle to locate the spaces where information should be. The office needs a redesign that guides users through the site with ease.

Research

Content Audit

We used Screaming Frog to run an initial content audit, and afterwards conducted a manual audit. We found:

  • outdated information
  • the “home” tab serves as a catch-all
  • ambiguous categories
  • duplicated pages and links

Card Sort

We then used our findings to compile a list of necessary items to include in a card sort to see where potential users might categorize the information.

We conducted 2 card sorts to find out how potential users might organize the site.

Card Sort Analysis

We found:

  • There wasn’t much agreement between participants on where to place the items
  • Users were overwhelmed with the number of choices to make; some participants didn’t finish the study

Original Information Architecture

While mapping out the original information architecture of the site, we found that tabs were piled on top of one another and sub-tabs weren’t being utilized. This made finding information a challenge, as users would have to click a tab to figure out what it contains, rather than having an idea beforehand.

Problems and Tasks

Navigation

Problem: The main navbar could use standardization of landing pages.

Solution: Create something that showcases all of the information to find in each section of the site.

Static Design

Problem: The current site feels static, making it feel uninviting to new users.

Solution: Create more movement by adding images, videos, and color.

Text Heavy

Problem: Inner pages are very paragraph heavy and are overwhelming to read.

Solution: Break them up with style changes and images to make the text easier to read.

Visual Identity

Problem: WLO needs some kind of immediate identity through the visual design.

Solution: Use imagery, a secondary color palette, repeated layout, and familiar icons.

Ideation

Summary of Insights

Kate

Problems:

  • Things aren’t easy to find on the site
  • Information overload
  • Not clear on what the WLO does, so not everything is used as much as it could be
  • Lots of resources just aren’t in the right place
  • Not very visually appealing 

 

Needs:

  • Knowing where to put new content is important, make distinctions clear
  • New IA, focus on how people coming to the site will see everything
  • Slim down the site while keeping all of the important information there

Isabelle

Problems:

  • Visually overwhelming, congested
  • Unclear hierarchy and overall organization
  • Ambiguous categories
  • Repetitive information
  • Lots of information is outdated or needs to be removed 
  • Not intuitive to navigate  

 

Needs:

  • Match other MSU sites
  • Keep things up to date
  • Create a visual hierarchy and make information easy to find
  • Keywords that make sense to the audience

Takeaways

  • Needs to make sense to click through
  • Intuitive design/where users assume info will live is where it actually lives
  • Staying on-brand and matching baselines from other MSU sites
  • Clear categories/what information they offer
  • More graphics/images
  • Spotlights for current focus
  • Visually appealing
  • Clear hierarchy
  • Reduce clutter

Proposed Information Architecture

Flowchart showing the proposed information architecture

Low Fidelity Wireframes

Knowing our team would have to design more than 170 pages, we decided to create a limited number of low fidelity wireframes. We used our low fidelity wireframes to establish a sense of style and used those same elements throughout the high fidelity designs to develop consistency.
Low fidelity style sheet
Home page low fidelity wireframe
Collection of articles page
Page style wireframe

Final Design Solution

Before

Original home page for Work Life
Career change page
Campus connection page

After

Home page of the MSU Work-Life Office website.
Your career page
campus resources page

Final Takeaways

Find the people who can help you

For whatever complication you are trying to figure out there is someone who knows how to help you, it is just a matter of finding them and communicating what is happening effectively. Give people enough time to help you relative to the deadline, don’t put it off until you are running into a deadline.

Clear communication is key for large projects

For this project we found ourselves going in circles trying to find the specific office or person who was able to do our domain redirect and site hosting. Clearly communicating what is going on, making sure you understand what others are saying, and being responsive really helped in this process.

Find intuitive ways to track progress early on

On multiple occasions we found ourselves creating a way to keep track of progress for specific items after we had already been working in that area. We ended up backtracking to add in what we had already done, and then abandoning it because it was just creating more work for us. We found what worked for us specifically and stuck with it – though there is always room for improvement in this area.

Case Study written by Isabelle Derocher and Kate Schleusener

css.php