Case Studies

journey to the cloud in fintech

Table of contents
image- WK all devices
Company

Wolters Kluwer, Tax & Accounting Europe

 
My Role

Thought leader in UX

Lead Interaction designer

Head of UX, Cloud Strategy Operations

image- WK all devices
Table of contents

Achievements

  • Evangelising & demonstrating the efficiency & value of UX / Interaction Design (IxD) to functional leaders, changing the perception on what UX was to key executives in the orgs
  • Staff hiring and skill-set around UX & IxD had been through a massive upgrade since
  • Superior rate of frequency & quality of usability testing became a showcase for all teams to raise the bar
  • Led the UX & interaction design for the wide group of stakeholders from 9 countries– from requirements gathering to conceptual designs via Design Thinking & Goal-directed design methodologies
  • Led the UX managers in Europe providing fact-based User Research
  • Led workshops to flesh out the required context scenarios & requirements
  • Coordinated Lean UX workshops – resulted in UX-led cloud product with early prototypes tested with real users 3x faster than normal

The absence of Interaction Design (IxD) was the biggest gap found in the current process & skill-set in the teams.  It was to be an up-hill battle when projects were commonly led by Tech project managers who viewed UX as graphic design.

Steering the company culture from ‘Big design up-front’ habits and turning to ‘Big learning up-front’ was fundamental…

Note: The above company culture was one of the biggest challenges.

Lead by Example – Focus on Human needs

  • Evangelizing the distinctions between UXR (UX research), IXD (Interaction design), VXD (Visual Design) and how they flow into each other
  • Lean UX: Explain & show how the process works with Rapid Learning is incorporated throughout the whole process & repeats within agile – via Rapid Prototypes as experiments, iterate with quick-turn-around test results with cross-functional teams
  • Gradually weed out legacy expectations of waterfall process with design
  • Explaining & showing when & when not to involve UX

how does UX / interaction design flow into UI design?

Click on image to enlarge

The above chart illustrates the role & responsibility UX serves, especially at the start of the project. The challenge was to insert this practice into a company culture where it was not defined nor it was practiced. It also shows the delta where UX & UI meets and close collaboration is required.

title: proto-personas

Progressing from Market segments to Proto-personas

  • Prior to this project I had invested 6 months leading the training program for UX leads of the 9 countries. It covered best practices & methodologies with Proto-personas & ethnographic research
  • All UX Leads from the countries were asked to produce proto-personas for their markets and were responsible for gathering data within thier own countries’ markets
  • Each countries’ persona data were compiled and synthesized into 5 key persona boards as arch-types for the whole of Europe based on common characteristics

We had to do a complete overhaul of our persona boards based on User research based on User goals & behavioral patterns. Previously the User persona generation was outsourced to an external agency which had approached it with a  market research mind-set. They were heavy in demographic generalizations which served little value today, especially after 5-years have past since.

Persona boards are not 1 & done exercises. They are rather operational tasks.

To always keep up-to-date as new data comes in, replacing assumptions with facts, visible to all colleagues.

For complex software projects such as this Persona boards help orgs as key guides in efforts of genuine empathy with target Users.

Quite often, having secondary & customer personas (who are non-Users but are ones purchasing the product) are useful. Read more on Proto-personas.

title-user journey maps

Workshop Sessions On Current & Future Journey Maps

  • Across the 9 countries, we had gathered cross-functional colleagues from product, infrastructure, tech, customer service to workshop sessions (virtually due to COVID ). In those sessions, we have absorbed the collected data summary and discussed their primary & secondary personas
  • Current state User journey map was mapped out to flesh out key touch-points which were common across the countries while country-specific nuances were also discussed
  • Synthesis & patterns were worked out based on common User goals & needs which led to a shared understanding across all teams involved. By doing this, we were all aligned & practicing User centered design
  • At the end of the day, a re-play & summary of the insights were shared with the whole workshop participants

Mapping User Goals As a Starting point

  • For Future Journey Maps, we’ve started with Goals of Users which align with business goals. Then an optimistic yet feasible ‘near-future’ ideas were generated
  • Considering current trajectory of existing products & services, their influence was factored in as well, based on target outcomes
  • The quick, time-boxed exercises have generated plenty of opportunities for stakeholders to participate in shared understanding of what needs to be created, and prioritize them collectively on the fly.
mapping Goals of users & business

The key effort from UX (as facilitators) was to show Human-Centered Design process by blending the right amount of User goals with business goals to engage business colleagues.

title- artifacts & design brief
image-design brief sample

Articulating the Problem / Opportunity

  • Synthesizing the inputs from workshop participants & articulated into words
  • Design brief was drafted as a target goal to achieve – a shared understanding with everyone
  • Having a single source which clearly articulated the “What” we were looking to create & deliver to “whom” was a key milestone output
  • Within 1 workshop session, there was clarity as to what was a “recipe” to the ideal experience to deliver for the project. Those ingredients of the recipe were stated in point form within the brief, and were supported with workshop artifacts as to “Why“ that was.
  • Playing back results & findings from workshop sessions to stakeholders who were outside from the workshop teams and gathered their feedback

