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,
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
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.
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.
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.
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.
Each individual had the opportunity to use five minutes and share their insights by using the following questions as reference:
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.
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.
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.
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).
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.
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.
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.
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.