SmartLayers
UX & UI · Web & branding design · SmartLayers · 2021Two projects for the same company in 2021: the interface of a machine learning document processor, and the redesign of its website and visual language. One is product, the other is brand.
The app
UX analysis & UI · Humans4Help · 2021In January 2021, before conversational AI tools became mainstream, I worked on a short exploratory project to define the UI of a machine learning document processor for Humans4Help. SmartLayers is a system of trained models that extract structured data from document images. My role was to design how users would interact with this AI system, from annotation to prediction, at a time when no clear UX patterns for AI interfaces existed.
Problem
The platform was technically powerful but conceptually abstract. Users needed to upload samples, annotate document zones, train models, run pipelines, and interpret predictions, all within a machine learning workflow that could take minutes or hours to process.
Outputs included extremely large labels and encrypted hash keys with no semantic meaning. Without structure, the experience risked feeling like a black box.
The challenge
How do we make machine learning feel structured, controllable, and usable, not opaque and overwhelming?
The plan & design
I structured the entire machine learning lifecycle into clear, sequential stages: sample management, annotation, model training, pipeline execution, and prediction validation. The interface followed this logic, giving users a mental model of what was happening at every step.
To reduce cognitive noise, I redesigned the way encrypted prediction hashes were displayed. Instead of showing full-length keys, I truncated them visually and added a copy-to-clipboard action. This preserved technical integrity while keeping the UI readable.
The annotator
For the SL Annotator, I designed an interaction inspired by familiar graphic tools. Users could draw polygons directly on documents to define training zones, making the experience intuitive despite the complexity behind it.
Outcome
In a three-month collaboration with developers, we transformed abstract machine learning processes into a structured and operable product.
What it delivered
The result was a clear AI workflow instead of a black box, reduced cognitive overload, and a minimal interface capable of handling complex backend logic. Even as a short project, it demonstrated how thoughtful structure and interaction design can make advanced systems usable and trustworthy.
The website & brand
Web & branding design · SmartLayers · 2021Following the product design work for SmartLayers, the company requested a website redesign. The logo remained unchanged, but the visual language, communication tone, and graphic system were redefined to better express the brand's evolution.
Observation & intention
The previous website was heavily product-focused, emphasizing features, data, and technical value. However, this approach did not create a clear or emotionally engaging communication for potential clients.
The redesign aimed to reposition SmartLayers around clarity, simplicity, and high-technology precision. Instead of leading with features, the intention was to communicate vision, making complex AI concepts feel approachable.
Back to the basics
Keywords such as clean, minimal, robotic, high-technology guided the new brand direction. The goal was to simplify messaging while visually reinforcing the product's intelligence and innovation.
Introducing illustration helped translate abstract AI processes into understandable visual narratives, bridging the gap between technical sophistication and human understanding.
Illustration system & characters
A custom character system was developed to symbolize the connection between human activity and artificial intelligence. Detached heads, hands, and feet created figures that felt slightly robotic yet still human.
Built from simple sticks and circular joints, the modular structure allowed flexible poses while maintaining visual consistency.
Together with a defined color palette and outlined iconography, these elements formed a cohesive brand language that highlighted the company's technological vision.
Outcome & what I learned
The redesign shifted SmartLayers from a feature-heavy presentation to a concept-driven narrative. The new visual system allowed the company to communicate complex AI workflows with clarity and personality.
Takeaways
Brand voice matters as much as product value.
Illustration can humanize abstract technology.
Consistency across graphic elements builds credibility.