Everyone understood the “What” was to clearly to achieve.

The next step was to explore the “How”.

Albeit a draft and still open for iteration, this version of the brief offered everyone a target to strive for in many facets.

Since the key stakeholders were involved in arriving to this point, we had eliminated excess time wasted on traditional requirements document which can take weeks & months to prepare.

title-service design blueprint

Back-stage actors

There were tech stacks of systems & applications to consider. This phase where our tech leads were called on to go deep & narrow to flesh out the constraints & parameters which the project needs to consider.

Quite often the tech constraints clashed with the usability & business strategies. For this, it is imperative to map out and declare those needs & business rules in an open discussion.

On the front-stage, colleagues from customer service & business transformation / infrastructure were keen on easing the common pain-points experienced in the past.

 

UX research had shown in several countries that “set-up and pay for service” was an area where Machine-learning & smart systems can become a game-changer.

image-service design blueprint

Long-winded On-boarding & set-up processes were leading to painful UX for First time Users. The goal was to avoid this in the future.

title-working in lo-fi

Differentiating experiences from First time Users & regular Users – on-boarding, setting up…

Online (and real-time) collaborative tools like Miro enabled colleagues who were not co-located in the same office to be able to sketch & share easily.

Many were non-designers to take part in ‘ideation’ & co-creation facilitated by the designers in the various groups.

Exploring the solution space via Remote Studio

  • Cross-functional colleagues in co-creation workshop virtually – facilitated by UX designers
  • Design brief was reviewed & desktop research undertaken by all to bring artifacts as sources of inspiration & discuss why they were adding value
  • Various concepts were sketched out & presented to group with 1 chosen by all in the workshop
  • The lo-Fi designs were iterated based on feedback from group
  • Where possible, key screens were roughly created into Rapid prototypes with tools like InVision.

Before the end of the session, Rapid Prototypes were also created in InVision to help teams visualise the UI & the User flow with clickable screens.

title-fleshing out concepts

Interaction Design (IXD) to progress Wire-Flows

  • Lo-Fi designs enhanced to be Med-Fi designs with time from UX
  • Rapid Prototypes were also updated with Med-Fi designs and progressed interaction solutions to ensure the experience was meeting User goals, following IXD principles
  • Leads from Tech & product, infrastructure were consulted in the developing of the concepts, many drafts were iterated based on feedback.

Wire-Flows communicate efficiently on the User experience. They are the blueprint for the customer journey on all possible paths available including edge-cases in interaction.

Usability Test – Round 1

  • Using the Proto-personas mapped, we recruited real Users fitting the profile
  • WireFlows translated into Rapid Prototypes in InVision – as clickable screens
  • Usability testing (un-moderated) were done to validate approaches for 3-4 key experiences in the User journey
  • Feedback from Users from the sessions were used to enhance the designs for several iterations & tested again
  • Results were presented to Leads from Tech & product, infrastructure
image-usability testing

Fail Early, Fast, Often, and CHEAP!

If we were going to fail, we wanted to do that way early in the process (than later in development).

title-ux planning and roadmap

UX Plan & Roadmap Shared with Stakeholders

  • Once there was buy-in from all of  the key stakeholders across the countries, the project had wind in its sails. More than 9 key Context Scenarios mapped out from workshops to cover in UX
  • Breaking up the work into small chunks with key milestones mapped out for the whole year & beyond
  • Mapping of time & resources required for different disciplines in the process of IXD, VXD & testing
  • Planning was shared & refined with feedback from Leads from Tech & product, infrastructure, shuffling of tasks & timeline based on priorities from planning meetings

UX should be seen as a partner to Tech & Product, and NOT a sub-set to their own roadmaps.

image-roadmap in ux
photo-ux team

Ramping Up the Design Team

  • More XD designers were recruited with specialized skills in IXD & VXD respectively to handle the workload. On-boarding & training the team was essential for them to participate in User research & testing
  • 1 front-end developer was added to the UX team to serve the role of “Creative Technologist” to assist in creating custom HTML & javascript Prototypes
  • 1 UX intern was added with focus on Quantitative analytics & tooling for the project – whom I’ve also mentored & trained
title-deep dive into interaction

Iterating IXD (in Med-Fi) with Usability Tests

Context scenarios & use cases were mapped with further workshops & requirements extracted from them
From First Use to recurring use journeys & IXD were done following the individual requirements for each context scenarios & use cases mapped

 

First Time Use & Mobile First quickly became new catch-phrases within the orgs as a key experience to address well.

