2024
SummitRTS
THE PROBLEM
Belay Technologies' leading automated testing tool, SummitRTS, aims to enhance the "Create Test Plan" function on its platform. Currently, the platform lacks features to support the creation of comprehensive test plans, such as the ability to view plans holistically and to easily edit, copy, and paste elements.
MY ROLE
UX/UI Design lead responsible for conducting UI research, developing wireframes, and mentoring junior designers on best UX/UI practices and common project lifecycles.
TEAM
Kaysie Justice, Junior Designer
Endless Opportunities
After spending some time exploring the current platform and the steps it takes for a user to create a test plan, it was clear we had many opportunities to explore. Some of these include:
JSON vs. Builder Views
The transition between the JSON page and Builder view are currently not very clear.
Copying Tasking
Users have no way of copying and pasting elements of their test plan onto different sections of the process.
Before
Viewing Multiple Plans Simultaneously
There needed to be a way for users to view several plans holistically without having to go back to different steps of the process or open an entirely new window in their browser.
Span of Window
The actual width of the area where users can create a plan feels cramped and limiting.
Our vision– Provide users with the ability to create customizable Test Plans that allow flexibility.
Solidifying Solutions
Our client, Jake (owner of Belay Technologies), has expressed the desire to enable users to copy previously created instances and paste them onto different parts of a plan or an entirely different plan. Currently, the platform lacks this functionality and does not provide a way to view previously saved plans at a high level. This is the first problem we aimed to solve, and came up with two potential solutions in the process:
‘My Saved’ Panel
This panel would allow users to see all their saved items: saved plans, instances, tasks, and task actions. They should be able to copy elements from these items and move them to other plans or their current one.
‘Plan Overview’ Panel
This panel will show the current step of the user in the test plan process, along with the instances created under each step. Users will be able to edit, duplicate, save, and move instances to other plans within the same panel. The challenge is that there could be more than 10 instances, so we need to find a way to present this information in a less overwhelming manner for users.
Initial Sketch – As I was trying to come up with ways to improve this section, I started brainstorming ideas and asking myself all the questions. What were some meaningful opportunities for features? Does a Drag & Drop solution make sense? Is a progress bar along the top of the plan necessary? I enjoy these moments the most because they help me uncover even more questions and problems that haven't been thought of before.
Dual Panels – If I were to add this dual panel system to the interface, I want it to be as seamless as possible. Both panels would share some similar functionality. The left panel, Plan Overview, would provide a lot of flexibility and freedom when creating your plan – similar to a toolbar. While the right panel would serve as a reliable anchor housing all your saved items.
Drag & Drop – Our client was adamant in making a drag and drop method work. While I was initially afraid this would cause the interface to be clunky, it was clear that it all depended on the design of the actual interaction. That means incorporating: hover states of an Instance, change in cursor, drop zone visual feedback etc..
Move Instance Modal (Option A) – Moving an Instance from one plan to another was another monumental feature needed in the platform. So I came up with two options. Once to user decides to move a Instance, this opens a pop up modal. This method gives the user ample real estate to decide which Instances should go where with the ability to search and multi-select.
In-Panel Selection (Option B) – I also wanted to give our client the option to easily move Instances all within the same panel/screen. This method would prioritize speed and efficiency by allowing users to see the response in real time without having to delegate instances all in a separate window.
From Static to Dynamic
After getting over the hurdle that was understanding the slight learning curve of the functionality of the SummitRTS platform, its use cases and some of the technical “jargon”, it allowed us to tackle complex scenarios as opportunities for innovation. Developing multiple, dynamic options to move instances under the ‘My Saved’ panel, pushed us to think about other possible scenarios in user behaviors. The culmination was incredibly rewarding, particularly when the product owner expressed genuine satisfaction and appreciation for our work. Their positive feedback affirmed our efforts and underscored the value of perseverance and creativity in overcoming obstacles.
After
Embracing the Dark Side
The SummitRTS platform already includes a dark mode version of all its other features. Therefore, it was only natural for us to do the same. Dark Mode is always a great idea for improving user comfort, accessibility, and visual appeal. It also caters to diverse user preferences and enhances usability across different devices and environments.
What I’ve Learned
The changes to the Test Plan UI have been reviewed and approved by Belay Technologies owner and are currently in development.
While it was truly challenging and thrilling to address such complex concepts to solve this problem for SummitRTS, it was the opportunity to mentor my junior designer along the way that made all the difference. Here are a few things we established during our time on this project:
Have a plan A, B, & C
It would be great to have the amazing feature you think will solve all the users' problems. But what if it's not feasible? What would users prefer? Having multiple options and solutions to the problems at hand ensures that you are prepared for uncertainties, can adapt to feedback, and ultimately deliver solutions that meet both user needs and business objectives effectively.
Don’t ever be afraid to ask questions
Regardless of how “inexperienced” you may feel when asking questions, it is ultimately a way to show respect for others' expertise and perspectives. It empowers individuals to challenge assumptions, innovate, and find creative solutions. It demonstrates a willingness to learn and engage with others, whether it's seeking clarification on a complex topic, understanding different perspectives, or validating assumptions.
UI features that make sense
When creating a user interface with rich features, it can be tempting to incorporate every new industry trend simply because it looks good. However, it’s crucial to take a step back and prioritize features and functionalities that align with actual user needs. This approach ensures that the interface design is not only visually appealing but also highly functional and user-centered.