Delivery of survey platform lifepointspanel.com version 1

4 years ago

Kantar Group - Lightspeed Research

Case Study - UX issues on the delivery of survey platform

About

Drupal CMS portal survey solution "One platform"

As UX manager performed the following roles, tasks for MVP version of lifepointspanel.com. Although there was great deal of groundwork done on the UX design, a few months later the design was taken over by another Kantar UX team. No UI specifications. No mobile testing. To give the product a good chance of mobile responsiveness i introduced bootstrap UI framework to the build and implementation. I worked with TPM’s. PM, Content Managers, DevOp and Tech leads to develop build, production and deployment strategy.. A Drupal CMS and PaaS with microservices handling authentication and managed user surveys.

/projects/delivering-strategy-and-leadership-cms-ui-development-and-devops-production-cycle

Roles and deliverables

  • Business requirements, analysis, and recommendations
  • Manage stakeholders
  • Production Strategy - Development, production and deployment - work/ advise TPM’s / Tech Leads / Designers / Content Manager
  • Heuristic Lean UX / IA - taxonomy/vocabulary workshops, presentations
  • UI design mentor – UI brand guidelines, UI technical specifications build
  • Create UI designs for new features - Wireframing. Rapid Prototyping - Proof of Concepts
  • Bootstrap 4 HTML, SASS/CSS, JS
  • Content strategy for community section for over 30 countries and language translations including UI
  • Drupal architecture - User workflows for editors and super users
  • Organic SEO
  • Advocate Accessibility – present proof of concepts for better UI
  • Lead advise front end development with decoupled solution
  • Easy, simple “How To” use guide on all content on the platform
  • Content Workflow
  • UAT Mobile testing strategy / matrix

workshop and presentation production environment maps, flows and diagrams, for TPM, PM's and PO's

Illustrating to TPM's, PM's and senior developers where in the layer stack the UI design is implemented

Drupal Front-end and Site Building flow

Describing the user flow for accessing and editing content in Drupal CMS, each section, UI components can be accessed and subsequently translated

business experience - editorial content flow

Workshop diagram for HCL developers on Drupal front-end (theme) a bootstrap UI framework

How bootstrap is implemented as a sub-theme using a set of pre-configured templates to source and then customise.

how to use bootstrap UI framework in a Drupal environment

Scheduling for country deployment

how to use bootstrap UI framework in a Drupal environment

Through a series of workshops which included product, marketing and content managers as well as UI designers to flesh out content strategies and the information architecture. 

UX team card sorting and building help site map 

how to use bootstrap UI framework in a Drupal environment

Taxonomy / IA creating links for community section of articles

how to use bootstrap UI framework in a Drupal environment

IA - Brainstorming new features for surveys/polls gamification in an exercise for user engagement.

taxonomy - vocabulary

Mapping the UI designs from PPT with lo-fidelity wireframes, Invision /Sketch hi-fidelity wireframes only desktop layout, to a bootstrap UI (mobile friendly/responsive UI) within a front-end development layer of Drupal CMS (PHP/TWIG/HTML/JQUERY/CSS) and configuring Drupal CMS to allow business or content authors a simple User interface to CRUD content and translate UI components using a editorial workflow system. Importantly using Drupal CMS best practices to develop modules and front-end or UI theme .

Examination of first set of PPT lo-fidelity UI design wireframes created by director of UX and a senior VP a second redesign, see this project for notes.

Desktop wireframe

how to use bootstrap UI framework in a Drupal environment

Mobile wireframes

how to use bootstrap UI framework in a Drupal environment

Member session, surveys

taxonomy - vocabulary

No UI specifications to work from to develop the front-end UI except for some UI designs on invision platform. 

Other methods of delivery of the UI design were HTML templates using bootstrap, unfortunately the design did not conform to best practices and how it could not be developed directly into the theme.

The UI designer did not deem it important to understand the technology used, this cost days, weeks of deciphering badly delivered UX work.  

First quick UI concept for first profiler mobile first

How to edit homepage

An HTML template 

business experience - editorial content flow

UX designer's "UI design specification guide" fell short some 90% of a proper document

business experience - editorial content flow

Configure CMS and connecting Editor User's Experience simplyfing the how content is edited. A content type is created with a WYSIWIG interface editor to CRUD (create, read, update, delete with allowance drupal tokens(a method of retrieving stored data from drupal and secure)) with additional data fields for storing and displaying images. 

