UX/UI Case Study
Project Overview
The Challenge
The challenge was bridging gaps in financial modeling education for organizations that lacked a single, accessible, and comprehensive learning solution. Teams struggled with steep learning curves as complex scenario-modeling concepts proved difficult to translate. Traditional training methods often failed to balance depth with clarity, leaving learners overwhelmed and underprepared.
Design Process
Designing clear, scalable systems that balance trust, clarity, and accessibility.
Visual & Brand System
A restrained color system was developed to balance professionalism with approachability, using deep navy tones to convey trust and expertise, paired with a vibrant accent color to guide actions and signal progress. A subtle gradient was introduced in hero areas to add visual depth without distracting from content.
Typography
Layout
Component Design
Reusable UI components were designed for scalability, including content cards, buttons, and informational modules. Primary and secondary button styles clearly distinguished key actions.
Accessibility & Usability
Accessibility was embedded from the start, with WCAG-aligned color contrast, keyboard navigation support, and clear visual focus indicators. The interface was designed to support users with varying abilities while maintaining a polished, enterprise-grade aesthetic.
Synario Interactive Quiz Section
This section focuses on designing an interactive quiz experience for Synario Academy that improves knowledge retention through clear structure, immediate feedback, and accessible visual design.
Key Design Decisions
Building an Engaging Quiz Experience
Outcome & Impact
The design performed well due to the strong color contrast between navy and green, which clearly separates content from actions, while consistent border treatments with green outlines and a 20px radius establish a cohesive component identity. A multi-typeface system successfully creates distinct visual zones without feeling fragmented, and generous white space paired with clear sectioning improves usability for busy professionals.
