New Challenges, Familiar Patterns.
After spending years in the video production and marketing industry, I decided it was time for a change and reprogrammed myself for the UX/UI Design industry. I joined Roller Technic to help implement a new UX solution for their B2B dashboard—an environment where clarity, speed, and automation are non-negotiable.
My role: collaborate, adapt, and deliver, all while helping the team push the boundaries of AI integration.
As a mid-level UX designer, I juggled multiple projects at once:
Charts and Table Enhancement
Conversational AI Search
Warranty Claims Automation
Shipping Dashboard Redesign
AI-Driven Support
Workflow Integrations
Each initiative had its own stakeholders, shifting priorities, and technical hurdles. The B2B context demanded both speed and polish.
I leaned into the 70-20-10 Rule to keep my focus sharp:
70% on top priorities (AI Search, Charts and Table Enhancement & Claims)
20% on secondary projects (Shipping Dashboard)
10% on everything else (Support, Integrations)
This approach wasn't set in stone but provided a reliable framework to allocate my time and energy efficiently.
Design isn’t just about aesthetics—it’s about making smart choices, fast. We anchored everything in Jakob’s Law: users expect your dashboard to work like the ones they already know (think YouTube). This kept our learning curve low and our feedback loop tight.
Resource Constraints: Tight timelines, lots of moving parts, and a lean team.
Collaboration Gaps: Needed clearer handoff between design and dev, especially with fast-moving AI features.
Testing Limits: Limited formal research, so we relied on rapid prototyping and real-world feedback.
Off-the-Shelf, On-Target: Used proven UI patterns and components to meet 70% of needs out of the gate.
Design Tokens: Unified look and feel across the product, speeding up both design and development.
Prototype, Test, Repeat: Quick prototypes, fast feedback, smarter releases.
Faster Launches: 70% ready-made meant we could focus on the 30% that really mattered.
Iterate Where It Counts: More time for the details that delight users.
Smarter Feedback: Early and often, so nothing gets missed.
Our UX approach is rooted in Jakob’s Law: users expect your dashboard to feel as familiar as the tools they use every day.
By borrowing proven patterns from platforms like YouTube, we kept things intuitive—minimising the learning curve and maximising user confidence from the very first click.
When it comes to data, the smallest UI tweaks—like crisp typography, smart spacing, and clear content—shape how users see and understand information.
By obsessing over these details, we make complex data feel simple, fast, and actionable.
With limited resources and no time for deep research, we leaned on Jakob’s Law—users expect familiar territory.
Inspired by YouTube’s layout, we built a dashboard with zero learning curve, so users could dive in and get results from day one.
Font: We chose Inter for its clean lines and easy readability, with alternate characters to keep things sharp and clear.
Icons: We went with Google Material Icons for their huge selection, smooth Figma integration, and clear docs—making our workflow quick and painless.
Colours: We stuck to the classics—green for go, orange for caution, and red for stop—so users instantly get the message.
Layout Grid: Built at 1,440px with a 1,016px container for flexibility across screens. For mobile, we borrowed YouTube’s playbook to speed things up.
I honed in on the dashboard’s fine details—quick tweaks that make the whole experience sharper. These subtle upgrades turn raw data into instant, actionable insights.
Digit Clarity: Alternate glyphs for “1,” “I,” “l,” and slashed zeroes ensure every number is crystal clear at a glance—no more squinting or second guessing.
Open Digits: We use open-form 3, 4, 6, and 9 for sharp legibility, even at dashboard mini sizes and on mobile.
Tabular Alignment: Fixed-width numbers keep your financials and KPIs perfectly lined up—so trends and outliers pop instantly.
Text & Number Alignment: Text hugs the left, numbers hug the right. Scan company names and compare figures in one smooth motion.
Smart Date Formats: Dates are localised for your region—no more “wait, is that September or June?” moments.
Utilisation Snapshot: See usage spikes and downtime at a glance. Get a quick pulse on your busiest days and system health—no deep dives required.
Categorical Colours: Ten distinct hues, chosen for instant recognition. Every status, team, or shipment stands out—never gets lost in the mix.
Sequential Colours: From pale to bold, our colour ramps make trends and totals obvious. The bigger the number, the deeper the shade. Opposite shade for dark/light theme.
Diverging Colours: Contrasts highlight what’s up, what’s down, and what needs attention—so action items never hide in the noise.
With the UI fundamentals in place, let’s see the magic unfold as they transform property data into something far more usable.
This project pushed my adaptability and focus, delivering growth in unexpected ways. Here are the highlights.
Key Contributor: Played a pivotal role in shaping the dashboard’s UX, collaborating closely with the team to weave advanced AI features into every layer of the product.
AI at the Core: Enabled users to “talk to their data”—ask, “How much did Apple Inc. generate in revenue last year versus this year?” and instantly see detailed, graphed answers.
Smarter Claims: Built an AI-powered warranty claims system for rubber/polyurethane rollers and CNC machine faults, streamlining the entire process.
Off-the-Shelf, On-Target: Used proven UI patterns and components to meet 70% of needs out of the gate.
Design Tokens: Unified look and feel across the product, speeding up both design and development.
Prototype, Test, Repeat: Quick prototypes, fast feedback, smarter releases.
