Information Architecture

Sitemaps & Workflows

Mapping out locations and paths within a site is one of my favorite activities. I enjoy the satisfaction of displaying all of the intricacies of something that at face value likely appears very simple. I find beauty in the underlying complexity and feel achievement when I show off the final product.

Click the images to view them.

: A sitemap of the original system I inherited when I started at SoftLayer. I mapped it out so that we knew where to start from when building our new system.

: A combination sitemap and user flow (includes the next 5 screens). This was created to show how a new component would fit into an existing site and how different personas would access it.

: This and the next three screens are examples of how a persona would access a new module.

: This and the next two screens are examples of how a persona would access a new module.

: This and the next screen are examples of how a persona would access a new module.

: This and the previous three screens are examples of how a persona would access a new module.

: A combination of all of the personas and their characteristics on the same screen.

: This and the next 5 screens were workflows for one part of a storefront system.

: This and the next 2 screens were workflows for another part of a storefront system.

Junior League of Dallas

This is an example project of some of the freelance work I do from a user experience perspective. This project included user research, information architecture, and user experience design with notated wireframes. It did not include visual design. What you see here is one half of the project as the other half was for the internal version of the site.

The problems with the site were brought out in the research, more on the internal than the external, but most had to do with navigation and the ability for users to find what they were looking for. My solution was to give the site updated navigation so that second level was accessible from any page rather than having to click on a section to get to a page to get to the navigation for that section.

Though the site has changed since I first completed this project 4 years ago, you can tell from proposed and the previous sitemaps that many of my most important proposals were implemented and still exist today.

Click the images to view them.

HRSmart

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 (at the end). 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.

: Simplified Navigation on Log In with top level nav items, utility menu, and user menu.

: 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.

: The system provided both hierarchical and navigational breadcrumbs. This helped with wayfinding and learning the system.

: To avoid taking up vertical space, the breadcrumb bar (which shows both hierarchical and navigational breadcrumbs) can be collapsed and its position is stateful.

: To help users learn the new system as well as wayfinding, the menu of the location where the user is currently located is highlighted.

: 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 into one.