top of page
Web Automation
Web automation is a way to automate common tasks like web actions of filling out forms, clicking on buttons, downloading files, and handing them over to helpful softwares
Domain
Testing
Type
Tools
Product Design
Figma, Amplitude
The Problem
More than a million Developers using this product to run the test cases to deliver their product bug-free is the most challenging one. Problem was, that they run the test case and needs to know the status of each cases whether it failed or passed. So in the current design, they can able to know only about the overall status, not the build level. And they should click and know more about their builds on the next page. It's tough to see for 100 or 1000 builds they running on the platform. So we came up with some solutions to avoid clicks and within a page, they should be able to see all statuses.We have tried two different approaches and finalized one. The below one is the Old UI.
Designing the details
So, we had a detailed discussion with Product Managers and some developers to understand better about the problem and what they feel. Collected all the inputs and feedback in the form of word document.
First step is to understand the user and user behavior was the most important one. Then started designing the wireframing -pencil sketches mainly. Scribbled some approaches and finalized two versions. Before that I took some references, how other doing and how can we deliver better.
Below one is the wireframing.
After wireframing, had a discussion with PM's to approve and whether its on track. So, Next would be the Design UI language. Without disturbing or changing the overall experience, we need to deliver the best one for developers.
We took a super collaborative approach, I involved all developers and QA's, and engineers - to make sure that everything we made as a wireframe is feasible to implement and how long it will take to develop so that it won't affect sales and user base.
After a detailed discussion, they gave partial sign-off and waited to see the Hi-fidelity screens. I have started designing the screens in Figma. And make sure that we are following the DESIGN SYSTEM.
The below one is the new UI.
Launch & Conclusion
Finally, I have delivered all screens - How should drop-down work, search, filter, drawer, and tooltip as well. Uploaded all screens in zeplin, so that developers can export all components as code. It's easier for them to code. After 3 weeks of the sprint, moved to production and launched.
We closely monitored every build status and test they upload results and insights of every user. This project was amazing to work on. I love working closely with users to understand their problems and interpret them to create beautiful solutions.
We have seen 3X Growth - most of the users are switched to NEW UI from old UI.
I learned a lot from design systems and User behaviors and how to approach them was the biggest learning.
Followed all the design system guidelines and approaches. Only the thought while designing was - its should be very simple and clean to use. I presented the Hi level designs and they really liked it.
Once its get approved, we had a meeting again with developers about feasibility and time to develop.
Next Project
bottom of page