Auto Tech Review Tool

Summary

The Auto-Tech Review Tool is a chrome extension designed and developed in collaboration with a Product Manager, UX Engineers and Front-End Engineers at Wunderkind to be used internally by designers during design live tests on clients' site with the intent of optimise the efficiency of the review process by empowering designers with technical tools and resources to catch and fix errors.

As a UI/UX Designer, I analysed workflows, identified challenges and opportunities through detailed research, and conducted workshops. I then collaborated with stakeholders to brainstorm solutions, considering collected insights, resources, feasibility, and deadlines. Finally, I used these insights to design and refine a prototype, improving the UI to meet expectations.

Objective

This project aimed to enhance our workflow through prioritising engineering tasks and managing time more effectively, allowing designers to conduct technical tests on live designs independently. This approach guarantees the maintenance of our high standards for quality and consistency. Moreover, it presented an opportunity to refine our workflow by seamlessly incorporating technical reviews into the design process itself, markedly improving delivery times.

the Problem

During my regular sync with the UX and Front-End Engineers, a few of the concerns discussed were about the high volume of tasks related to the technical check for the live design and the frequent common issues that were flagged.

Understanding the problem

The journey began with a deep dive into discovery, focusing on understanding the existing challenges within our design review process. This phase was crucial for setting the direction of the project and ensuring its success.

Document Analysis: Reviewed existing documentation, guidelines, and workflows to identify gaps and areas for improvement.

Task Analysis: Conducted a thorough examination of the tasks involved in the design review process to pinpoint inefficiencies and bottlenecks.

Tool and Process Evaluation: Assessed the current design review tools and processes against established usability principles to identify shortcomings and areas where enhancements were necessary.

Affinity Diagram

Some of the process pre and post design was included in this list, and the intention was also to automate most of this list by using our solution.

Discovery Workshop

As second part of my research, I prepared a discovery workshop with designers and engineers aiming to explore and uncover pain points, challenges, and areas of improvement by gathering insights.

Goals

To understand the current challenges, pain points, and roadblocks faced by designers and engineers in their workflows.

To identify any gaps in tools, resources, or processes that are hindering efficiency and productivity.

To gather suggestions and ideas for improvements or solutions that can address these challenges.

Workshop Structure

Two separated workshops between designers and engineers to find some trends on what's currently missing or challenging during the design live test and why.

I used FigJam to conduct the workshop by let participants using sticky-notes to share their thoughts and emojis to vote at the end.

Last, I gathered and re-organised all the informations based on priority, in a more manageable way that could be shared with the Product Manager and Engineers.

Research Questions

Each individual had the opportunity to use five minutes and share their insights by using the following questions as reference:

For Designers

Which tools do you use most frequently during live testing, and what are the biggest limitations of these tools?

What are the most common challenges you face during live testing? How do these impact the quality and efficiency of your work?

Have you encountered any technical constraints that limit your ability to execute designs as intended? How do you currently address these issues?

Do you feel you have adequate knowledge and support to handle technical issues that arise during live testing? Where could you use more help or resources?

For Engineers

What technical challenges frequently arise during the live testing of designs?

Are there tools or technologies that you believe could improve the live testing process?

How do you address issues related to code compatibility and CSS overwriting during live testing?

What process improvements would you suggest for more efficient and effective live testing phases?

I used all the data collected, summarised it and re-organised it before sharing this with the Project Manager and UX Engineers for our brainstorm.

First insight

Based on this first round of data collected, my first inBased on the initial data, it's clear that recurring issues stem partly from designers not identifying or recognising problems. Designers seek faster access to our JIRA checklist for self-reviews and easier access to documentation for quick fixes without relying on engineers. Delays in communication, particularly during peak times, extend delivery schedules, often resulting in rushed updates.
sights was that some of the issues flagged by engineers was coming up often and in some case because designers didn't spot it but in some othjer case this because designers didn't recognise it.

Brainstorm

In our initial brainstorming session, we merged my collected data with the feasibility evaluations from the UX engineers. This session culminated in identifying key challenges that shaped our approach to developing the prototype:

Integration Location

Integrating the solution was complex, as it required unifying Ember.js with the new React-based design platform without involving extra teams or delaying the project.

Testing Limitations

Certain tests were impossible within the client's environment, necessitating on-site testing to ensure our design's CSS and responsiveness remained intact.

Resource Centralisation

Integrating the solution was complex, as it required unifying Ember.js with the new React-based design platform without involving extra teams or delaying the project.

Verification Approaches

We incorporated both automated and manual testing methods to enable thorough quality assessments by designers.

Scalability Focus

A key goal was to create a scalable solution that could be easily updated.

Documentation Effort

We developed detailed documentation, including a Confluence FAQ page, to equip designers with the tools to solve a broad spectrum of challenges efficiently.

Prototyping

For the prototype, urgency dictated a swift approach due to our impending launch and transition to a new design system within the updated version. Opting for Design System V1 for the beta phase facilitated rapid implementation. This choice allowed end-users to quickly adapt to the UI, centering their attention on the user experience rather than navigating novel design elements. This strategy was instrumental in collecting valuable insights on design implementation and optimisation.

Also, we decided to go for a Chrome Extension to provide designers with fast access to tools and resources, automating the design review process by analysing live designs for issues related to CSS, accessibility, responsiveness, and best practices.

Beta Testing

I designed a first prototype ready for devs to use on a small number of users to test the UX, and used the feedback to small optimise the UX and UI to improve the efficency of the tool.

During the first month, I've been able to collect some very valuable data that allowed to update the design adding also some new feature to improve even more the user experience. Some of those changes included:

Check the recording available in this LINK (private Youtube link).

Refining and final improvements

After we have been able to fully testing the design, I've been able to update the UI using our internal new Design System and refine the user experience by using the last final round of feedback.