stackSketches.png

LeadingEdge™

 

LeadingEdge™

This project created a mind shift within Harvard Business Publishing—unlocking potential for how teams might rapidly develop truly user-centered products. Since its launch, LeadingEdge has garnered $18.8M in revenue and the processes our team created have become a blueprint for product development across the organization.

Here’s a presentation I gave that outlines our process:

 
 
 

 

My Role:
UX & Design Lead

Responsibilities:
• Competitive Review
• Design Studio Facilitation
• Visual Design
• Interaction Design
• Prototyping
• Evaluative Testing

 

 

The project began with the team being asked to refresh an existing offering. The interface was outdated, and there had been many bugs identified—along with known security risks.

Rather than create a punch list of user stories and have the developers start knocking them out as had been the historical approach on a project like this, I led the team to embrace an alternative approach: We Will Go Slow to Go Fast.

 
 
The life of a designer is no parade of victories. There are innumerably more failures, but they must not stop us.
— Sergei Korolev, Rocket Scientist
 
 

With this mantra, we identified real user needs, anchored ourselves with design principles, established a mobile-first strategy, and made great leaps on collaboration between design and development.

 

hcd.jpg
 

 
 

WHO are we designing for?

We began by identifying a primary persona to help guide us through the redesign. The team decided to focus on our power users (Learning & Development professionals creating curricula for their employees), so “Carole” became our beacon. 

 
carole.jpg
 

WHAT are core user needs?

From there, we mapped Carole’s journey through the existing offering to get a sense for what she might be thinking & feeling, and we identified her pain points & opportunities. 

 
 
journeyMap_clear.jpg
 
 

WHERE are we going?

Once we understood whom we were designing for, and what the opportunities were, we codified a set of design principles to guide us in the design and development phases. 

 
 

HOW do we build?

A central tenet to our design principles was “Time matters; we build for people on the go”.

 
 

To that end, we designed and built LeadingEdge as Mobile First. Furthermore, rather than waste time on static wireframes, we moved straight from sketches and visual comps to an end-to-end Interactive Prototype.

 
leadingEdgePrototypes.png

Visit live prototype.

A prototype is worth 1,000 meetings.
— David Kelley, IDEO Founder
 

The team received huge benefits from discussing the prototype vigorously. We were able to use it for early testing—iterating based on feedback along the way. As we moved into development, the transition went exceptionally smoothly due to the alignment the team had achieved during the prototyping phase.

 
 
 

Alignment

In addition to leading research & design, I played a key role in keeping the team aligned. Early on, I facilitated Design Studios with the scrum team and a mix of external stakeholders from Sales, Marketing, and Finance.

 
 
DesignStudio.jpg
 
 

By having this range of disciplines participate in co-creating the design, we achieved greater buy-in on the direction—resulting in more efficient development and a higher quality offering.

 
designInBrowser_mobile.gif
 

Collaborating with the front-end developers by designing in the browser accelerated delivery significantly, and integrating a regular cadence of routine evaluative testing served to reduce QA cycles and kept the team aligned with business expectations.

 
 
 

Inventory

One of the first activities I did with the team was to create a mind map. The process of creating this artifact aligned us on all the potential content types and feature sets we might include.

 
Archive_MindMap_01_clear.png
 

Once all the connections were exposed, we were well positioned to design a system model that felt intuitive because it was tightly aligned with how we understood our user’s mental model. From here we started in on creating information architecture, user flows, and the visual design.  

 
 
 

UI Patterns 

Working closely with developers, we explored the interaction design for reordering a list of saved content. We ultimately arrived at a simple pattern (shown here).

 
 
reorderUI.jpg
 
 

When the user chooses the “reorder” mode, we remove much of the metadata and functionality from each asset card to make it easier to select the desired asset block, and quickly move it where desired. We also provide a “handle” icon to the left along with an indication of where the asset is, and where it’s being moved. 

 
 
 

User Flow 

We had a complicated task flow that varied by user. Some of the functionality was already built while other areas required new development or modification. This was a high stakes integration with our Oracle financial systems, so I created this flow chart to align the team and indicate what it would take to achieve the necessary results. 

 
 
flowChart.jpg
 
 
 

Search 

Our content repository pulled together many new content types, so it was imperative we figure out how best to organize it for search filtering.

 
 
searchFilters.jpg
 
 

We had hypotheses about the importance of format vs. source, so I conducted a card sorting exercise with a range of internal stakeholders and external participants to better explore what themes might emerge. The results of the study helped us make decisions such as combining digital and magazine articles types under “Articles” and removing the redundant variations of “Harvard” that proceed most asset types.

 
 

Evolving Visual Design

 
le_page.jpg
 
 

Fully Responsive, Mobile-first Application

LE_FamilyDevices_RedesignedHomePage.jpg