Streamlining Atomworks for developers with intuitive navigation & efficient debugging
ATOMWORKS 3DS TESTING SOFTWARE
AT-A-GLANCE
Atomworks is a Taiwan-based 3D Secure (3DS) certification platform that helps banks, merchants, and payment providers test and certify authentication processes for security and compliance. Four years after its initial launch in 2018, our client reached out for a redesign to streamline the main testing flow, refresh the UI, and ensure swift precision for their users—developers.
As the sole designer, I owned the entire design process for this redesign.
CONTRIBUTIONS
This is a project I did while working with Collective Design Agency for our client Atomworks.
-
Collaborated closely with 10 developers to grasp their interface requirements, delivering assets with their constraints in mind
-
Redesigned platform assets, from 0 to 1, using an agile process to iterate constantly
-
Sole designer, with the lead from Project Manager, in collaboration with 2 Engineers to build this redesign
ROLE
UX Researcher, UX Designer, UI Designer
TIMELINE
8 weeks (3/2023)
TOOLS
Figma
IMPACTS
What's Atomworks?
Atomworks is a tool that helps banks, stores, and payment companies ensure online payments are secure.
For example, when you enter a passcode during checkout, that’s part of a 3D Secure (3DS) check—Atomworks helps verify that process works correctly.
Users: Developers at banks, payment providers, and merchants who use Atomworks to test and certify their 3D Secure implementations before going live.
What led to the redesign?
Atomworks reached out to us after a new feature was released a couple of months ago, but instead of driving more user adoption, it led to some unexpected issues.
35% Decline product adoption
Report shows users’ adoption decline since the most recent update
150+ Customer support ticket
Support tickets have spiked by 25% in the past month, particularly related to testing workflow issues
Outdated UI Design
After 4 years from release, the design now look outdated, also lacking dark mode causing eye strain during extended use
DISCOVER - DEVELOPERS ARE ALSO THEIR USERS
Identifying key pain points and needs
Speaking with 10+ Developers firsthand reveals their biggest struggles. Through observations, I analyzed their workflow, attitudes, and behaviors while navigating the platform. Additionally, we spoke with previous product owners to understand existing constraints. These insights helped us identify key intervention points where the redesign could drive the most impact.
🚧 WORKAROUNDS & MEMORIZATION
When meeting UX roadblock, users rely on memorized paths and workarounds to push through roadblocks to finish their tasks
🔍 FREQUENT ZOOMING
Since module components are fixed unexpandable, users constantly zoom in and out to see details
👾 MANUAL ERROR DETECTION
Users manually sift through logs and error messages, slowing down debugging due to the lack of automated detection
🥷 DEVS LOVE DARK MODE
Dark Mode is the most requested feature, as users prefer it for long coding sessions
How do users currently do their testing?
To better understand the problem, I analyzed how users complete their main tasks, capturing their thoughts, actions, and feelings at each step. Below is a quick breakdown of their happy flow of running a test, carried out across three main screens.
Translating findings into defined pain points
After the visit, I compiled users pain points spanning these 3 screens and the rest of the flow, then categorized and connected the dots across data points and pain points to understand the root cause and prioritize solutions.
The most critical problem to be solved is cluttered, unintuitive main flow, thats undiscoverable and difficult to follow.
DEFINE
Redefining the desired testing experience
Since navigation was the biggest issue, I conducted card sorting with six users to reorganize functionality. The new flow introduces a Home Screen for folders, settings, and subscriptions, a Test Panel for all testing tasks, and a dedicated Debugging screen for focused troubleshooting.
ITERATE & TEST
Onboarding navigation
Users mentioned they often work on multiple products simultaneously while waiting on others, leading to the addition of a tab navigation bar for easier switching. I also drew inspiration from SaaS products like VSCode, Figma, and Adobe to refine this flow.
I explored multiple iterations of how product, team, and subscription info were displayed—either on the same page or in nested screens. Through A/B testing, users preferred a focused product list, with subscriptions and user/team info in a collapsible section, as this reduced clutter and made the most relevant information easily accessible.
Testing navigation
By analyzing heat maps and usability tests, I noticed users focus more on session-wide data before checking test-case specifics. Using the F-pattern reading behavior, I reorganized the layout to prioritize critical information upfront.
In testing, users, particularly new ones, struggled with navigation and identifying the specific screen and product they were viewing. This feedback led me to revise the design hierarchy, ensuring that key information is prominently displayed, making it easier for users to quickly understand the context upon landing on the screen.
Debugging navigation
The new embedded code feature in the debugging screen was recently introduced by Atomworks to help users seamlessly debug within the testing tool, eliminating the need to export or trace files in external tools like VSCode. However, the current cramped and cluttered debugging space fails to deliver a smooth experience, leading users to prefer returning to VSCode for a more efficient workflow.
During testing, users responded positively to the updated layout, particularly the spacious coding and debugging area with expandable sections. They found the error indicators, which highlighted the specific test case and line with bugs, especially helpful. Users also suggested adding plugins to further streamline their workflow and improve their coding experience.
Adaptive UI for mobile
Users often had to wait 1-2 hours during testing and would shift their focus to other tasks.
To make user experience more convenient and seamless, I suggested creating a mobile app that focuses on showing testing progress and results in real time, so users can stay updated while on the go. The desktop version handles the actual testing and debugging, giving users the flexibility to work and stay connected without being tied to their desk.
REBRANDING & DESIGN SYSTEM
The next stage focused on a complete revamp of Atomworks' branding. Drawing inspiration from their existing emphasis on innovation, I developed a fresh set of branding guidelines, including typography, color palettes, buttons, icons, and other UI elements, ensuring visual consistency throughout the product.
The integration of a well-designed dark mode was crucial as it enhanced usability during nighttime work, reduced eye strain, and aligns with the preferences of Atomworks' developer user.
LATEST USER TESTING
After final user testing, the redesign resulted in an increase in task completion, improved intuitiveness, and a reduction in error resolution time, exceeding all our initial goals.
Final Design
FEATURE #1
Streamlined access to key testing project information in a compact layout
Dashboard efficiently organizes essential testing details, reducing clutter and prioritizing important data for quick access. To utilize limited space, my solution is to heavily use scrolling tabs.
FEATURE #2
Enhanced troubleshooting with designated section and improved scannability
The debugging section now includes clearly defined visual components, such as expandable tabs and color-coded error markers, making it easier for users to scan, identify, and resolve issues quickly.
FEATURE #3
Adaptive UI Design for Mobile
Recognizing the need for flexibility, a mobile version of the platform surfaces testing progress and results in real-time. This enables users to stay informed while on the go, without being tied to their desktops.
LEARNINGS
IF I COULD DO THIS AGAIN, I'D...
Thank you ☻☼
You've reach the end...how about another story?
or go back to ↳ Recent Projects
