Solo Project
← Back to WorkLegal Request Hub for Asurion Korea
Mock Image01 — Context
Summary
After learning that the Legal team was losing track of contract review requests managed through email and verbal communication, I designed and built an internal platform from scratch to standardize the entire process — from submission to review to history management — in one place. I owned the project end-to-end: design, UX, frontend development, and database setup.
02 — Challenge
Problem
The Legal team had already tried to standardize the process using a SharePoint form, but it fell short — approvals were still handled manually, follow-ups had to be chased down by hand, and completing a single request meant several rounds of back-and-forth email. Without a way to track status, manage history, or handle the full review lifecycle in one place, requests continued to get lost and the process remained inconsistent depending on who was handling it. Revised and signed contract documents were also scattered across individual employees' personal PCs, with no systematic way to manage them.
03 — Approach
What I Did
UX/UI
- Designed with a restrained slate palette to establish a tone of trust and professionalism — appropriate for a legal workflow context.
- Defined every color, spacing, radius, and shadow value as a design token in _variables.scss, with every screen referencing that single source — so the entire look can be updated from one place.
- Chose not to use a UI library, for the sake of control and consistency across the project, and built components from scratch instead. Accessibility was the baseline: semantic HTML, proper labeling, focus management, and full keyboard navigation, all handled in custom SCSS.
- Replaced browser- and OS-dependent elements — <select>, date inputs, modals — whose behavior varies unpredictably across environments, with themed, keyboard-accessible custom components (Select, DatePicker, ConfirmDialog). Implemented focus trapping, focus return, and background scroll lock for modals myself.
- As the number of components grew, states and variants became easy to lose track of, so I built a separate Component Lab to review each component's states, interactions, accessibility, and API — keeping reusability and quality consistent over time.
- Implemented a fully responsive layout that accounted for mobile hamburger navigation, 200% browser zoom, and long text line-wrapping.
Tech Stack & Architecture
- Chose React, TypeScript, Vite, and SCSS as the stack — SSR and SEO were not requirements, so a lightweight, interaction-heavy SPA was the better fit for this tool.
- Split frontend and backend, but shared validation logic and types through a common module — keeping rules like deadline validation and data types in one place that both client and server rely on, eliminating an entire class of bugs caused by client/server validation drifting apart.
- Separated environment configuration from code via runtime injection instead of hardcoding, and stored uploaded files in object storage rather than volatile local disk. Containerized the SPA and API together in a single Docker container, so the app stays stable through redeploys and restarts.
- Applied client-side routing that preserves list state in the URL — search, filters, and page state all live in the URL, so returning from a detail view restores the exact previous context.
Infrastructure & Data Design
- Structured S3 storage by employee ID and request number, so every file is traceable and organized from the moment it's uploaded.
- Implemented SSO-based authentication and integrated Secret Manager, following internal infrastructure team standards throughout.
- Designed the database schema and submitted it as a DDL request to the infrastructure team, defining the full data structure before implementation began.
- Designed and implemented a status notification system — admins receive alerts via Microsoft Teams webhooks, and requesters via email through AWS SES, keeping both parties informed without manual follow-up.
04 — Outcome
Result
The Legal team responded with strong enthusiasm — feedback was overwhelmingly positive. Shortly after launch, the Finance team reached out asking whether their LOA self-check approval process could be integrated into the same platform, which immediately opened Phase 2 discussions. Additional features including a template library and GNE policy management are also on the roadmap for the next phase.