UI/UX Redesign

Application UI Concept

A proposed look & feel for Abeyon’s web application screens: layout, color palette, typography, and visual hierarchy. Built with Section 508 accessibility in mind: WCAG AA contrast, keyboard focus states, and semantic markup.

Key Screen

Contract Review, Reimagined

The screen below is a working redesign concept of a contract-document review workspace, using the field structure from Abeyon’s published Clarifi and PILOT IRS work as the reference. Illustrative data shown.

clarifi
FPDS-NG user: SamuelGobrail
Document: 2032H5-18-F-01275 Mod-P00002 (1).pdf
Information IdentifiedContract DocumentData from FPDS-NGMatch
Contract #2032H518F012752032H518F01275Match
Obligated Amount$379,000.00$379,000.00Match
Date Signed2020-04-172020-04-16Review
Mod #P00002P00002Match
Contractor NameCREATIVE SYSTEMS AND CONSULTINGCREATIVE SYSTEMS AND CONSULTING L.L.C.Review
CountryUSUSAMatch
Place of PerformanceUSUSMatch
Color Palette

Brand-Led, AA Contrast

Abeyon Coral #FC533C
Ink #1D2127
Surface #F6F6F6
Paper #FFFFFF
Confirm #1D7A3D

One accent, one confirm tone, neutral surfaces. Status is never carried by color alone: every state pairs color with a text label for Section 508.

Typography

Visual Hierarchy

Display / Lato Light
Section heading / Lato Regular
Body copy / 1.65 line height for long-form review work
Data label / tracked caps
UX Notes

Proposed Improvements

Single review surface

Document upload, extraction results, and FPDS-NG comparison live on one screen, so analysts confirm or correct without switching views.

Status you can read

Match and Review states use text badges with AA-contrast colors, keyboard focus outlines, and semantic table markup for screen readers.

Progressive disclosure

Row hover surfaces detail; deep metadata stays one click away instead of crowding the primary grid.

Responsive by default

The grid collapses to a scrollable card list under 720px, keeping field pairs aligned on tablets used in review sessions.