Managing business user experience, Drupal CMS as PaaS solutions, UX consult and train

5 years 8 months ago

Kantar Group - Lightspeed Research

Case Study - Managing the business experience between two clients

About

I worked for Kantar as a UX Manager with SaaS and Drupal CMS experience through HCL for several months. This became a hybrid role, filling in for the product and development team where I was needed. I worked for 2 years and 11 months, not wanting to renew my contract.

Although working for Kantar, I had to at the same time work for HCL in helping their offshore Indian development team work with a Western team of TPM's,product managers, and content managers,aiming for transparency and inclusion both for business and developers, and successful implementation of any of the products.

The team is global, with Kantar taking up the leadership, development and DevOps, spread throughout the US, Canada, and the UK. Drupal development is taking place all over India.

There were many long hours and very late evenings. offshore development team works a strict 9–5 policy, and they didn’t do flexible hours. They also synced their routine to UK hours, working GMT 9–5. So, in India, they go home at around 10 pm.

This work ethic from both parties made it difficult for me when the first release of lifepointspanel version 1 was going live, over Christmas, ready for New Years. In my experience, hours will always be extra at these critical times; it's a professional given. I had to step in for the development team on many occasions on development issues with Kantar lead developers, UAT leads, and TPM’s.I also had to also decipher the mess of UI designs coming from the product team in the US.

It meant I became almost solely responsible for the delivery of the platform going live, with a team of over 20. That doesn’t look good on the books, so steps were eventually taken to make sure that didn’t happen again by Kantar, through some sort of change management and better collaboration directives.

For the first few months, I worked directly with the marketing manager. I gathered requirements, analysed, and recommended several solutions with the collaboration of the UK product team.

However, due to CTO leaving, US and UK cultural bias, and other factors, the UK product teams were switched to Kantar’s other US product team.

I worked then under the technical director, now CTO US based. My directive then was to continue what I’m doing to deliver the platforms. At the onset, building trust meant daily reports which detailed what Jira tickets were worked on, the UI design, the UI lead, and the attendance of 100’s of meetings, highlighting serious issues in production and personnel.

Meetings with attendees of over 30, over 60 at some points. I believe that we all need to feel comfortable so we can extract the most from each other for the good of the product and its value.

I worked at removing hierarchical barriers during team encouraging seniors and developers (mid gto juniors) to provide input into the conversations. Many UI and production issues can be spotted first when developers are coding and are the first to see how it works and looks connected together on their local machines. As well as having a comfortable working environment, big savings in costs are made here.

Through the regular updates to CTO some change management began to take place

Saving money. What could have been a very costly mistake from Kantar legal about the GDPR. I managed to intervene, saving the company thousands from the unnecessary technical requirements. A few instances like this, another involved, like Trustpilot references and listing on homepage.
 

I wrote how to documentation for Kantar on how to implement new content using Drupal and bootstrap components also product cycle material to help with writing the definition of done document, so that stakeholders (without the tech knowledge) could understand

Roles

  • UX Manager reporting to UK marketing manager
  • Business requirements, analysis, and recommendations
  • UX / IA workshops, presentations
  • UI design mentor – UI brand guidelines, UI technical specifications build
  • Create UI designs for new features
  • Content strategy for community section
  • Content and UI translation CMS strategy
  • Advocate Accessibility – present concepts for better UI
  • Easy, simple “How To” use guide on all content on the platform
  • Consultant reporting to US Kantar CTO
  • Advise on UI design and implementation
  • Advise on blockers
  • Advise on Drupal best practices
  • Development updates
  • Part of a team which assessed validity of business features
  • Sprint planning
  • Advise on production deployment cycle
  • Help create a document for the definition of done.
  • HCL Drupal architect, consultant, UI team lead and mentor
  • Consult to HCL Kantar account managers
  • Manage development transparency, BX or business experience
  • UI Lead
  • UI Lead - teach bootstrap and drupal UI framework
  • Daily SCRUM - help with issues
  • DevOps setup productions environments

Deliverables

  • 4 platforms were produced each is a separate project linked in the list
  • One Platform - Lifepointspanel.com PaaS Drupal CMS - version 1
  • One Platform - Lifepointspanel.com PaaS Drupal CMS - version 2
  • me.lifepointspanel.com Middle eastern version of lifepointspanel.com PaaS Drupal CMS
  • All Global Circle a medical research platform PaaS Drupal CMS
  • Vice Voices publications platform PaaS Drupal CMS (they pulled out of lightspeedresearch producing their platform)

 

 

Introduced AxureRP to the UK based product team to make a collaborative effort on first steps of UX design, working on the information architecture to produce first lo-fidelity mockups,fleshing out the user stories, user flows, UI components, UI messages, UIpage, sitemap, UI wireframing

The product manager producing great story and flow with AxureRP

Drupal Front-end and Site Building flow

Piecing together wireframes and concepts with AxureRP

business experience - editorial content flow

First concepts

Drupal Front-end and Site Building flow

First concept member page

business experience - editorial content flow

Already have an account user login

business experience - editorial content flow

When creating UI's we look at ethnographic targets, typical behaviours. This led the UK product team to favour a more social dynamic feel to the new platforms UI design and layout.
UX team development, fun polls for community section and enhance user engagement.

