Vantis Risk
Contest entry - Mobile Risk Management App Design

A risk profile a
BSA officer reads
in four seconds.

Your wireframe, built out as a complete design language: one composite score, four exposure counters, an action list that always says what to do next. Every screen on this page is a real running interface, not a picture of one. Open it on your phone and use it.

Demo sign in: dana.whitfield@rdcu.org / demo1234. Sample data only, no real member records.

Live prototype, 390 x 844. Tap the gauge, the tiles, the action list.

Brief first

Every element of your wireframe, kept in place

The layout order you drew is the layout order that shipped. Nothing was moved for the sake of looking different, and the four tab destinations are unchanged.

Supplied wireframe

Supplied wireframe

Institution risk profile headingSet in the institution's own name, with charter and membership underneath so an officer knows which entity they are looking at.
Overall health gauge on a dark panelSame arc, same central number. Added: the 0 to 200 scale, the four named bands, the week on week move, and one line saying higher is better so the number is never ambiguous.
Four counters with rings, in your order15 transaction alerts, 10 adverse media mentions, 1 watch-list match, 2 EDD recertifications. Ring colour now carries severity rather than count, so a single watch-list hit reads louder than fifteen routine alerts.
Action List with chevronsYour four rows, word for word, each with a severity badge, its count, and the deadline that decides its position in the list.
Home, Threats, Customers, History tab barFour destinations, unchanged, with a live count badge on Threats.
Room for your logoA 32 px high, 160 px wide slot at top left on every screen, with light and dark lockups and a clear space rule. The prototype labels it, so the reserved space is impossible to miss.
The product

Twelve screens, one language

The home screen is a promise: every number on it opens the work behind it. These are the destinations that promise leads to.

Home
HomeThe wireframe, at full fidelity
Score breakdown
Score breakdownWhy the number is 138
Threat detections
ThreatsQueue, filters, SLA state
Threat detail
Alert caseEvidence, then decision
Watch-list match
Watch-list matchField by field comparison
Adverse media
Adverse mediaMatch confidence, not verdicts
EDD recertification
EDD recertificationA checklist that signs off
Customers
CustomersRisk tiers and flags
Customer profile
Member profileTwelve month score trend
History
HistoryImmutable audit trail
Sign in
Sign inBiometric and SSO
Light theme
Light themeSame tokens, swapped
Style guide

One saturated colour scale, and it means severity

Dark is the shipping theme, for a screen read in a back office at 7am and in a car park at 7pm. Colour carries one job on it: severity. Every pair below clears WCAG AA for its use, and most clear AAA.

Canvas#070E1A
Surface#0F1A2C
Text primary#F1F6FB
Text muted#8297AF
Action#2FC4AC
Critical#F0736A
High#E9A93F
Medium#8F8BE0
Stable#3ECFAE
Informational#8FA6C4

Type hierarchy

RoleSize / lineWeight
Screen title25 / 29700, -2.2% tracking
Score display52 / 52300, tabular figures
Card title16 / 22600
List title14 / 18600
Body15 / 22400
Meta11.5 / 15500, Slate 500
Section label11 / 14700, +10% tracking, caps

Inter throughout, with SF Pro Text on iOS and Roboto on Android as the metric fallbacks. Every figure is tabular so columns of money never dance.

Reusable components

ComponentVariants
Score gauge4 bands, any 0 to N scale
Counter tile5 severities, ring 0 to 100%
Action rowseverity bar, meta, chevron
List itemicon, title, id, meta, tags
Severity tagcritical, high, medium, stable, info
Filter chipon, off, with count
Sheetbreakdown, filters, sort
Buttonsprimary, secondary, danger, ghost, small
Key value rowplain, with severity value, with tag
Banner5 severities, icon plus two lines

Spacing runs on a 4 and 8 point grid. Radii are 8, 12, 16 and 22. Three elevation levels, no others.

Hand-off

Built so your developers do not have to guess

The design is expressed as tokens first. An engineer changes one value and the whole app follows, which is also how the dark theme exists at no extra design cost.

iOSAndroid
SF Pro Text fallback, Dynamic Type to XXLRoboto fallback, font scale to 1.3
Tab bar 49 pt plus home indicatorNavigation bar 56 dp plus gesture inset
Back chevron, swipe to go backSystem back, top left arrow
Sheets with grabber, 82% max heightBottom sheets, same max height
Shadow based elevationElevation 1, 3 and 8 dp equivalents
@1x @2x @3x PNG and PDF vectorsmdpi to xxxhdpi PNG and vector drawables
Face ID unlockBiometric prompt

What ships with the design

Released to the client on award of the contest, not before.

Figma filecomponents, variants, variables, auto layout, 12 screens in dark and light
Token exportJSON plus Swift and Kotlin colour files
Icon set46 icons drawn for this product, SVG and PDF, 24 box, 1.7 stroke
AssetsiOS and Android density sets, app icon, splash
Spec sheetredlines, states, motion timings, accessibility notes
This prototypethe running HTML, yours to keep
AccessibilityBody text at or above 4.5:1, large text at or above 3:1, tap targets at 44 pt and above, severity never carried by colour alone, a full light theme, and a layout that survives a 130% font scale.
StatesLoading, empty, error, offline, past SLA, decided and read only are drawn for every list and every case screen, not assumed.
Motion120 ms for taps, 220 ms for view changes, 420 ms for sheets, one easing curve. Nothing animates that carries a number.