Rounds 5-6 in Testings with Users

  • Each context scenarios, use cases, edge cases were mapped out in WireFlows & RP
  • The RPs were tested with fresh panels of test participants and iterated with feedback for maturity
  • Fail Fast & Early – experiences which added value to Users were kept while ones which did not were changed or removed
  • Each failure meant lessons learnt – cost effective & fast as they were done early
  • Stakeholders were invited to particpate via observations & summary of results were regular
  • Heuristic assessments were done to ensure usability principles were applied. Users must be able to recognize & learn quickly with ease.
title-coded prototypes

Device Agnostic Responsive Prototypes

A front-end developer was invited into the UX team and had daily meetings and workshops to uncover common use cases & edge cases. This worked wonders as the silos were taken down and enabled the developer to think creatively to solve problems. Thus the title “Creative Technologist” rather than a front-end developer was our title for him for the project.

During the collaboration, we’ve uncovered the unforeseen interaction challenges with the Customization feature where Users build their own dashboards. The coded prototype (in Med-fi) help shine a spot-light to glaring issues with responsiveness & varying screen dimensions. Rules & helpful constraints for usability were reviewed, tested and applied.

It was key in fleshing out interaction edge-cases & even typical use cases where static screen prototypes were too limited…

Having advanced customisation being one of the key features to deliver, it clashed with fluid responsiveness most Users expect in using web apps.  A good level of responsiveness in mobile, tablet, laptop, and desktop was essential.

These prototypes were tested in various devices & screen dimensions which unearthed many unexpected challenges to address in interaction.

 

 

title-detailed design

Visual Design production adapting to IXD & Prototypes

  • With IXD & prototypes maturing usability working with Med-fi graphics, it was time to commence visual design for the final ‘skins’ of the product
  • Working closely with myself & IxD designer & ‘creative technologist’ in the team (a front-end developer as part of the UX team), Visual designer started creating patterns & components which are aligned to the company brand & its design system
  • Much of the visual designs made it into the mature prototypes for usability testing to validate
  • VxD (Visual design) had a big role to play in the responsiveness feature of the product which had mobile view as a key use case throughout the User journey
image-sample hi-fi design
title-moderated usability test

Testing the End-to-end Experience

  • I had coordinated the training, preparations, and lead the tests with the UX team – live moderated test with working prototype end-to-end journey from sign-up process to First-use
  • Highlight reel of video clips for easy consumption for stakeholders’ reviewFeedbacks / insights from Users were used for future feature ideas adding more value

Synthesis of the data gathered from each sessions together with all test moderators & observers to arrive to conclusions on the findings

Moderated tests provided us access to real Users with more time to understand them, and help us validate/invalidate key doubts.

Test results kept the UX team grounded. Feedback on our hypotheses on what works on usability humbled us sometimes order to make good design decisions.

title-translating the designs

Hand-over to Dev & translating the design

  • 35 developers & 8 QA colleagues were assigned to tackle the project in development– all of them have benefited from having the designers provided outputs on the IXD & VXD provide the translations on use of the designs & provide ongoing support
  • Toughest challenge – QA, Dev were unaware & untrained to best practices in collaboration with UX. Growing pains were expected frequently
  • A cultural change was taking place while everyone were all not co-located in the same office, continent, time-zones. To remedy this, the tech leads were invited to design end-of-sprint reviews consistently as well as designers being available in the Dev’s reviews.

Regular check-ins with Dev & tech leads was needed to communicate & isolate the gaps between the designs delivered and what was being coded.

image-UX collaboration with developers and QA

Assets & Guidelines to the Design System For Re-use

  • All of the interaction design flows, user journeys, Prototypes & rules, UI patterns were ready to be shared with the countries’ own local teams
  • The documentation & components/templates made available to all teams in Europe looking to adopt the the solution for their projects
  • Enablers of re-using patterns & components without starting from scratch, and leverage the lessons and insights gathered from the project team with User research & usability tests
  • Enabled European countries to have that consistency across the brand for the same solutions they were looking to offer to their local markets

Co-opting QA was also key as they saw value in UX’s artifacts of Context scenarios & use cases already articulated in Design sprints.

 

title-continuous learning prep

Adding Quantitative research to Qualitative

  • Quantitative research required In-App behavioral data of 6 months from the product being made public –the right priming & setup was required
  • As part of the UX roadmap, the Machine Learning specialist in the UX team interviewed & collected the business needs from the top 3 countries ‘ orgs. This report was used to seek & assess the prospective vendors such as Pendo & Amplitude to enhance our quantitative data gathering
  • The technology we look to leverage in getting us data needed to be aligned with the goals of cross-functional colleagues especially in product, marketing & sales.

In-App behavioral data collected in the background of a live product would provide an extra dimension on usability to UX teams (and orgs) to add on top of qualitative data they gather from research.

image-sourcing 3rd party apps for continuous learning passively