member landing page AxureRP UI Concept

Drupal Front-end and Site Building flow

fun polls built with drupal UI concept

Drupal Front-end and Site Building flow

Now that the UI design was coming from the US product team, i could only advocated on a number of UI issues, that did not involve any AGILE methods of test-first, user testing process (iterative design) nor follow any regular established UI patterns

A number of registration issues occurred during the form registration process brought to attention through Adobe analytic tools. I'd made some suggestions to the product teams, to consider redesigning the registration form, as a priority during production as soon as the US design team released them on Invision.

A well designed UI form needs as less cognitive load as possible and be fully accessible, so re-examining the user experience, the user story and sequence, a stronger UI design. In a nutshell the UX at this critical juncture, will either fail or succeed the brand, the product registration had indeed failed for several months until a LPV2 was released.

By the design the form is split into 4 sections, but coded into a single form, so fields can be switched in the TWIG template without any need for back-end(database) changes. Importantly placeholder text is written. Some of the error messages on the form and elsewhere on the platform needed much revision. The grammar was not well written and in some cases could be considered rude.

How to write messages by Apple

business experience - editorial content flow

Where an error message should be

business experience - editorial content flow

The user journey is uncooperative, waiting for the user to make mistake, rather than assist the user with "tooltip or hints," when all fields are mandatory. Questions that require a user to be a legal age should logically be step 1. GDPR should be included in the UI flow not forcing a user away from the registration form to open another new window to read then GDPR. Bad practice as it gives the impression that GDPR is not that important as you can just select the checkbox.

There are 4 steps not indicated to user

Drupal Front-end and Site Building flow

First concept member page

business experience - editorial content flow

Already have an account user login

business experience - editorial content flow

The user must go to another landing page for registration. Highlighting how you can use the page to hold other relative content so user can be prompted to what they are doing if they walk away and come back to the form, with user less cognitive load in mind. VP's and community content to increase user engagement.
A couple AxureRP UI layout concepts presented to product team. Colours extracted from brand colours and inherited from the cookie policy form, which i had designed and implemented. UI elements using material design CSS for input fields and merging with bootstrap

Static VP blocks

business experience - editorial content flow

VP block and upselling other content values

business experience - editorial content flow

VP's and marketing

business experience - editorial content flow

Gestalt's theory of perception, symmetry, and continuity. Iconography and colour, when used appropriately, help users form a natural visual logical pattern, reducing cognitive loads and keeping them engaged.

iphone 8plus mockup

business experience - editorial content flow

responsive top-fold UI engagement

business experience - editorial content flow

4 steps with icons

business experience - editorial content flow

Third of the conceptual models. 2 steps on tablets or on mobile landscape version. Achieved by using media queries

2 steps UI layout

business experience - editorial content flow

Re-organising the fields to a more user logical order. Step 1 age restricted, not step 2. So verify your age

Age verification first

business experience - editorial content flow

Tooltips and error messages

business experience - editorial content flow

GDPR Agreement, scrollable terms UI

business experience - editorial content flow

Offered a couple of conceptual fix's to the UI layout of the cookie banner issue. It covers the UI port completely. Advised to re-word the content message and edit the grammar correctly will help with real estate space.

The issue on mobile

business experience - editorial content flow

re-word the banner text

business experience - editorial content flow

half an half UI on mobile

business experience - editorial content flow

Remove text completely

business experience - editorial content flow

Designed a web notice block to carry important news, like maintenance times, survey outages.

Data flow using Drupal

business experience - editorial content flow

News notification banner

business experience - editorial content flow

Illustrating the issue with GDPR and Kantar legal wanting to hold GDPR static pages elsewhere unknowing that the platform is Drupal and can do the same, instead of using a third party.

Data flow using Drupal to render the GDPR

business experience - editorial content flow

Platform One is not a single design, but rather a collection of internal collaborative individuals with specific expertise who work together to create it. Most of those individuals work on software, not web applications or just with the huge DB's. Surveys are from third parties, so portal websites are some 15 years old. There was no solution architect or product designer to strategize and roadmap the full production cycle, so production and implementation took several times longer than an agency would. Lifepointspanel.com web portal is part of a decommissioning of the Lifepoints App, which complained about lack of engagement and general bad user experience.

As part of the document "definition of done", I had an opportunity to outline the product cycle by example, bearing in mind this was specifically for those involved in any product development going forward, like TPM's Lead UAT, product team, content team, and development teams. I included iterative design methods, device testing methods, and UX design with Bootstrap UI framework for UI design and Drupal CMS content development. The examples are for the state that i saw the team in at that point

I had presented parts of the product cycle strategy, but in parts and brushing over some prerequisites, due to time. There were no AGILE methods actually being practiced within the product cycle. User testing in AGILE a "Test-first" process always highlight issues immediately. In this case major issues were only highlighted at UAT or even production / live stage, no development stage strategy.
In the diagram for any new product feature or function requiring UI design i've added test, fail and pass as an iterative cycle, before it reaches development.

A product cycle diagram

business experience - editorial content flow

How to develop UI's with a mobile first approach sketching

business experience - editorial content flow

How to develop UI's with a mobile first approach lo-fidelity modelling/wireframing prototyping

business experience - editorial content flow

clients

latest projects

shouts