Menu
Cyber Anthropology
Study of online culture and culture online.
  • Academic Research
    • Doctoral Research: Study of Parental Information Behavior
    • Masters Research: Study of the Fedora Project
    • Undergrad Research: Ethnography of a WoW Guild
  • Curriculum Vitae
  • Projects
  • Portfolio
  • Contact
Close Menu

Information Architecture / User Research / UX Design

HRSmart – SaaS Redesign

Client HRSmart
Services Created a new navigation system
Date 2008

This is an example of redesigning a Software as a Service from the ground up, starting with the navigation. The challenge here was that there were multiple modules within the application that were all developed and designed differently and each had their own set of navigation points. This meant that as a user made his way through the system it was difficult to keep track of where they were and how they got there.

Through user research, I learned that users often used options across all modules during a single session. Additionally, users had a hard time navigating the system and finding what they needed when they needed it. Thus, I redesigned the system so that it was user-centric rather than module-centric.  Here are examples of the new navigation system I designed both the visuals and interactions for compared to the original one. All of the work for this was completed in Adobe Photoshop. The screens you see below are from the released product.

HRSmart has since been acquired by Deltek.

Click on the images to view them.

hrs-screenshot-hua-oldlookandfeel
Original look and feel with all of the modules provided individually.
hrs-screenshot-oldvertmenu
Original vertical menu that has been expanded, which changed depending on what module you were in.
hrs-screenshot-old2ndlvlnav
Original individual Module with an additional menu visible.
hrs-screenshot-oldmodule-epm
Original individual Module with its own navigation.
hrs-screenshot-oldmodule-cdsp
Original individual Module with its own navigation.
hrs-screenshot-oldmodule-lms
Original individual Module with its own navigation.
hrs-screenshot-oldmodule-svm
Original individual Module with its own navigation.
hrs-screenshot-loggedin
Simplified Navigation on Log In with top level nav items, utility menu, and user menu.
hrs-screenshot-hover-secondnav
Hovering 1st level navigation option reveals 2nd level navigation options. Once 1st level is selected the vertical menu goes away. It is easily accessible again via the logo.
hrs-screenshot-new-dropdown-menu
An example of the third level nav options. In the original system, this would have taken an upwards of 8 to 10 clicks to get to everything at this level. Here it is reduced to 2.
hrs-screenshot-new-combinedmods
This is an example of the navigation that shows multiple modules accessible from a single nav point.
hrs-screenshot-expandedbreadcrumbs
The system provided both hierarchical and navigational breadcrumbs. This helped with wayfinding and learning the system.
hrs-screenshot-collapsedbreadcrumbs
To avoid taking up vertical space, the breadcrumb bar (which shows both hierarchical and navigational breadcrumbs) can be collapsed and its position is stateful.
hrs-screenshot-highlightedmenu
To help users learn the new system as well as wayfinding, the menu of the location where the user is currently located is highlighted.
hrs-screenshot-search
Search from each module was consolidated into a single one. This was step one of a future process where the searches from each would be combined so that the dropdown would be unnecessary moving forward.

 

imc2 – Presentation Creator Academic Research Mentions
Back To Top
Cyber Anthropology
 © Diana Harrelson Hubbard 2007-2020
All Rights Reserved
 Notice: All content on this site is original or is utilized via Fair Use policies. This site is not a commercial site. There is no paid content and no advertising. This site is news, education, scholarship, and research-based. Thus, this site is not subject to payment or endorsement of media used herein. Should media be present that you have rights to and would like removed, please use the contact form to ask for removal. All media removal requests will be handled promptly.

Connect

  • Twitter
  • LinkedIn
  • Academia