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 300 scale, the four named bands, the week on week move, and one line saying lower 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 bar 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 ships a neutral placeholder mark so the space is honest about its size.
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
Dark mode
Dark modeSame tokens, inverted
Style guide

Muted, professional, and legible under fluorescent light

Colour carries one job in this product: severity. Nothing else is allowed to be saturated, so when something is red it means something. Every pair below passes WCAG AA for its use.

Harbor Ink#101E2E
Harbor Blue#1E5F8C
Slate 700#35485F
Slate 500#697D95
Canvas#F1F4F8
Critical#A6423B
High#B07A22
Medium#6D6BA8
Stable#2A7F72
Informational#4A5C7A

Type hierarchy

RoleSize / lineWeight
Screen title25 / 29700, -2.2% tracking
Score display57 / 57500, 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 light and dark
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, full dark 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.