Product Design Case Study

Finance Experience Map

Turning a rarely used, unfriendly internal tool into a development resource people actually want to open.

ClientRoche
RoleInteraction Designer, UI Designer, Usability Test contributor

Overview

The Finance Experience Map is a resource aimed at helping employees in Finance create a more meaningful and useful Individual Development Plan. The tool provides an overview of different competencies and respective development actions that can help as you check-in with your manager on your personal development needs.

Current solution

Currently users have access to an outdated web app which does not reach their expectations. Finance Experience Map is used very rarely, the app is not user friendly and the user experience is on a very low level.

Challenge

Create a more engaging tool for users, which follows the corporate brand style guide, is more intuitive, and has a user experience on a very high level that encourages users to use the tool more often.

The Research

The design process was followed by user research. To understand user needs and the tool's pain points, UX Researchers facilitated a co-creation workshop for the key users and stakeholders.

Pain points

  • Not engaging, not simple, not user friendly
  • No clear message on what the purpose of the tool is
  • No clarity on how to use it, no introduction
  • Content outdated, no maintenance
  • No interaction, no collaboration, no personalization
  • No real-life examples or stories to relate to
  • No clear information on career next steps
  • Lack of focus — what's actually relevant to me?

Top ideas from the workshop

  • Introduction on the first page
  • Intuitive navigation with fewer layers
  • Consistent, on-brand, better looking design
  • Review and update content
  • Gamification
  • A "what's next" feature to track progress, with reminders
  • Link to TPP (HR tool) to connect with people and real stories
  • Identify a FEM owner
Workshop sticky-note board capturing pain points and ideas from the co-creation session
The co-creation workshop board: pain points and ideas gathered from key users and stakeholders.

Key users: people from the financial area who want to create their individual development plan and frame their development by creating an experience map. After the workshop, interviews with 10 participants were conducted. The results were similar to the findings already collected.

Role & Deliverables

My role

Interaction Designer, UI Designer, Usability Test contributor.

Deliverables

Site Map User Flows Wireframes (Sketch) Interactive prototype (InVision) High fidelity mockup (Sketch) Assets + Basic style guide InVision Inspect for developers

Site Map & Wireframes

Site map showing navigation from login through competencies, development plan and experience map
Site map: navigation from login through competencies, development plan and experience map.

Wireframes & Interactive Prototype

Wireframe of the development plan overview screen with competency progress cards
Development plan overview wireframe, built as a clickable InVision prototype.

Usability Test

Users in general have very positive opinions about the new Finance Experience Map prototype. They think it's a helpful solution and are glad it's being redesigned. Using the tool is easy; tasks were performed without serious problems and no critical errors happened, though in some cases there's still room for improvement.

Taking into account the usability test report and UX Researcher recommendations, the wireframes were fixed and improved.

Annotated wireframes with usability test findings and recommendations for the competencies and development actions screens
Usability test annotations on the competencies and development-actions screens.

Final UI Design

Final competencies screen showing Finance Core and Roche Core competency groups
Competencies screen, grouped by Finance Core and Roche Core.
Final development actions screen for the Feedback and Coaching competency
Development actions for a selected competency.
Final My Experience Map timeline screen showing roles, achievements and competencies over time
My Experience Map — the most praised feature, a personal development timeline.
Basic style guide showing buttons, navigation, dropdowns, labels and filters
Basic style guide: buttons, navigation, dropdowns and labels.
Grid overview of all final Finance Experience Map screens
The full set of final screens, from onboarding through competencies, reporting and the experience map.