Case Study

SaaS Workspace for FinTech

Company

Wolters Kluwer, Tax & Accounting Europe

 

My Role

Thought leader for  UX in TAA

Lead Interaction designer

Head of UX, Cloud Strategy Operations

Achievements

  • By “showing as well as telling” the methodologies, the efficiency & value of UX / Interaction Design (IXD) were convincing to functional leads. This led to a new perception on what UX was to key executives in the organizations
  • Staff hiring and skill-set around UX & IXD had been through a massive upgrade since
  • Rate of frequency & quality of usability testing for this project 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 abstract to conceptual designs, assisted the group in formulating the target brief & shared understanding via Design Thinking & Goal orientated design methodologies
  • Led the UX managers in Europe providing fact-based User Research
  • Led workshops to flesh out the required context scenarios & requirements
  • Coordinated the required usability testing which used Design Thinking & 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…

Legacy culture in bullets

Note: The above company culture was one of the biggest challenges to face. It was a path we couldn’t afford to take anymore, moving forward.

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 UX flows into UI

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

sample proto-persona board

Previously the User persona task was outsourced to an external agency which treated it like market research with demographic generalizations which served little value today, especially after a 5-year shelf life.

Persona boards are not one & done exercise, rather an operational responsibility 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.

More reading on creating Proto-Persona boards can be found in this dedicated blog post on the topic.

secondary and customer 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 Start

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

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.

mapping Goals of users & business
future-state-journey-mapping
title- artifacts & design brief

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
flow of design brief generation

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 can eliminate excess time wasted on traditional requirements document which can take weeks & months to prepare.

At high level, the brief had 3 key promises or deliverables for the User – 2 of them focused on quality of usability while 1 was to help drive profitability.

Everyone understood the “what” clearly to achieve; the next step was to explore the “how”.

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

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

image-service design blueprint
title-working in lo-fi

The solution space via Remote Studio

  • Cross-functional collegues in co-creation workshop virtually – facilitated by UX
  • 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.

Online collaborative tools like Miro enabled colleagues who were non-designers to take part in ‘ideation’ & co-creation…

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

image-wireflow in lo-fi
image-wireflow lofi

 

Mapping out when & how Users will create their Dashboards, and how they’ll populate it relevant content themselves…

 

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 communicates efficiently on the UX & 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 resourced & recruited real Users fitting the profile
  • WireFlows tranlated into Rapid Prototypes in InVision – clickable screens
  • Usability testing (unmoderated) were done to validate approaches for 3-4 key experiences for the product
  • Feedbacks from Users from the sessions were used to enhance the designs for several iterations & tested againLeads from Tech & product, infrastructure, shuffling of tasks & timeline based on priorities from planning meetings

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-medfi wireflows
image-usability testing
title-ux planning and roadmap

UX Plan & Roadmap Shared with Stakeholders

  • More than 9 key Context Scenarios mapped out from workshops to cover in UX – one of which the “First Time Use” was used in the proof of concept from the workshops
  • 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

 

It was strange for some stakeholders to see a roadmap from UX as they’re thinking from a legacy culture mindset…

 

 

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 them with some training given as they were all expected 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
  • 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

image-med-fi wireflows
image-first time use

 

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

 

 

Heuristic assessments were done to ensure usability principles were applied. Users must be able to recognize & learn quickly with ease.

Rounds 5-6 of 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
image-userzoom test report
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.

For complex software design, having Lo-Fi coded prototypes was key in fleshing out interaction edge-cases & even typical use cases where static screen prototypes were too limited…

 

Guidelines for coding & rules, constraints on the UI were created for best usability.

 

 

These prototypes were tested in various devices & screen dimensions …

image-coded prototypes in wireframe
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, 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 had a big role to play in the responsiveness nature 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’ve 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
image-research systhesis

 

 

Validated key doubts, hypotheses on usability in order to make good design decisions

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

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, a cultural change was taking place while everyone were all not co-located in the same office nor in the same continent nor time-zones. To remedy this, the tech leads were made sure to participate in 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 & isolsate the gaps between design & Dev.

assets to the design system

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

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 9 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
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
  • Also the tech we look to leverage in getting us data needed to be aligned with the goals of cross-functional colleagues especially in product, marketing & sales along with UX designers – across the 9 countries

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