Basic Elements
Basic Elements
3 Months. 6 Screen. One whole new language
3 Months. 6 Screen. One whole new language
user experience
user interface
design system
direction
client
Confidential
my role
UX/UI Designer & Art Director
Duration
12 weeks
year
2025
Note: I've left out the company's name and use the placeholder name to respect confidentiality and keep the focus on the work rather than any brand associations.
Overview
This case study covers my work designing Basic Elements, a B2B SaaS budget management platform for finance teams. It walks through how I approached a complex, data-heavy product from behavior first, built six screens into one connected workflow, and designed a system where every decision has context and every action has a place.
Overview
This case study covers my work designing Basic Elements, a B2B SaaS budget management platform for finance teams. It walks through how I approached a complex, data-heavy product from behavior first, built six screens into one connected workflow, and designed a system where every decision has context and every action has a place.
role
Data Speaks, I Listen
On this project I covered both ends. I handled the research and the UX, then carried it all the way through to the final UI. No dedicated UX resource on the team, so understanding the user came before designing for them. I ran competitor research, sat in on client interviews, mapped what wasn't working, and built the visual system from everything I learned. One role, the full journey.
role
Data Speaks, I Listen
On this project I covered both ends. I handled the research and the UX, then carried it all the way through to the final UI. No dedicated UX resource on the team, so understanding the user came before designing for them. I ran competitor research, sat in on client interviews, mapped what wasn't working, and built the visual system from everything I learned. One role, the full journey.
Key Challenges
Fluent in a Language I Didn't Speak
Challenge
No UX foundation and a tight deadline: I was responsible for the full process, research, UX, and UI, without a dedicated UX resource and without a background in finance or accounting.
Domain gap: I had to learn the language of finance before I could design for it. Understanding what terms matter, what data a finance lead reads first, and why it matters took real time investment.
Design and development disconnect: Without a smooth handoff process in place, gaps between design intent and development execution were creating rework and slowing things down.
No formal user testing structure: Without an established research and testing process, there was a real risk of designing features that missed what users actually needed.
Solution
Restructured my workload around a 70-20-10 model: 70 percent deep work on understanding the domain and the product, 20 on design execution, 10 on iteration and polish.
Leaned on existing components instead of building from scratch: Applied Jakob's Law, users want familiarity, and tailored proven patterns to fit the product rather than reinventing everything.
Built a design token system from the ground up: Introduced design tokens to unify the visual language across design and development, reducing rework and keeping every screen consistent.
Results
Faster loops: Earlier feedback meant better decisions before anything was final.
Consistency at scale: Design tokens reduced rework and created a consistent experience across all six screens.
Time back: The system freed up the critical thirty percent to focus on what mattered most, data hierarchy and user experience.
Prototype early: Used the token system and pre-built components to get prototypes in front of stakeholders faster and iterate before anything was locked in.
Key Challenges
Fluent in a Language I Didn't Speak
Challenge
No UX foundation and a tight deadline: I was responsible for the full process, research, UX, and UI, without a dedicated UX resource and without a background in finance or accounting.
Domain gap: I had to learn the language of finance before I could design for it. Understanding what terms matter, what data a finance lead reads first, and why it matters took real time investment.
Design and development disconnect: Without a smooth handoff process in place, gaps between design intent and development execution were creating rework and slowing things down.
No formal user testing structure: Without an established research and testing process, there was a real risk of designing features that missed what users actually needed.
Solution
Restructured my workload around a 70-20-10 model: 70 percent deep work on understanding the domain and the product, 20 on design execution, 10 on iteration and polish.
Leaned on existing components instead of building from scratch: Applied Jakob's Law, users want familiarity, and tailored proven patterns to fit the product rather than reinventing everything.
Built a design token system from the ground up: Introduced design tokens to unify the visual language across design and development, reducing rework and keeping every screen consistent.
Results
Faster loops: Earlier feedback meant better decisions before anything was final.
Consistency at scale: Design tokens reduced rework and created a consistent experience across all six screens.
Time back: The system freed up the critical thirty percent to focus on what mattered most, data hierarchy and user experience.
Prototype early: Used the token system and pre-built components to get prototypes in front of stakeholders faster and iterate before anything was locked in.
UX DESIGN
Get the Story Straight
he research phase started with one clear constraint: do not ask users to change how they work. Finance teams are conservative by nature, Excel is muscle memory, and any tool that tries to replace that entirely will be ignored. The goal was to meet them where they already were and build something that felt like a natural extension of what they knew, not a replacement for it.
Research
Two directions. Competitor analysis across leading data-heavy platforms, with Stripe as the clearest benchmark for handling complexity without losing the user. And client interviews, sitting with the people actually using these tools every day. Both pointed to the same thing: users did not want a revolution. They wanted clarity.
UX DESIGN
Get the Story Straight
he research phase started with one clear constraint: do not ask users to change how they work. Finance teams are conservative by nature, Excel is muscle memory, and any tool that tries to replace that entirely will be ignored. The goal was to meet them where they already were and build something that felt like a natural extension of what they knew, not a replacement for it.
Research
Two directions. Competitor analysis across leading data-heavy platforms, with Stripe as the clearest benchmark for handling complexity without losing the user. And client interviews, sitting with the people actually using these tools every day. Both pointed to the same thing: users did not want a revolution. They wanted clarity.
Insight 01
Familiarity reduces friction. known patterns the learning curve before they even start.
Insight 02
In data visualization, typography, spacing, and layout shape how information is read under pressure.
Insight 03
Integration beats replacement. Users wanted their existing workflow to become more visible, not replaced.
Insight 04
When data updates instantly, finance leads stop reacting and start getting ahead.
Insight 01
Familiarity reduces friction. known patterns the learning curve before they even start.
Insight 02
In data visualization, typography, spacing, and layout shape how information is read under pressure.
Insight 03
Integration beats replacement. Users wanted their existing workflow to become more visible, not replaced.
Insight 04
When data updates instantly, finance leads stop reacting and start getting ahead.
Persona
I built the personas around one question: who carries the weight of this data every day? What I found was two distinct users with different relationships to the same numbers. One owns the full picture, the other lives inside a slice of it. Designing for both without overcomplicating either was the real challenge.
key quote
"I need to see the full picture before the first meeting, not after the damage is done."
key quote
"I need to see the full picture before the first meeting, not after the damage is done."
the ui design
Make It Feel Familiar
The UI was built on a simple principle: credibility first. In finance, if something looks unfamiliar or feels off, trust breaks immediately. So instead of designing from scratch, I leaned into what users already know, familiar components, clean hierarchy, and a system that enhances the experience rather than reinvents it. The differentiation was never about the components themselves. It was about what the platform gives you when they all work together.
the ui design
Make It Feel Familiar
The UI was built on a simple principle: credibility first. In finance, if something looks unfamiliar or feels off, trust breaks immediately. So instead of designing from scratch, I leaned into what users already know, familiar components, clean hierarchy, and a system that enhances the experience rather than reinvents it. The differentiation was never about the components themselves. It was about what the platform gives you when they all work together.
Fonts- Helvetica Neue. Clean, familiar, and trusted. It carries the credibility the finance context demands without trying too hard.
Icons system- Standard and recognizable. If a user has to think about what an icon means, it has already failed.
Colors- Kept intentional and familiar. Green for positive, orange for warnings, red for alerts. Users understand the status from the past.
Layout grid- Layout grid. 12 columns at 1440 pixels for desktop, with a mobile approach to maintain flexibility across screen sizes.
Components
Familiar by design. I used established UI library components and branded them to the product rather than building from scratch. The goal was zero learning curve, if a user has seen a dashboard before, they already know how to use this one. What sets it apart is not the components themselves but the decisions around them: what data sits at the top of the hierarchy, how the AI assistant handles everything below it, and how the integrated workspace keeps users from ever needing to leave the platform.
ai agent
Ask and It Shall Appear
Most of the time, the data you need is not the data you see. A platform this deep has layers, and digging through them manually is exactly the kind of work that slows a finance lead down. The AI agent lives inside the platform. It knows every number, every report, every transaction. Ask it anything. The Q3 ROI, the December expense report, the salary split across two departments. It does not search, it answers. No external tools, no context switching, no waiting. Just the right information at the exact moment you need it.
ai agent
Ask and It Shall Appear
Most of the time, the data you need is not the data you see. A platform this deep has layers, and digging through them manually is exactly the kind of work that slows a finance lead down. The AI agent lives inside the platform. It knows every number, every report, every transaction. Ask it anything. The Q3 ROI, the December expense report, the salary split across two departments. It does not search, it answers. No external tools, no context switching, no waiting. Just the right information at the exact moment you need it.
screens 1
the four questions every finance lead asks before they can start their day
The first screen answers the four questions every finance lead asks before they can start their day. Total budget, amount spent, what is left, and what needs attention right now. Four KPI cards, no digging required. Below that, the budget burn timeline maps the full fiscal year as grouped bars, allocated budget in navy, actual spend in teal, and any overspend months dropping below the zero line in red. Clean months and problem months, visible at a glance. Department breakdown sits below that, showing all five departments with their burn percentage and a color-coded status. Bottom row is live, top spend categories and recent activity, a running feed of everything moving across the company.
screens 1
the four questions every finance lead asks before they can start their day
The first screen answers the four questions every finance lead asks before they can start their day. Total budget, amount spent, what is left, and what needs attention right now. Four KPI cards, no digging required. Below that, the budget burn timeline maps the full fiscal year as grouped bars, allocated budget in navy, actual spend in teal, and any overspend months dropping below the zero line in red. Clean months and problem months, visible at a glance. Department breakdown sits below that, showing all five departments with their burn percentage and a color-coded status. Bottom row is live, top spend categories and recent activity, a running feed of everything moving across the company.
screens 2
This is where the overview becomes personal
he department screen drills into a single team, in this case Marketing, and gives the department lead everything they need to manage their slice of the budget without asking anyone for anything. A hero budget card shows the full allocation with a live progress bar. Two KPI cards track spent and committed amounts. Below that, the full team member table with a status for each person, on track, review, or over limit, calculated automatically based on spend relative to how much of the period has elapsed. Hover a row and a tooltip surfaces the exact calculation and a projected overspend figure. The spend by category chart runs full width below, showing exactly where the money is going. Pending approvals and invoice tracker fill the bottom. The Sage AI widget sits alongside for quick contextual queries, no screen switching needed.
screens 2
This is where the overview becomes personal
he department screen drills into a single team, in this case Marketing, and gives the department lead everything they need to manage their slice of the budget without asking anyone for anything. A hero budget card shows the full allocation with a live progress bar. Two KPI cards track spent and committed amounts. Below that, the full team member table with a status for each person, on track, review, or over limit, calculated automatically based on spend relative to how much of the period has elapsed. Hover a row and a tooltip surfaces the exact calculation and a projected overspend figure. The spend by category chart runs full width below, showing exactly where the money is going. Pending approvals and invoice tracker fill the bottom. The Sage AI widget sits alongside for quick contextual queries, no screen switching needed.
screens 3
A split view built for audit work
The left side holds the full transaction table with live filters across four states, all, pending, flagged, and no receipt, each with a count badge so the finance lead knows where the work is before they click anything. Selecting a row opens the detail panel on the right. Vendor, category, payment method, flag reason, receipt attachment, inline editable notes, and a full approval history timeline showing exactly who touched it and when. Bulk approve and export sit in the top bar for when there is more than one item to process at once.
screens 3
A split view built for audit work
The left side holds the full transaction table with live filters across four states, all, pending, flagged, and no receipt, each with a count badge so the finance lead knows where the work is before they click anything. Selecting a row opens the detail panel on the right. Vendor, category, payment method, flag reason, receipt attachment, inline editable notes, and a full approval history timeline showing exactly who touched it and when. Bulk approve and export sit in the top bar for when there is more than one item to process at once.
screens 4
Collaboration built into the platform, not bolted on
Channels are structured around departments, marketing-budget, engineering-budget, general-finance, plus direct messages between team members. The difference from a generic chat tool is the inline cards. When Dan submits the Meta Ads invoice, it appears in the thread as a structured expense card with amount, category, flag reason, receipt status, and approve and reject buttons directly in the message. Sara actions it without leaving the conversation. When Tom asks for a Q3 expense summary, Sage generates it inline as a report card with live stats and a download button. Every action is timestamped. The conversation is the audit trail.
screens 4
Collaboration built into the platform, not bolted on
Channels are structured around departments, marketing-budget, engineering-budget, general-finance, plus direct messages between team members. The difference from a generic chat tool is the inline cards. When Dan submits the Meta Ads invoice, it appears in the thread as a structured expense card with amount, category, flag reason, receipt status, and approve and reject buttons directly in the message. Sara actions it without leaving the conversation. When Tom asks for a Q3 expense summary, Sage generates it inline as a report card with live stats and a download button. Every action is timestamped. The conversation is the audit trail.
screens 5
Sage gets its own screen
Clean, centered, and light, with conversation history on the left grouped by day, each entry carrying a short outcome note so the finance lead can see what was generated and when. The main area opens with a contextual greeting and a full-width input bar with tabs for Finance, Reports, and Approvals. Six prompt cards cover the most common starting points, Q3 burn rate, over-limit members, expense reports, end of quarter forecasts, unusual transactions, pending approval summaries. Sage is also available as a contextual widget on the Departments screen, surfacing right where the questions come up naturally.
screens 5
Sage gets its own screen
Clean, centered, and light, with conversation history on the left grouped by day, each entry carrying a short outcome note so the finance lead can see what was generated and when. The main area opens with a contextual greeting and a full-width input bar with tabs for Finance, Reports, and Approvals. Six prompt cards cover the most common starting points, Q3 burn rate, over-limit members, expense reports, end of quarter forecasts, unusual transactions, pending approval summaries. Sage is also available as a contextual widget on the Departments screen, surfacing right where the questions come up naturally.
screens 6
The key decision on this screen was structure
A flat list of 18 pending items forces the finance lead to do the grouping mentally. This screen does it for them. Requests are organized by department, each group showing the department name, number of pending items, total amount, and urgency count up front. Within each group, every row surfaces the request title, amount, who submitted it, how many days it has been waiting, urgency level, and whether a file is attached. Selecting a row opens the detail panel with full request details, receipt status, editable notes, approval history, and three action buttons. Bulk approval is available from the top bar for routine items that do not need individual review.
screens 6
The key decision on this screen was structure
A flat list of 18 pending items forces the finance lead to do the grouping mentally. This screen does it for them. Requests are organized by department, each group showing the department name, number of pending items, total amount, and urgency count up front. Within each group, every row surfaces the request title, amount, who submitted it, how many days it has been waiting, urgency level, and whether a file is attached. Selecting a row opens the detail panel with full request details, receipt status, editable notes, approval history, and three action buttons. Bulk approval is available from the top bar for routine items that do not need individual review.
Closing
More Than a Dashboard
his project was never really about the screens. It was about learning how to think inside a world I did not come from, finance, and finding a way to bring what I already knew into it. The result was a product that works as a system, and a process that I carry into every project I take on now.
Winning Moments
Getting fluent fast: Learning the language of finance, the terms, the priorities, what a finance lead actually cares about at 9am, and translating that into design decisions that made sense to the people using it.
The token system: Building a design token structure from scratch on a project with limited resources and a tight timeline. It kept consistent and cut rework down significantly.
Nuance travels: Realizing that the creative instincts I built in other industries did not need to be left at the door. With the right fine-tuning, they transferred directly into a data-heavy product and made it better.
Lessons Learned
Strategy and detail are not the same fight: Knowing which details matter and which ones do not is the real skill. Balancing the big picture with the right UI decisions is what keeps a product from becoming either too abstract or too precious.
Existing systems are an asset: Leaning on Jakob's Law and established design systems was not a shortcut. It was the right call. It freed up time and energy for the thirty percent that actually needed original thinking.
Stay flexible: You start a project with a plan and reality rearranges it. The ability to reprioritize without losing momentum is not a soft skill. It is the skill.
Closing
More Than a Dashboard
his project was never really about the screens. It was about learning how to think inside a world I did not come from, finance, and finding a way to bring what I already knew into it. The result was a product that works as a system, and a process that I carry into every project I take on now.
Winning Moments
Getting fluent fast: Learning the language of finance, the terms, the priorities, what a finance lead actually cares about at 9am, and translating that into design decisions that made sense to the people using it.
The token system: Building a design token structure from scratch on a project with limited resources and a tight timeline. It kept consistent and cut rework down significantly.
Nuance travels: Realizing that the creative instincts I built in other industries did not need to be left at the door. With the right fine-tuning, they transferred directly into a data-heavy product and made it better.
Lessons Learned
Strategy and detail are not the same fight: Knowing which details matter and which ones do not is the real skill. Balancing the big picture with the right UI decisions is what keeps a product from becoming either too abstract or too precious.
Existing systems are an asset: Leaning on Jakob's Law and established design systems was not a shortcut. It was the right call. It freed up time and energy for the thirty percent that actually needed original thinking.
Stay flexible: You start a project with a plan and reality rearranges it. The ability to reprioritize without losing momentum is not a soft skill. It is the skill.
@shahaf
contact@shahaf.com