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
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
Low Fidelity Wireframes
Final Design Solution
Before
After
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.
