Marsh | User Portal Project

 

Summary

We redesigned the user portal to accomplish two goals: 1. Make user provisioned apps easy to access 2. Signify provisioned apps in newly created app categories for context. We ran card sorting exercises on the proposed app category names and iterated early and often with our wireframes. As I type this, I am putting the final touches on a usability test protocol for our prototype. When we complete this, it will be the first step in introducing some of our design system components in the wild and modernizing the client experience from the portal side.

The Problem

The current page presents apps without the context of how they are grouped together and distracts users with too many additional links.

The Goal(s)

Categorize the user applications and redesign the user portal page to show how the apps relate to each other while still providing users quick access to their provisioned apps.

Scope/Timeline

Six months

Team

  • 2 business stakeholders

  • 1 UX lead (me)

  • 1 graphic designer

  • 1 front-end developer

  • 1 director of marketing technology

Responsibilities

  • Meet bi-weekly with stakeholders

  • Manage project from the digital side

  • Identify goals

  • Establish and regularly revisit requirements and scope

  • Run card sorting exercise (Optimal Workshop)

  • Create initial wireframes (Sketch)

  • Run design critiques

  • Create mobile wireframes (Sketch) and mobile prototypes (Invision)

  • Write test script for usability testing

Card sorting results

I requested that we run a card sort because I felt like the categories our stakeholders came up with were too vague. In most cases the results supported my assumption. However, due to timing, we were not able to take this further.

Closed card sorting standardization grid: the numbers represent how many participants agreed that a particular app (rows) matched with a particular category (columns). Based on the number of participants n, 8-10 represents a good level of standardiz…

Closed card sorting standardization grid: the numbers represent how many participants agreed that a particular app (rows) matched with a particular category (columns). Based on the number of participants n, 8-10 represents a good level of standardization/agreement.

Open card sort similarity matrix: This shows how often apps were grouped together. So for example, participants grouped Marsh Country Information and Marsh Market Information together 87% of the time, while only grouping Marsh Country Information an…

Open card sort similarity matrix: This shows how often apps were grouped together. So for example, participants grouped Marsh Country Information and Marsh Market Information together 87% of the time, while only grouping Marsh Country Information and Marsh TEAMSITE 16% of the time.

Iterations

This is what the current user portal looks like:

We each took a stab at a new design (click each one below to zoom in). We wanted to focus on providing quick access with active/non-active states, while also showing the relationship the apps have to each other. 

I prototyped the swipe interaction of the category cards using Sketch (plus Craft) and Invision:

Final Design

We ultimately simplified the look and feel and went for a more subtle design (click below to zoom in) to more closely match some of the components of our in-progress design system. The previous designs would have created additional design elements and ultimately more technical debt.

I also prototyped the swipe interaction (using Sketch and Invision) of the tabs again which allows for swiping or tapping to navigate to the different sections. This is to accommodate for users who prefer to tap and may miss the swiping affordances: