Fer Suárez

SaaS RPA Translation tool dashboard

JOLT was a Robotic Process Automation (RPA) startup consultancy focusing on helping enterprise clients jump-start their RPA initiatives with UiPath, Automation Anywhere, and Power Automate.

Leadership identified an opportunity to create a no-code web application for clients to streamline the transition from legacy automation platforms -like Automation Anywhere- to a more robust and scalable platform like UiPath. 

Client

JOLT Advantage Group

My role

UX/UI designer

Team

Director of Sales

Developer

Tools

Figma

Illustrator

FigJam

Year

2020

TL;DR

What this case study is about

Business Objectives

🤔
What was the business trying to achieve?
  • Be first to market
  • Launch a no-code SaaS product for streamlining RPA platform transition projects

Constraints

🚧
What restrictions did we have to consider?
  • One-person design team
  • Limited budget for development
  • Shifting business priorities

My Role

📋
What was I responsible for?
  • UX/UI design
  • Collaborating with the Director of Sales and a developer

Results

🚀
What did we achieve?
  • Solid foundation for the look and feel of the SaaS
  • Early stage high fidelity wireframes
  • Product did not launch due to a shift in business priorities

Discovery

What is this product?

The idea came from a growing need from RPA leadership at client organizations using Automation Anywhere, which needed to transition to UiPath without forcing their organizations to rebuild all their automation workflows from scratch.

Key user flows

✔️
  • Manage and track their automation code translation progress​
  • Visualize the amount of AA code that could be reused in UiPath​
  • Calculate the amount of extra development time needed
  • Manage multiple projects within one screen
  • Deep dive into a single file’s contents
  • On-demand access to tech support

Understanding the product

Interviewing an SME

I interviewed the Director of Sales to better understand the core aspects of the 3 main dashboard screens, what tasks the users would perform, and what data would be visualized. I learned the following:

Project Dashboard

What do users do here?
  • Upload a new project
  • Have an overview of all their projects in translation​
  • Search all their projects
  • Delete one or more projects
  • Get a summary of project statistics and data

Analyze (Main Screen)

What do users do here?
  • Visualize 6 essential metrics for each project
  • Understand what percentage of their code was translatable to UiPath
  • Quantify the categories of commands included in their project

Code

What do users do here?
  • Dive deeper into each file contained within a project​
  • Understand the translatability, custom development time to translate, and the total commands included in each file

Ideation with Stakeholders

Early idea of the product layout

The Director of Sales provided his PowerPoint-made layout idea for the Analyze screen. I did not think he proposed the best layouts to represent the requirements. He was reluctant when I asked if I could ideate something new.

First reaction to this layout:

❌
  • Text-heavy components
  • All elements were tightly clustered together
  • No clear distinction between each section
Early layout wireframe 👇🏼

Early design

Jumped into high-fidelity from the get-go

At the start of the project, leadership prioritized it due to the potential market share from being first to market. As a result, I was asked to move directly into mid to high-fidelity designs to develop the interface quickly. For the first iteration, I closely followed the Director of Sales’ early layout, as he insisted on maintaining his vision.

What I learned:

👀
  • Cluster of metrics components at the top remained text-heavy
  • Lack of icons to relate to key concepts hindered the readability of the UI
First design iteration 👇🏼

Collaborating with Leadership

Discussing design with project champion

I met with leadership, and we reviewed the first design. I went into this meeting with the intention of discussing the possibility of changing the initial layout.

Design meeting with leadership:

💻
  • Leadership wanted to add 3D elements to the UI
  • Same layout was still being pushed by stakeholders
Adding 3D-like elements to the UI 👇🏼

Getting buy-in from leadership

My manager helped get support to explore new layouts and designs

Before meeting with leadership again, I contacted my manager for her help in swaying their opinion about looking at a new design. This allowed me to present a UI that would better serve the users.

Got buy-in to:

🌟
  • New visual exploration
  • Iterate more on the design on different screens
  • Research SaaS dashboard design trends

Visual inspiration

I researched trends and how dashboard UIs and SaaS products looked back in late 2020 and drew ideas for what I could add to the UI I had to create.

Main Analyze screen

Setting the foundation for the product's look and feel

I created a new design using trends and research while sticking to JOLT’s brand guidelines. After sharing the proposal with leadership, I received feedback a few weeks later. They liked the new design and asked me to develop ideas for the other screens based on this latest iteration.

Key aspects of the new design:

  • Persistent left sidebar menu to navigate between the three main screens​
  • Sections and components differentiated
  • Incorporated the brand’s colors to the components
New design for the Main Analyze screen 👇🏼

Project dashboard screen

Diving into user flows

I created multiple components using familiar UI elements from other apps users encounter, like the three dots toggle for showing an options menu. I also designed the user flow for uploading a new project.

Key aspects of this screen:

  • Overview of all the user’s projects in translation
  • Ability to upload a new project
  • Search bar component to filter through projects
Project dashboard screen 👇🏼
User flow for uploading a new project 👇🏼

Code dashboard screen

Streamlining file exploration for users

The Code screen was designed to give users an in-depth view of each file within their translation projects. The goal was to create an intuitive interface that allows users to efficiently navigate and interact with project files while maintaining a clear, organized layout.

Key aspects of this screen:

  • All files within a project
  • Percentage of translatability
  • Button to see the relevant file details
Main Code Screen 👇🏼

I created the user flow when navigating a file’s details. This screen had 3 sub-screens: Overview stats of the file, properties of the file, and code deep dive.

User flow for looking at a file's details 👇🏼

Shifting business priorities

The company was being acquired by Roboyo GmbH

Several weeks later, the project had lost momentum as leadership deprioritized it, leading to radio silence despite multiple status inquiries after handing off the design to a freelance developer. I sought my manager’s help to break the silence. She contacted the leadership, and we met to discuss the project’s status.
  • JOLT started negotiations with Roboyo – a German intelligent automation consultancy – to be acquired
  • The SaaS project was shutting down because Roboyo wasn’t interested in developing it​

Conclusion

Get leadership support

Sometimes it is necessary to reach out to other leadership members to support you to get buy-in from skeptical stakeholders.

Establish regular check-ins

Setting up regular touchpoints and recurrent meetings can speed up the design process.

Design can be messy

Sometimes, the design process at a startup can be disjointed. The lack of a mature UX/UI design team led to fewer design iterations and user research being conducted.

Nothing is ever “final”

Teams, products, and organizations are ever-changing. Iterations are needed to improve a product to deliver value and meet business objectives.

Transparency is key

It is natural for businesses to shift priorities, and leadership needs to communicate changes in time to avoid tensions.​