The feedback from support and training staff was that users were finding the UI complex, confusing, slow to use and difficult to learn.

I was the sole UX/UI designer in an Agile team of 4 developers, a product owner, and a system architect. I was responsible for determining the overall design direction of the project, while collaborating with the rest of the team on ideation.

User interviews and observation of users carrying out tasks confirmed that even experienced users spent time searching for controls when arriving on a new page and that new users had difficulty with tasks even after training.

I analysed the code structure; I found limited stylesheets attempting to replicate Bootstrap.

The first application module identified by the CEO to improve was the Task Version Editor.

Looking at similar application UI's, MS Powerpoint was identified as having similar requirements, and it was decided to use that as a model for the UI update.

I carried out an heuristic analysis of the current UI.

From the results of the analysis I hypothesized that the difficulties users were encountering was due to lack of consistency in the control positioning, styling and use of colour.

A set of usability goals was developed from the results. These were:

Memorability, effectiveness and efficiency.

Memorability - Once users have learned how to use the product, can they remember how to carry out tasks, especially for fuctionality and operations they use infrequently?

VisualFactory users tend to be long time users, who use the product regularly, but with significant breaks in usage. Therefore its very important that it's easy for users to remember how to carry out tasks rapidly and efficiently.

Effectiveness - Is the product capable of allowing users to carry out their work efficiently?

VisualFactory is a critical tool in reducing errors and ensuring high quality in production. It is thus vital that it supports users in carrying out their work efficiently.

Efficiency - Once users have learned how to use the product, can they sustain a high level of productivity?

VisualFactory process instructions are essential to production efficiency and are authored by high value engineers. It is crucial that instructions can be authored as rapidly as possible.

The next step was to wireframe out all of the module, using the PowerPoint model for the UI design, and taking into account the user information provided by the CEO.

The resulting designs were converted to HTML/CSS prototypes, using Bootstrap components with custom designed overrides. Tested and updated with feedback from users and cross browser issues addressed.

Meanwhile the CSS structure used with the whole Portal application was optimised, adding Bootstrap and removing the inline styles. A new vector icon set was integrated into the application.

Modular Pattern Guide for the Dev Team

With these larger elements defined, the style/ pattern guide began to be authored, and the system typeface and colour palette updated.

To improve branding and consistency, to improve product trust, the product documentation was now restyled to match the UI system.

The core elements were now built up into modular navigational blocks, such as toolbars, libraries with navigational trees and tabbing blocks.

The Portal design, main menu responsive behaviour, header, logo, tables and table rollover behaviour was now updated to improve aesthetic appearance, consistency and clarity.

Tables within the system were upgraded with integrated scrolling to improve pagination using a custom directive. This was later upgraded with ui-grid, with similar custom scrolling, but utilising the extensive functionality available.

A support site for VisualFactory was now developed. The UI system was able to be plugged directly into the this Angular application, providing a consistent UI and branding experience for users and customers.

Iterative improvements of standards continued, with the introduction of an error message module.

Insights from studies conducted by key industry players (Autotrader, Cox automotive) indicated that car sales would move online more and more over the next few years.

An Autotrader/Kelley Blue Book report on the Car Buyer Journey, from as long ago as 2016, showed buyers were spending nearly 60% of their time online when buying a car, and over half of those buyers only test drive one vehicle.

This begs the question: why make them go to a showroom?

2016 Car Buyer Journey Report - With thanks: Autotrader/Kelley Blue Book

As a result the New Media team was tasked with improving the car search on the Listers website, followed by the development of online purchasing on the Listers website.

These were large projects and required a shift to a user-centric, solution-based development process and a change in mindset and culture to match, to adapt to the coming changes. These projects differed as the first was an upgrade to an existing feature, while the second would be a new product.

Both would require evaluation techniques, while the second would also require methods to identifying user needs and establishing requirements.

Develop a user centred design process involving all the required Lean and Design Thinking techniques along with associated tool kits.

Introduce it into the workflow of a busy development team, at the same time changing team mindset and culture to the 'define and measure' Design Thinking loop.

I was the UX lead in a cross-functional team of 8, bringing together people from development, SEO and design.

The approach I took was to break the change down into small, clear and achievable goals, built around several projects as they moved through the workflow. Use each project to incrementally add new tools, and improve existing tools in the tool set to provide accurate and meaningful metrics.

The incremental process would allow the team to understand the advantages of the approach, and gain the skills to use the different tools effectively. Most importantly, it should get team buy-in to the change in culture and mindset.

The final goal was team mindset, culture and process to completely embrace the Design Thinking loop of:

Rapid feedback that incremental changes have met real business objectives.

What was needed was to understand the situation, demonstrate ways of measuring it, and use these to control it. Essentially gain development time to do the important things, by using measurement to do them more rapidly but also to use it to recognise the unimportant things and cut them out.

Business strategy, design direction & team management. I was responsible for determining the overall direction of the business, as well as design direction, sales and team management.

I analysed the code structure; I found limited stylesheets attempting to replicate Bootstrap.

The first application module identified by the CEO to improve was the Task Version Editor.

Looking at similar application UI's, MS Powerpoint was identified as having similar requirements, and it was decided to use that as a model for the UI update.

I carried out an heuristic analysis of the current UI.

From the results of the analysis I hypothesized that the difficulties users were encountering was due to lack of consistency in the control positioning, styling and use of colour.

A set of usability goals was developed from the results.

The next step was to wireframe out all of the module, using the PowerPoint model for the UI design, and taking into account the user information provided by the CEO.

The resulting designs were converted to HTML/CSS prototypes, using Bootstrap components with custom designed overrides. Tested and updated with feedback from users and cross browser issues addressed.

Meanwhile the CSS structure used with the whole Portal application was optimised, integrating Bootstrap and removing the inline styles. A new vector icon set was integrated into the application.

Modular Pattern Guide for the Dev Team

With thes granular and larger elements defined, the style/ pattern guide began to be authored, and the system typeface and colour palette updated.

To improve branding and consistency, to improve product trust, the product documentation was now restyled to match the UI system.

The core elements were now built up into modular navigational blocks, such as toolbars, libraries with navigational trees and tabbing blocks.

The Portal design, main menu responsive behaviour, header, logo, tables and table rollover behaviour was now updated to improve aesthetic appearance, consistency and clarity.

Tables within the system were upgraded with integrated scrolling to improve pagination using a custom directive. This was later upgraded with ui-grid, with similar custom scrolling, but utilising the extensive extra functionality available.

A support site for VisualFactory was now developed. The UI system was able to be plugged directly into the this Angular application, providing a consistent UI and branding experience for users and customers.

Iterative improvements of standards continued, with the introduction of an error message module.