Site building - super admin rights to setup the template, a finished view

rewards page

First block ready for its many translations

WYSIWIG editor

An editors views of the the block content-type

fixed branded CINT forms

UI SASS/CSS TWIG Bootstrap UI framework. Mentoring UI developers to work with compiling CSS using SCSS partial files, how to create variables, nesting elements and creating TWIG templates. 

Many colour variables

How to edit homepage

TWIG template for cookie banner

business experience - editorial content flow

Using CSS to target and translate

business experience - editorial content flow

Some countries require a generic sans serif font to present languages correctly demographically using GEOIP tools to target correct translated content. From a UX perspective I reminded the product team that countries will have ethical values on how people are portrayed visually to them. No offence. Some ethnographic research also for translations. Many non european languages will need like Vietnamese will need to be locally translated, for example.

Correct display of font, Turkish

UI Layout Guide

Vietnamese

fixed branded CINT forms

Using VPN's to test langues is correct per geographic region

fixed branded CINT forms

Mapping IA. Content CMS configuration/site-building. Best practices easily understood naming convention for both content editors and developers to follow.

Mapping content

How to edit homepage

illustration of cookie consent form for every new survey

business experience - editorial content flow

Product transparency through documentation for content editors who control the content. A "how to" document, in conjunction with developer documentation

"How to guide" homepage

How to edit homepage

AxureRP HTML

business experience - editorial content flow

UAT user acceptance testing - Many UI bugs, fixed for production. Issues from UX team html templates being incorrect

Issue with login form sizing

form is not displaying modal form correctly on ipad

Margin issues

business experience - editorial content flow

word-break and containers issues

business experience - editorial content flow

Implementing a work around fix for issue with pop-ups being blocked on browser mobile and desktop

The issue, alert window what you need to do

How to edit homepage

working on HTML template on mobile using modal

How to edit homepage

Implemented alert

business experience - editorial content flow

Drop-Off analysis, browser issue by country checks

Quick overall report

How to edit homepage

Identifying drop-off by device on user conversion rates

business experience - editorial content flow

Checking browser usage 

business experience - editorial content flow

I was unable to prevent accessibility issues highlighted to the UX team and stakeholders during development, the importance of consistency and user access for everyone. A major issue for me was that the UX team did not take a mobile-first approach. For this reason, I insisted on the use of a mobile front-end UI framework, Bootstrap and by default use accessible UI components, grid layout with mobile functionality.

Part of my advocacy for UI accessibility is colour, font size, and iconography. That meets recognised industry levels such as AAA (UK accessibility) and AA (USA). Globally, AA is acceptable in this case.

A post production design strategy for dealing with drop-off was developed and through an iterative process implemented.

Taking some focus form the Adobe analytics the most important CTA for first time user, "First profiler" the design has poor accessibility values and does not engage the new user, seemed a major design issue.

Mobile view of CTA

A series of low contrasting CTA's didn't meet any accessibility levels

Concept 1 mobile view using a darker background

How to edit homepage

Concept 1 desktop version

How to edit homepage

Concept 2

How to edit homepage

A series of low contrasting primary CTA's didn't meet any accessibility levels nor secondary lists

featured survey

A series of low contrasting CTA's didn't meet any accessibility levels

survey list

How to edit homepage

Introduced the UX team to contrast checkers that they should work too

contrast checks

A series of low contrasting CTA's didn't meet any accessibility levels

contrast checker

How to edit homepage

contrast checkers

How to edit homepage

Advised on new UI design layout to meet AA level by reducing number of colours and with the remainder adjust fonts sizes, colour and new edition of icons.

Icons were converted to fonts which meant sizes of graphic was tiny and colours of them could be changed easily with CSS code. New icons were introduced as a data field on taxonomy type for survey company, a new feature. 


From a set of 5 colours now i created a sequence of alternating colours, for 3 section lists, featured surveys, ongoing surveys and surveys. 

  

Featured survey

A series of low contrasting CTA's didn't meet any accessibility levels

Ongoing surveys

How to edit homepage

Surveys

How to edit homepage

Develop and implement front-end template for Cookies per survey UI layout

Jira ticket for job

A series of low contrasting CTA's didn't meet any accessibility levels

New UI template

How to edit homepage

clients

latest projects

shouts