Redesigned platform providing simpler access to Government Services
Summary
Role
User Research
Usability Testing
Wire-framing & Prototyping
Visual Design
Tools
Timeline
3 Months
Project Overview
Spark is a platform simplifying access to government services, including DMV appointments, passport renewals, SBA loans, and more.
Challenges
Content Representation
Excessive texts, outdated visuals and a poor content hirarchy made the website difficult to navigate and less engaging to users.
Mobile responsiveness
The platform’s designs were not optimized for mobile devices, leading to awkward layouts and poor user experiences on smaller screens.
Fixing cluttered layout
Overuse of bold text and crowded arrangements reducing readability and visual clarity across all the screens.
User flow
Some of the user flow like the upselling modals have inconsistent screens and disjoined flows, resulting in a confusing user and layout disarray.
Responsibilities
I contributed towards streamlining on how users accessed essential services, translating product needs and service offerings into clean, responsive user interface.
The app already had an wide audience, so my focus was aligning with ongoing work and executing high-quality UI that fit seamlessly into the system.
Design Goals
-
Designed scalable UI components (cards, navigation, forms) used across homepage and service flows
-
Executed responsive layouts for desktop and mobile, following accessibility standards
-
Developed visual documentation for typography, colors, and reusable components in Figma
-
Collaborated with developers on handoff, ensuring fidelity and layout integrity post-implementation
-
Adapted designs based on product feedback, learning to prioritize clarity and simplicity
Challenges
Content Representation
Excessive texts, outdated visuals and a poor content hirarchy make the website difficult to navigate and less engaging to users.
Mobile responsiveness
The platform’s designs were not optimized for mobile devices, leading to awkward layouts and poor user experiences on smaller screens.
Bold typography and cluttered layout
Overuse of bold text and crowded arrangements reducing readability and visual clarity across all the screens.
User flow
Some of the user flow like the upselling modals have inconsistent screens and disjoined flows, resulting in a confusing user and layout disarray.
Responsibilities
I contributed towards streamlining on how users accessed essential services, translating product needs and service offerings into clean, responsive user interface.
The app already had an wide audience, so my focus was aligning with ongoing work and executing high-quality UI that fit seamlessly into the system.
Design Goals
-
Designed scalable UI components (cards, navigation, forms) used across homepage and service flows
-
Executed responsive layouts for desktop and mobile, following accessibility standards
-
Developed visual documentation for typography, colors, and reusable components in Figma
-
Collaborated with developers on handoff, ensuring fidelity and layout integrity post-implementation
-
Adapted designs based on product feedback, learning to prioritize clarity and simplicity
Redesign
The high-fidelity designs adopted a deeper blue for better contrast, replaced bold text with a balanced typography system, and introduced card-based layouts for clarity and adpatability. My core focus was on:
-
Funding Tracker Card: Positioned on the home screen with real-time funding goal visuals.
-
Upselling Modals: Timed popups showing plan comparisons (e.g., current vs. premium benefits).
-
Payment Screens: Integrated into the upgrade flow with a seamless checkout experience.
Style Guide
Components
The components of the website are designed in all the Sates. Added new components.
Design in Staging
Simplifying Content
