Design Action Items
Changes to the live Strad Pro app, ordered so the cheap ones with the widest reach come first. The redesign demo is a direction, not a spec. Each item is a standard to settle on. How you build it is your call.
The app is part way through a migration, and that sits behind most of what follows. The navy and brass shell is in place, and a few modules have caught up with it: Insurance has summary tiles, tabs, search and pagination. Others have not moved. All Financial Accounts is still a grid of raw inputs, and the sign-in page still uses browser default buttons. Clients notice that gap. Tier 1 is aimed at closing it.
How the tiers differ
Each tier sits one layer deeper in the app than the one before it, which is why the order matters. A tier is harder than the one above it because more of the product sits underneath, not because it holds more work.
- Tier 1Global stylesheet
- One edit reaches every screen. No component code is touched and nothing gets re-tested beyond a look. Worth doing first regardless of what else is underway.
- Tier 2Components
- The pieces that repeat: inputs, tables, chips, wording. Each fix is small, but it has to reach everywhere that piece already shows up, so the cost tracks how far it spread.
- Tier 3Structure
- Tokens, a shared component library, layout and information architecture. This is what keeps tiers 1 and 2 from unwinding, so start it before they are done.
Tier 1 · Global, and almost free
7 items · Global stylesheetStylesheet work, no component rewrites. Each one reaches every screen, which is why they come first. Together they do most of the work of making the older modules and the newer ones look related.
Cut the corner radii to three values
One radius for controls, one for cards, one for fully round. Nothing else. Keep asymmetric radii for the places where two surfaces actually join, like a tab meeting its panel.
ObservedTen different radii on the Accounts screen alone: 7px, 10px, 5px, 4px, 12px, 50%, plus four asymmetric combinations including 0 0 3px 3px and 3px 0 0 3px.
Fix the fractional hairlines
Borders should land on whole pixels. Right now they do not, because the app renders inside a page-zoom transform and every hairline gets scaled with it. Either set border widths against the scaled root, or move the zoom control to a font-size scale.
ObservedBorder widths computing to 0.555556px and 2.77778px, on 270 and 16 elements. Sub-pixel borders drop out or double depending on the display.
Give buttons four roles and nothing else
Primary, secondary, quiet, destructive. Every action picks one. Two buttons of equal weight sitting side by side usually means nobody decided which was the main one.
ObservedSign-in renders browser defaults: Arial at 13.3px on a #CECCC6 fill, while the rest of the page is Inter. Inside the app, "Add Account" is bordered and "Add Investment Policy" next to it is bare text. On Insurance, "Add" and "Request Insurance Review" carry the same weight.
Cut the palette down to the system
Navy shell, one brass accent, ink on warm paper. Green, red and amber only for gains, losses and warnings. Everything else should map to one of those or go.
ObservedSeventeen text colors and twenty-seven background colors on a single screen. Brass has landed in the shell, but legacy blue #085985 still carries links in twenty places, alongside emerald, sky, periwinkle and orange.
Set a type scale and a floor
Four sizes for body and labels, three for figures, three weights. Nothing under 12px, and no fractional sizes. People read financial data for long stretches, so the floor matters more here than in most products.
ObservedTen to eleven font sizes per screen, including an 8px and an 11px, and six weights in use from 300 to 900.
Raise touch targets to 44px
Advisors demo this on an iPad and clients open it on tablets. Anything tappable needs a 44px target, even where the visible control stays smaller.
ObservedNine of eleven interactive controls on the sign-in screen fall under 44px. Table inputs run 28px to 32px.
Stop the system banners covering content
Put them in the flow, or let a dismissal stick. A notice that permanently sits on top of the data is worse than no notice.
ObservedTwo fixed bars sit over the foot of every screen. On Accounts they cover the portfolio disclaimer. On Insurance they cover the totals row.
Tier 2 · Component consistency
8 items · ComponentsThe recurring pieces. These need code rather than CSS, but they stay inside the screens you already have and do not require re-architecting anything. Item 09 is the one that changes how finished the product feels.
One input component
One height, one border, one focus state, one label position, one required marker, one error style. Every field comes from that component rather than fresh markup.
ObservedFour input geometries on one screen: 102 at 32px with no border, 17 at 28px with a hairline, plus two one-offs. On sign-in the required asterisk is jammed against the label and the password reveal icon sits outside the field.
Separate reading from editing
Data screens should open in a read view. Editing is something you enter on purpose, by row or in a panel. Most visits are to look something up, and a screen permanently dressed for editing looks unfinished even when the data behind it is right.
ObservedAll Financial Accounts renders 104 inputs and 17 selects permanently in edit mode, so a page meant for reading shows eighteen empty mm-dd-yyyy placeholders and eighteen dropdowns reading "total" and "Other".
One table standard
Currency right-aligned in tabular numerals, one currency format, one date format, one way to show an empty cell. Numbers are the point of these screens, and alignment is what lets someone scan a column.
ObservedAlignment splits 87 start, 17 right, 17 center on one screen. Row values print as bare numbers such as 75,300 while the totals row prints $10,012,116.
Do not render an empty column or a zero tile
If a column has no values for this household, hide it. If a summary figure can only be zero because its source column is empty, do not show the tile. An empty state that says why is better than a row of zeros.
ObservedInsurance shows five columns empty on every row: Insurance Agency, Ann. Premium, Face Amt/Coverage, Cash Value, Insured Value. Three of its four summary tiles read $0, $0 and 0 as a result.
Write the wording standards
Cheap to do, and it shows right away. Buttons are verbs. Sentence case except the wordmark. One name per concept across the app. Column headers abbreviate the same way or not at all. Errors say what to do next.
ObservedThe sidebar item "Insurance & Risk Protection" opens a page titled "Insurance". Column headers pair "Gain/Loss Amt" with "Gain/Loss %".
Give imported records a real display name
Import identifiers should not reach the client. Add a naming step on import, fall back to institution plus account type, and let advisors change it later.
ObservedThe Accounts table shows imported-CTvae, imported-cXcSy and imported-QjjyE as account titles, alongside Loan_201, Mortgage_INSTL and MoneyMarketAccount. The three imported rows carry roughly $9.5M between them.
One chip treatment, status only
Keep the colored chip for state. Category and type read fine as plain text in the cell. Once every value in a row wears a tinted capsule, the screen starts to look like a parts bin.
ObservedInsurance colors its Type column orange, amber and blue while also running green status chips. Accounts uses no chips at all for the same kind of information.
Label the icon toolbars, and drop the tinted tiles
Unlabeled icons can only be learned by clicking them. Tooltips at minimum, text labels where there is room. Separately, put icons straight on the surface instead of inside a colored rounded square.
ObservedFive unlabeled icons top left, four top right, five bottom left, none with a text label. Insurance sets its four summary icons in four differently tinted tiles, none of which belong to the brass system. Our redesign demo does this too, and it is on our list to remove.
Tier 3 · Structural
7 items · StructureActual engineering. These are what keep tiers 1 and 2 from unwinding, and they are worth starting before the earlier tiers finish. Item 16 should start now, because every decision above needs somewhere to live.
Extract design tokens
Every color, size, radius, spacing step and shadow becomes a named custom property, and component code references nothing else. Skip this and tiers 1 and 2 become a cleanup that drifts back inside two release cycles.
ObservedThese values currently sit across component stylesheets, which is how one screen ends up holding ten radii and twenty-seven backgrounds without anyone noticing.
Build the shared component library
Button, input, select, table, tabs, chip, card, modal, slide-over, page header. One version of each, with the old copies deleted rather than deprecated. Add a route that renders every component in every state, so anyone can check what already exists before building a second one.
ObservedInsurance and Accounts already implement tabs, tables and buttons differently, which is the cost of not having this.
Adopt a spacing scale
A 4px base and a fixed set of steps. No one-off margins. Most of what reads as slightly off in a dense screen is spacing picked per element instead of taken from a scale.
ObservedBest done alongside item 17, since the components are where the spacing decisions concentrate.
Standardize the page header
Same place, same size, on every screen. Optional subtitle underneath, actions right-aligned in a fixed order. It is a large part of why an app feels like one product as you move through it.
ObservedThree screens, three headers. Accounts sets its title beside a bare-text action and a stray floating pencil control. Insurance sets title plus subtitle above summary tiles. Family & Team sets a colored "Family Office Setup" tab beside the title.
Resolve the two navigations
Where a left rail lists the same records as the table next to it, pick one. A secondary rail should filter or group, not repeat. Listing the table's contents twice doubles the maintenance and halves the reading width.
ObservedOn Accounts the left rail lists every account as an underlined blue link while the table to its right lists the same accounts again.
Replace page zoom with responsive layout
A zoom control in the header is a workaround for a layout that does not adapt, and it is also what causes item 02. Move to a fluid layout with sensible maximum widths, so a tablet and a large monitor both look deliberate.
ObservedA 90% zoom control ships in the header. The sign-in card is hard-coded to 795px. Every screen sampled left roughly a quarter to a third of the viewport empty below the content.
Accessibility pass
Labels on every control, contrast to WCAG AA, a visible focus state, and a keyboard path through each flow. For a product holding estate and health records, that is a compliance matter as much as a quality one.
Observed120 of 121 form controls on the Accounts screen have no associated label, no aria-label and no title attribute.
If only five things get done
In order. The first four fit inside a sprint. The last one does not.
- 03Give buttons four roles. Nothing else shifts how finished the product looks for so little work.
- 04Cut the palette. Seventeen text colors on one screen is most of why it reads as several products.
- 13Stop showing import identifiers to clients. It is the one item here that a non-technical viewer will spot on their own.
- 11Hide empty columns and zero tiles. Right now the product looks like it holds no data when it does.
- 09Separate reading from editing on Accounts. Biggest gain on the list, and the only one of these five that needs real time.
Anything marked Observed is a value read off the live app in August 2026, on the SAMPLE0 demonstration household: the advisor sign-in page, Family & Team, All Financial Accounts and Insurance. The items are written to apply generally, but each one came from a real screen. Effort compares each item against the others here rather than against a calendar. Color, type, spacing and component definitions are in the Technical Specs.