Auto Tech Review

Auto Tech Review Tool

Project type

Tool focus on automation and efficiency.


Product and user research, mocked-up a low-fidelity concept based on insights, conceptualised the tool aligned with company design patterns, collaborated with engineers and UX teams,

My Role

UI/UX Designer


Streamlined technical review process, enhanced design efficiency.


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.


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 goal was to develop solution aiming to:

Mitigate Review Overload for Engineers

Streamline Processes

Enhance Efficiency

Maintain Quality

Design process

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.

Identified an opportunity to:

Enable engineers to optimise their priorities and time.

Empower designers to directly resolve some technical issues, potentially reducing design delivery times while maintaining quality and consistency.

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

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.


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.

discovery workshop

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.


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.

Brainstorm process


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:

A direct link to the dedicated Confluence page which include most of the possible scenario and solutions.

A minimising feature to have a better view of the design to update by still having the tool active

A new section to run manual tests.

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.

The solution

A tool capable of using automation to identify technical issues and list them in a checklist.

Automated Checks: Upon opening the extension, the first part of the checklist runs automatically, requiring no initial input from the designers. This feature swiftly identifies common issues, allowing for immediate attention.

Manual Verification Checks: The second part of the checklist includes tests that require manual interaction with the design. For instance, one of the tests involves increasing the number of characters across each of the elements to check the design's responsiveness. A dedicated CTA (Call to Action) button is provided to execute all manual tests seamlessly.

Progression Bar Feature: To enhance user engagement and provide clear progress tracking, I integrated a progression bar into the UI. This bar visually indicates the completion status of error corrections across all creatives. It not only adds an interactive element to the tool but also ensures a comprehensive review by guiding the designers through the entire checklist.

Flagged UI Highlighted: To help designer individuals the UI to fix, on the design the UI with the error is wrapped by an outline and numbered by following the numbers on the list.

Documentation and Training for the Auto-tech Review Chrome Extension

Comprehensive Documentation on Confluence: To ensure that every detail of the Auto-tech Review Chrome Extension was accessible and understandable, I authored a complete set of documentation. I also ensured to documenting all the possible solution for the issues flagged by the extension, to ensure designer could easily fix the problem without any extra support from other teams. This was meticulously prepared and hosted on Confluence, our corporate wiki. The documentation covered every aspect of the tool – from installation and setup to detailed usage guidelines. By centralising this information, I aimed to provide a reliable and easy-to-navigate resource for current and future users.

Training Sessions for Designers: Understanding the importance of hands-on learning, I conducted a comprehensive training program for all the designers. This session was designed to familiarise them with the new tool, ensuring they were fully aligned with the updated process and proficient in using the extension effectively.

Recording Training for Future Reference: Acknowledging the dynamic nature of team compositions, I ensured that the entire training session was recorded. This recording now serves as a valuable resource for onboarding new designers, allowing them to quickly get up to speed with the tool. It also acts as a refresher for existing team members, ensuring that the knowledge on how to leverage the extension is always available and easily accessible.

The impact observed after the launch

Time Optimisation: Following the implementation of the Auto-Tech Review Chrome Extension within our Design Studio team, we have effectively reduced the delivery time by as much as three days. This efficiency stems from the team's ability to directly share the completed designs with the clients, free from technical hindrances.

Empowering Designers and Optimising Resource Allocation with Chrome Extension: The Auto-Tech Review Chrome Extension not only enhances designers' skills in addressing technical issues independently but also lightens the workload for Front-End Engineers. This shift allows engineers to focus on high-priority tasks, optimising overall team efficiency and resource use.

Enhanced Quality Control and Consistency: The tool improves the quality and consistency of design implementations across various client sites. It ensures that common technical issues are caught and addressed early in the design process, leading to a more consistent and seamless user experience on client websites. This upholds Wunderkind's commitment to delivering high-quality designs that align with client expectations.