Legacy State
When I took over Terafina's web product, it was a basic Salesforce implementation. The visuals and
overall presentation lacked a premium and trustworthy feel, which was critical given the need to
handle sensitive, personally identifiable information securely and confidently.
UX shortfalls
User inputs lacked meaningful feedback, critical information was hidden by
default, requiring users to search for it, and the application progression was unclear,
leading to a fragmented user experience.
Poor Client adoption
Selling the application platform was unnecessarily challenging due to the significant
development effort required to customize the branding, making it less accessible for
potential
clients.
Atomic Improvements
To revamp the application's presentation layer, we began at the foundational level, redesigning
atomic elements and allowing those changes to propagate across the platform. This strategic approach
demonstrated how significant improvements could be achieved with minimal effort, effectively
showcasing the potential impact of our strategy and work.
Upgraded Default Color Palette
The base color scheme was updated to inspire greater trust in the default product, improve contrast
for clearer visual cues, address accessibility (a11y) concerns, and elevate the overall visual
appeal to a more premium standard. To support the "white label" nature of the application, a
flexible system was developed using $primary, $secondary, and $tertiary color scales, along with
design tokens, enabling seamless customization for clients.
Iconography
A new icon family was introduced to enhance the premium feel and overall consistency across screens
and pages. The updated UI incorporates Streamline's library of over 10,000 icons, providing a
unified,
cohesive appearance while delivering a modern and visually engaging experience.
Typography
Montserrat was selected as the default typeface for its wider, more solid structure and taller
x-height, which contribute to a sense of reassurance and stability in the product's user interface.
White Label Styleguide
A simple, user-friendly pattern library was developed to facilitate smooth adoption for customers.
It allows clients to easily set their brand color palette and typography, with these choices
automatically cascading across all components and individual elements.
Typographic Scales
Typographic scales for web, native iOS and Android, and the media queries for all viewports.
Color Scales
Primary, Secondary, Tertiary, and Semantic color scales from 100 - 900 with 500 being the primary
instance of the parent color.
Color Scales
Indicating current location was a priority pain point to solve for aspiring customers. Some
applications required large amounts of documentation and may take more than the time of one,
individual
sitting.
Color Scales
Inputs were a key focus, as the customer flow is data-intensive and required a high level of
consistency in styling and interactions. To address the common challenge of distinguishing required
versus optional fields, we decided that, since most fields were required, we would only mark the
optional ones.
Key UX Improvements
The progress stepper UI was not available on mobile, which was a critical gap that needed to be
addressed. The updated version, incorporating the new color scheme, offers high contrast to clearly
indicate the applicant's current position in the flow and how much remains to be completed.
Progress Stepper
The progress stepper UI was not available on mobile, which was a critical gap that needed to be
addressed. The updated version, incorporating the new color scheme, offers high contrast to clearly
indicate the applicant's current position in the flow and how much remains to be completed.
Consistent input design
Consistent typographic hierarchy, color usage, and spacing are fundamental to the design. Fields are
now marked as optional rather than required, reducing the use of alert red on the page. This change
helps ease applicants' apprehension and cognitive overload, making the flow feel more approachable.
Exposing Critical Content
Content that was previously hidden behind helper tooltips has now been made visible, providing
applicants with all the necessary and useful information upfront, without requiring any additional
action on their part.
Outcomes
Engaging with the engineering team early in the process fosters better collaboration, helps identify
technical limitations, and enables a more truly agile workflow. The current platform posed
challenges for engineering, particularly when customizing platform-based components. Effectively
communicating the reasoning behind design decisions is crucial, as it educates stakeholders and
ensures they are better informed, supporting a smoother and more agile process.
Increased sales & Client adoption
The creation of a standardized, systematic solution made it easier for clients to implement the
design while staying aligned with their own unique brand guidelines.
User Experience wins
By reducing cognitive load through consistent forms and layouts, the user experience was
significantly improved. Making it easier for applicants to complete their applications. As a result,
abandonment rates decreased by 12%. The success of this project contributed to Terafina's
acquisition by NCR.
Premium Visual upgrades
The white-label solution now allows clients to easily brand their experience without the need for
thousands of man-hours. Out of the box, it offers a premium, reliable experience that can be quickly
customized to fit their needs.
