Managing the delivery of new UI design for lifepointspanel.com version 2

3 years 5 months ago

Kantar Group - Lightspeed Research

Lifepointspanel.com Version 2

A new UI from UX team. Some of the concepts I had presented to stakeholders and TPM’s had some influence the products team on iteration 2 or version 2 of lifepointspanel.com, such as registration steps, “too many colours” for example.
No technical UI writing or specifications only HTML. It came in sporadic pages which were then implemented with additions of Material design CSS styles to the existing bootstrap UI theme. It was a strange scenario as the pages trickled in, with no best practices or using prior data to examine and deal with UX drop off features. A new branding for the UI but no new brand guidelines meant too much time was spent unravelling the UI spec through the HTML pages handed down fixing conflicts. The UX team did not adhere to the current UI framework due to ignoring the way you apply styles through SASS and CSS, despite being reminded LESS was using which uses a different set of SCSS partials in its style.css compilation.

Deliverables
  • Discovery phase - Examine designs - features - case stories to connect to development team – non-technical to technical specifications
  • Sprint planning - tickets / backlog sanitisation
  • Easy, simple “How To” use guide on all content on the platform - updated
  • UI Team Lead, mentoring
  • UI components, Icons, Typography, Accessibility
  • Drupal Theming, UI Engineering - bootstrap UI framework TWIG, HTML, SASS/CSS, jQuery
  • Drupal CMS E-Commerce Platform configuration

Roadmapping the new designs to be implemented 2nd iteration

lpp2

highlighting UI issues with consistent UI icons and the layout

UI issues - consistency

highlighting UI issues with consistent UI icons and the layout

UI consistency

highlighting UI issues with consistent UI icons and the layout

UI consistency

 


UX Notes
  • From my early rallying or advocacy for better UX from version 1, the product teams new design UI layout was improved greatly, i was as were many others confused as why the colour scheme had changed so radically. They had dealt with ;
  • cookie notice - text has been compressed by removal of a paragraph, but not needed, as per my PoC, perhaps to extreme. The Product team seemed focused on what the experience looked like rather than dealing with its functionality issues first.
  • From my XP i could tell that the design was a template that was lifted/borrowed and redesigned, this was apparent when the Material UI kit was not used correctly with Bootstrap.
  • Trustpilot was used home template. During pre-sprint planning i pushed back on this as it used no trustpilot API, so we had no legal way of using these static testimonials from trustpilot. (it took a year for them to resolve this)
  • new UI reg form was unusual behaviour. Desktop the form shifts to right of the screen with no user info like number of steps
  • mobile version of the form showed steps but asked the user to click twice to get there.

 

UAT with variety of local simulators

UI consistency

clients

shouts