Lighter
Paperwork
2499—SMR/20
Managing thousands of leasing contracts can be challenging by itself. When it comes to car leasing ones, Brazilian banks have to do so in conjunction with the Department of Traffic — double the trouble.
Since day one, SmartRegistros has taken an innovative route for contract-logging. In a market where competition is all about cutting costs and having barebones frontend, they've invested in workflow research and smooth experiences to raise the bar.
Client
SmartRegistros
Year
2020
Scope
Digital product
Design system
Visual id.
Goal
Turn a complex bureaucracy-oriented backend into a product that’s easy to use and saves time
Keywords
B2B, dashboard, webapp, legal, finance, government, compliance, contract logging
Company selection screen, after sign in. The pre-selected option is the one most used by the current user.
Contract listing has the primary action (New Contract) highlighted. Above the list of contracts, we have a handy toolbox with fast actions.
01. Technical Requirements
Early in our research, we quickly found that the Department of Traffic’s database structure and regulations would be our North Star. Knowing these were immutable, we understood they would define the boundaries for performance and user flow flexibility.
Thus, we began with the API structure and Enterprise Architect files, where our engineers extracted what was essential for the product.
Initially, we paused user research to immerse ourselves in technical requirements—perhaps a natural reaction to the complexity. Ironically, the user research ultimately provided insights into the technical aspects we struggled with, reinforcing the importance of parallel discovery and research.
02. User Research
With the data structure established as requirements, we turned our attention to understanding the users: back-office staff, managers, their workflows, expectations, and goals. We observed six individuals from three companies using their existing software, conducting interviews (three before and three after observation) to identify potential improvements.
Recognizing that these users were accustomed to outdated UX, we sought to innovate without disrupting their established routines.
One user commented that “it would be nice if the contract input flow was more like making a transfer on PicPay a consumer digital wallet app.”
03. Insight Analysis
We began to merge insights from user interviews with the data structure, transforming complex logic (e.g., Infinite Hierarchy between organizations) into more human-centric concepts.
This informed our feature naming conventions and helped us map jobs-to-be-done to one another.
One example: contract input was followed by contract tracking on the Dept. of Traffic database.
These tasks might be performed by the same user or different users, depending on their organizational structure, making epistemology and consistency paramount.
01. Userflows & Wireframes
We organized user flows into 'Macro' and 'Micro' levels. Every step in the 'Macro' flow had a clear beginning and end, even in looped navigation. Zooming in and out of the user flow allowed us to maintain multiple levels of granularity and prevent potential loopholes.
Manager insights and overview dashboard.
Visual org chart for access management.
02. Brand & Design System
The B2B perspective then took center stage: we needed to communicate the brand to C-level stakeholders & decision-makers in a language they understood.
The brand needed to convey both innovation and reliability. The vibrant colors (a touch of fun!) paired with serif and sans-serif fonts captured this balance.
That's when we had an insight: let's test a B2C-ish UX based on apps our users interacted with on their personal lives.
From these brand guidelines, we built an atomic design system with over 30 sections. A boon for developers.
Embracing the logic and data structure can be a good starting point to develop an idea.
Somehow we felt that technical requirements were a nuisance that blocked my creativity. I started to realise that constraints actually required me to be more inventive to work around (and with) them.
