PRODUCT DESIGN
MY ROLE
Website Graphic Designer
TEAM
Executive Director
Workers' Compensation Manager
TOOLS
Figma
Wordpress
WCMS
TLDR;
The Department of Risk Services arranges safety protocols and manages insurance and liability claims, working to protect the employees in the wider campus community.
As the Website Graphic Designer, I redesigned the Risk Services homepage after I assisted in migrating three separate department sites into a singular site. The old page had no mission or hierarchy, and it buried urgent information that needed to be easily accessed. This redesign fixes both problems and gives all six service areas equal footing.
CONTEXT
A Large Transition
As the Website Graphic Designer, one of my biggest tasks was transitioning both the primary and several other affiliated websites from the Campus WCMS (Web Content Management System) to Wordpress.
I also managed both systems and ran routine usability checks to keep the site accessible and functional. Those checks are what surfaced the issues that the homepage has.
•
THE PROBLEM
FIG. 1
THE OLD HOMEPAGE
Urgent tasks were buried
Someone reporting an injury or filing a claim has to read past a promotional carousel first. It's not accessible enough.
Outdated layout
Large stretches of empty margin sit on either side of the text, and there's no real visual hierarchy that exists.
USER CONSIDERATIONS:
01
Users reporting an injury or filing a claim would the fastest possible path to a specific action.
02
Staff or faculty exploring wellness or safety programs may time to scan but no patience for a directory
MY ULTIMATE QUESTION
How might I envision a modern homepage that acts as a central hub and gets people to urgent information immediately?
•
THE PROCESS
Scoping
FIG. 2
SITEMAP; RED * = SEPERATE DEPARTMENTS BEING INTEGRATED
Kept the four highest-need actions (Injury Reporting, Occupational Health, Loss Claims, Travel Risk) exactly where analytics had already validated them: first, above the fold.
•
THE PROCESS
Creating the Accordion Menu
Photo cards for the six service areas were slower to scan than a compact list, and uneven photography made some areas look more established than others. Switched to identical navy bars.
•
THE PROCESS
What Stayed
The placement of the map, directions, and office address didn't need any tinkering, so they're still kept near the footer. I gave them a more modern redesign.
•
THE FINAL PRODUCT
The Finalized Design
REFLECTIONS
Juggling between two distinguished issues
Solving for speed didn't automatically solve the imbalance across the different sections. Getting four urgent tasks in front of people was one goal, and balancing six different service areas was another that I had to consider.
Balancing different kinds of information
Learning to prioritize different sets of information was extremely important. Restructuring the site required me to gain a deep understanding about the hierarchy of all of the pages.
