One renewal system with two portals: SecureVault for customers and RenewXpert for resellers.
Smart Renewals is a B2B2C product for enterprise software renewals. Customers need a fast, clear way to renew and tailor a plan. Resellers need to know which accounts to work first and what to say. I designed one system for both, with AI that explains itself and never acts without consent.
The problem
Customers find renewal slow and opaque. Resellers manage many accounts with no clear order of priority. Both lose time and revenue.
What I designed
A customer portal with curated plans, an AI plan builder and a confirm-then-undo renewal. A reseller portal with a prioritised dashboard, a guided workflow and a Client Canvas where an AI agent drafts and modifies offers.
Beyond the screens
A single design system across both portals, a full heuristic evaluation, WCAG 2.1 AA remediation, interruption-safe flows, and AI changes users can see.
No renewal or offer goes out on a single click, and any of them can be undone.
How to read this. The research and personas come from the discovery phase. Everything about the prototype, the audits and the fixes was measured on the final files. Where a number is a target rather than a result, I say so.
Smart Renewals covers renewal for two audiences who sit on opposite sides of the same transaction. Customers renew a plan and adjust it to fit. Resellers manage a portfolio of clients and send offers, so they have to decide where their time goes.
Three constraints shaped every decision: the two portals had to feel like one product, the AI could help but not take control away, and the whole experience had to work for people with different abilities and devices.
| Goal | Design response | How I measure it |
|---|---|---|
| Shorten the path to a confident renewal | Curated plans, a four-question AI plan builder, one confirm step | Time to renew; share of renewals finished without human contact |
| Help resellers choose what to work on first | Quota and at-risk strip, propensity scores, Client Canvas | Clients handled per day; time from alert to first outreach |
| Make AI trustworthy | Methodology panels, source chips, confirm before send, undo | Offer reversals; trust rating in moderated tests |
| Make two products feel like one | Shared tokens, shared components, audience-specific vocabulary | Token and component parity audit (see Quality) |
| Be usable by everyone | WCAG 2.1 AA contrast, names for every control, keyboard shortcuts | axe-core violations; keyboard task completion |
The first two goals trace back to discovery research: 65% of customers found renewal time-consuming and complex, and 60% of resellers struggled to identify priority clients.
Product owner and lead designer. I set scope, wrote the quality gates, directed every design decision and tested the result in the browser. Implementation was done in a pair-building loop with an AI coding assistant, and every claim in this study was checked with tooling.
Figma for wireframes and mockups. HTML, CSS and vanilla JavaScript for the interactive prototype. Playwright for interaction tests and computed-style checks. axe-core for accessibility scans.
Why one HTML file. A React and TypeScript build did not run as expected. I moved to single-file HTML so reviewers could open the prototype with a double click. The trade-off is that the AI is simulated. The prototype can answer questions about interaction and trust. It cannot say anything about model quality.
Discovery and design ran for 12 weeks: five of UX research, personas, flows and architecture, then seven of wireframes, visual design and prototyping. The build and quality phases that followed are described here by outcome rather than by calendar.
Survey, personas, empathy maps, flows, IA, first visual design.
SecureVault and RenewXpert as single-file prototypes.
A reseller call script audited line by line. Nine gaps closed.
Tokens, type, icons, spacing and motion aligned and measured.
Nielsen's ten heuristics applied. Findings fixed one by one.
AA remediation rooted in tokens. Keyboard and motion support.
Draft recovery, visible AI changes, safe navigation.
Dead code, half-pixels, copy audit, publish checks.
The process runs from empathise through define, ideate and design, then adds two stages that carried most of the value: evaluate and iterate. Most improvements came from testing the prototype and fixing what it exposed.
Survey, reseller script, insight synthesis
Personas, empathy maps, how-might-we, principles
Scenario, flows, architecture, scope
System, screens, AI behaviour, motion
Heuristics, WCAG scans, parity audits
Fix, re-measure, repeat until clean
The same work seen as a Double Diamond: two cycles of opening up and narrowing down, first on the problem, then on the solution.
User interviews, the discovery survey and a reseller script walkthrough, to see the whole problem before choosing one.
Personas, empathy maps, core pain points, how-might-we questions and design principles narrow it to a brief.
A scenario, process flow, user flows, information architecture, design system and screens explore the answers.
An interactive prototype, a heuristic evaluation, WCAG remediation and quality gates settle on what ships.
Discovery began with a quantitative survey of existing users across demographics. It asked how people handle renewals today, what slows them down and how they feel about AI help.
The survey showed what was happening. Interviews with customers and resellers explained why. They are the source of each persona's goals, frustrations, needs and motivations.
Participant counts and session notes are not reproduced in this study.
Source: the discovery survey. These are stated preferences and behaviours, which is why the design was tested against heuristics, accessibility checks and scripted scenarios, with moderated usability testing planned next.
Two kinds of data shaped the design: the research data, which split cleanly by audience, and the product data, which the interface has to make readable.
Customer problems cluster around time and tailoring (65%, 80%, 70%). Reseller problems cluster around visibility and priority (70%, 60%). Blue rings are customers and teal rings are resellers. That shape is why there are two portals on one system.
Name, industry, tier, customer since, contact and role, current plan, expiry, yearly spend.
Identity and contract come first, with the contact and a suggested call window beside them.
Renewal likelihood, propensity to upgrade, a health score from 0 to 100, plan utilisation.
Likelihood and propensity answer different questions, so each carries its own label and hint.
Name, yearly price, storage, security, support, features. For resellers: commission rate and amount.
Feature rows align across plans for scanning. Commission appears only in the reseller portal.
Storage use, tickets, engagement events, stakeholders, and offer events such as sent, opened and viewed.
Each signal shows when it happened and where it came from, so a recommendation can point back to evidence.
| Kind of data | Visual form | Where |
|---|---|---|
| A deadline | Countdown ring with the days left | SecureVault dashboard |
| Capacity | Quota ring plus a days-to-full forecast | SecureVault dashboard and Usage |
| A score from 0 to 100 | Ring with a status badge, and five dimension bars | RenewXpert Health Scores |
| Progress to a target | Progress ring with the amount left to close | RenewXpert dashboard |
| Stage and volume | Kanban columns with a propensity figure on each card | RenewXpert Pipeline |
| Change over time | KPI cards with a delta, such as +35% engagement | RenewXpert dashboard |
| Money by confidence | Four stat cards and a confidence bar chart | RenewXpert Forecast |
To test the reseller portal against a realistic conversation, I used a call script written from a reseller's point of view. It defined what the AI agent should say, what it should surface and in what order. I audited the prototype against it line by line and closed nine gaps:
AI picks plans from the account's usage and four answers. It also suggests changes, explains each one and builds a custom plan when asked.
AI ranks accounts by renewal date, value, health and propensity. Inside an account it summarises what matters and why, drafts offers and emails, and modifies a plan on request.
The personas come from the discovery research and interviews. I tied each one to a character in the prototype, so that every screen could be tested against a person with a goal.
| Persona | Prototype character | Scenario data the design is tested against |
|---|---|---|
| John (customer) | Nicholas Miles, CTO, Evergreen Innovations, on SecureVault Essentials | Storage at 6.4 TB of 10 TB with about 48 days to capacity; renewal due in 12 days |
| Jane (reseller) | Anna, Senior Account Manager, APAC, on RenewXpert | Q2 quota at 74% of $25,000, 14 days left, $6,400 to close; Evergreen is the top opportunity |
John, customer
Jane, reseller
Putting the survey, the interviews and the empathy maps side by side, six pain points kept coming back. Three belong to customers and three to resellers.
65% found it time-consuming and complex.
"I wish the renewal process was simpler."
80% value customising a plan to their needs.
"Why can't I compare plans more easily?"
Anxiety about missing a renewal date shows up in the customer empathy map.
"I need timely reminders for renewals."
70% struggled to manage several clients without a central dashboard.
"I need better tools to manage my workload."
60% had difficulty identifying priority clients.
"How can I ensure no client is overlooked?"
Manual tracking and limited AI support appear in the reseller persona's frustrations.
"I wish I had more insights into my clients' needs."
Each pain point has a specific answer in the product. The last column shows where to see it.
| Pain point | Feature | How it removes the pain | Where it lives |
|---|---|---|---|
| 1 Slow, complex renewal | Curated plans, one confirm step, undo | Renewal becomes a short path: see the plans, confirm, done, with a way back | SecureVault Renewals, confirm modal |
| 2 Hard to compare and tailor | AI plan builder, "Customize this plan" under every price | Tailoring happens in place, in plain language, from four answers | SecureVault Renewals and builder |
| 3 Missed deadlines | Countdown ring, action-needed strip, notifications | The deadline is on the first screen, with the next action beside it | SecureVault dashboard |
| 4 No single view | Dashboard, pipeline and health scores in one portal | Every account is in one place, at the level of detail you ask for | RenewXpert Dashboard, Pipeline, Health Scores |
| 5 Unclear priorities | Quota progress, at-risk strip, ranked opportunities | The day's order is decided already, with reasons attached | RenewXpert Dashboard, Opportunities |
| 6 Manual tracking, thin insight | Client Canvas, methodology panel, AI agent that drafts and modifies offers | Insight arrives with its evidence and a next step, without manual digging | RenewXpert Client Canvas and AI panel |
Five rules I used to settle arguments, each visible somewhere specific in the product.
AI shows its method and sources. See the methodology panel on the canvas.
Confirm before send, undo after, drafts on exit.
Loading, a flash on the card and a plain-language summary for every AI change.
Same tokens and components. Different vocabulary for customers and resellers.
Computed styles and automated scans settle questions that eyes cannot.
To keep two products coherent, I wrote a single story and designed every screen to serve it: a reseller, Anna, works the Evergreen Innovations renewal while the customer, Nicholas, receives it.
RenewXpert's dashboard puts Evergreen first: contract ending in 20 days, 97% propensity to renew.
A staged loader assembles CRM data, engagement signals and AI scoring in about two seconds.
Premium Plus at $16,500 a year, a $2,800 commission, with the reasoning and sources one click away.
She asks for a two-year term with 15% off. The card recalculates to $14,030 and flashes to show what changed.
A confirm step, a sandbox email preview and an undo link stand between a click and a send.
SecureVault shows 12 days left, storage at 64% and curated plans.
Four questions produce a custom plan with the reasons written in plain language.
The plan, price and billing terms are shown before he commits, and he can reverse it.
Prototype fidelity. The two portals share the story and the design language, but not live data. Each runs its own scripted version of the scenario. A live cross-portal sync was explored during prototyping and belongs to the API phase.
A renewal moves through five stages, the same ones as the Renewal Workflow bar in RenewXpert. This swimlane shows who does what at each stage: the reseller, the AI agent and the customer.
| Lane | 1 Identify | 2 Research | 3 Engage | 4 Negotiate | 5 Close |
|---|---|---|---|---|---|
| Reseller RenewXpert | Sees ranked priorities and at-risk accounts | Opens the Client Canvas and reads the insights and sources | Reviews the top pick, confirms and sends the offer | Modifies the offer through the AI agent | Sees the renewal closed and the commission updated |
| AI Agent | Ranks accounts by date, value, health and propensity | Summarises the account, explains why, names its sources | Drafts the offer and email, previews in a sandbox | Recalculates price, term and commission | Suggests the next opportunity |
| Customer SecureVault | Sees a renewal due in 12 days | Compares curated plans and usage | Receives the offer | Customises with the AI plan builder | Confirms the renewal, with undo |
Customer steps are scenario-level. The two prototypes do not share live data.
SecureVault, customer
RenewXpert, reseller
A five-step Renewal Workflow bar (Identify, Research, Engage, Negotiate, Close) runs across the reseller portal, so Anna always knows where she is.
Three site maps, drawn level by level: the customer portal, the reseller portal, and the Client Canvas where resellers spend most of their time. Navigation groups mirror the sidebar.
Eight entry points: two before sign-in and six inside the app.
Global, On Every Signed-In Page: Search, Cmd or Ctrl+K, Notifications, Profile and help, Docked AI assistant.
Nine pages in four navigation groups. Opportunities opens the Client Canvas.
Global, On Every Page: Command palette and search, AI Seller Agent panel, Notifications, Profile, help and sign out, Renewal Workflow bar.
Nine content blocks. Offer changes happen through overlays so the canvas itself stays in place.
Around The Canvas: Breadcrumb to Opportunities, Renewal Workflow bar, AI Seller Agent panel, Leave without finishing dialog, Dashboard draft banner.
| Feature | Decision | Why |
|---|---|---|
| AI plan builder, four questions | Built | Tailoring without a sales call is the core customer promise |
| Confirm before commit, and undo | Built | Stops AI and one-click actions from changing things without consent |
| Renewal Workflow bar | Built | Gives a sense of place in a multi-step renewal |
| Draft recovery | Built | Interruptions are normal in a reseller's day |
| Global search and Cmd+K | Built | SecureVault's search looked real but did nothing |
| Dark mode | Cut | The toggle changed an attribute but never the page, and fixing it meant reworking the shared tokens |
| Hover lift on non-clickable cards | Cut | It promised an action that did not exist |
| Live AI model and back end | Deferred | Out of scope for an interaction prototype |
| Live cross-portal sync | Deferred | Belongs to the API phase |
| AAA contrast, phone layouts | Deferred | Needs brand sign-off, and a separate mobile design pass |
The system is built on 211 shared design tokens, Inter and contrast-safe semantic colours. Both portals use the same tokens, and a script confirms there are no mismatches.
Primary#2D5BFC
5.23:1
Success#15803D
5.02:1
Warning#B45309
5.02:1
Danger#DC2626
4.83:1
Muted text#5C6B7D
5.45:1
Ink#0F172A
17.85:1
Contrast shown against white. Every semantic colour clears 4.5:1 for normal text.
Inter 15 / 700Inter 13 / 400, buttons 13 / 600Inter 12Inter 11 / 700, tracking .08emWhole-pixel sizes only. During the final audit I normalised 105 half-pixel font sizes (99 in SecureVault, 6 in RenewXpert) so both portals share one scale. Controls use a 6px radius, cards 10px, KPI cards 12px, badges 4px, with a 1px #E2E8F0 border and a very light shadow.
| Component | SecureVault | RenewXpert | Match |
|---|---|---|---|
| Default button | 36px, 6px radius, 13px / 600 | 36px, 6px radius, 13px / 600 | Yes |
| Small button | 30px, 12px padding, 12px text | 30px, 12px padding, 12px text | Yes |
| Badge | 22px, 4px radius, 11px / 600 | 22px, 4px radius, 11px / 600 | Yes |
| Top bar icon button | 36px, 16px icon | 36px, 16px icon | Yes |
| Avatar | 34px circle | 34px circle | Yes |
| Search field | 36px, 6px radius | 36px, 6px radius | Yes |
| Active nav item | 44px, 15px / 700, #2D5BFC | 44px, 15px / 700, #2D5BFC | Yes |
| Tile | 10px radius, 1px #E2E8F0 | 10px radius, 1px #E2E8F0 | Yes |
| KPI card | 12px radius, 1px #E2E8F0 | 12px radius, 1px #E2E8F0 | Yes |
| Body text | Inter 13px | Inter 13px | Yes |
| Where | Size |
|---|---|
| Top bar buttons | 16px |
| Sidebar navigation | 18px |
| Card titles, notices | 14px |
| Inside buttons | 12px |
| AI avatar, header and message | 13px and 12px |
| Moment | Duration |
|---|---|
| Hover colour change | 120ms |
| Card border, shadow, lift | 150ms |
| Draft banner entrance | 300ms |
| AI typing indicator | 0.9 to 1.3s |
| Plan update loading | 1.3s |
| Canvas generation | 2.3s |
Both portals respect prefers-reduced-motion, and add larger touch targets on touch devices.
Screenshots below come from the running prototypes. Select any image to enlarge it.
The customer portal: renew, compare, customise.
The reseller portal: prioritise, understand, act.
The research said people want AI help. It did not say they would trust it. Every AI behaviour in the product is paired with a pattern that keeps the person in charge.
| AI behaviour | Interface pattern | Why it builds trust |
|---|---|---|
| Recommends | Methodology panel, "Why this recommendation?", source chips, confidence tag | People can inspect the reasoning before accepting it |
| Takes time | Typing indicator, staged canvas loader, loading state on plan changes | Latency is visible and has a reason |
| Suggests what next | Chips after every answer | Removes the blank-page problem and keeps momentum |
| Changes something | Blue flash on the card, "Just updated" badge, summary with the new numbers | The change is announced where people will see it |
| Could send something | Confirm step, sandbox email preview stating that nothing is sent | The user decides when it becomes real |
| Gets it wrong | Undo links, draft recovery, adjust-my-answers | Mistakes are cheap to reverse |
Each started as feedback or a failed test, and each is written up the same way: what was wrong, what I decided and what the tests showed.
Problem
A reseller describes a change in chat and the plan card updated instantly and silently, so it went unnoticed. A second fault hid underneath: when the request began as a chat message instead of the Modify button, the assistant was never told to expect a description. The reply fell through to a generic answer and the card never changed.
Decision
Show a 1.3-second loading state with rotating status text, then apply the change, flash a blue outline round the card for about two seconds, flip the badge to "Just updated" and summarise the numbers in chat. Arm the "awaiting details" state on every entry path. Parse with context, so a percentage next to the word commission is not treated as a discount.
Result
Four phrasings tested end to end. A 15% discount with a two-year term moves the price from $16,500 to $14,030 and the commission from $2,800 to $2,390. Asking to raise commission to 20% leaves the price untouched.
Problem
Leaving a half-finished modification silently dropped the context. The first reminder I built was a pale information banner that was easy to miss.
Decision
A "Leave without finishing?" dialog saves a draft. The dashboard then shows a banner with an amber icon, a bold title and a real Resume button. After review I removed the one-sided accent border and used a uniform border with a tinted fill.
Result
Resume returns to the canvas. Sending the offer clears the draft, so navigation is never blocked once the work is done. Banner text contrast is 5.25:1 on its tint.
Problem
Opening a client canvas starts a 2.3-second generating sequence on a timer. If the reseller clicked Dashboard in that window, the dashboard appeared and then, moments later, the app pulled them back to the canvas.
Decision
Track the timer, and cancel it whenever the user navigates somewhere else.
Result
Tested with Dashboard and Pipeline interruptions, uninterrupted completion and rapid double entry. In every test, the page the user chose last stayed on screen.
Problem
SecureVault's search looked identical to RenewXpert's and did nothing. When I built it, results vanished before a click registered: the dropdown's visibility was tied to input focus, and the input lost focus first. RenewXpert had the same race.
Decision
Grouped results for plans, pages and actions, keyboard control (arrows, Enter, Escape), Cmd or Ctrl+K, and visibility managed in script instead of by focus. Fixed in both portals.
Result
Searching "secur" returns plan, page and action matches that open on click or Enter.
Problem
Clicking Renew committed a plan instantly. An expensive action should never be one stray click away.
Decision
A confirm modal restates the plan, price and billing terms. The success state carries an Undo link that restores the previous plan, banner and carousel. The same pattern protects Send offer in RenewXpert.
Result
Renewing in SecureVault and sending in RenewXpert now follow the same pattern: confirm first, undo after.
Problem
Cards lifted and changed border on hover even when clicking them did nothing. On the RenewXpert pipeline, 13 of 18 cards were filler with no action behind them.
Decision
If it moves, it must do something. I removed hover feedback from non-interactive cards in both portals, and tagged the 13 filler cards and one stakeholder row as static, with a default cursor.
Result
Interactive cards keep their hover and static ones stay still, so movement tells you a card can be clicked.
If it moves, it must do something.
It had spanned the whole window above the sidebar. Moving it into the content area lets the sidebar run the full height.
The workflow bar collided with its own badge whenever the AI panel opened. It now compacts in three stages based on its own width, and keeps step names for screen readers.
Section spacing came down from 88px to 60px. The page is 380px shorter (5,403px to 5,023px) with no content cut.
Before Plan description
"Effortlessly upgrade to SecureVault Pro, our advanced solution designed for expanding businesses, offering scalable storage and reliable multi-layered security."
After Plan description
"Up to 100TB of scalable storage with multi-layered encryption and 24/5 priority support, built for teams that have outgrown Essentials."
A plain-language pass replaced stock marketing phrasing with specifics across both portals.
The target was WCAG 2.1 AA. I scanned 32 views and states with axe-core 4.14 (13 in SecureVault, 19 in RenewXpert), measured contrast on the actual tokens, and tested keyboard paths by hand.
Linear scale. 456 failing elements in total.
The vertical line marks 4.5:1, the WCAG AA minimum for normal text.
| Issue | WCAG | Found | Root cause | Fix |
|---|---|---|---|---|
| Colour contrast | 1.4.3 | 385 (SV 135, RX 250) | Five shared colour tokens, plus dimmed text | Darkened the tokens once; removed text opacity |
| Icon buttons without names | 4.1.2 | 62 (SV 18, RX 44) | Icon-only controls | Names added to every icon-only control |
| Unlabeled toggles | 4.1.2 | 7 (RX Settings) | Checkboxes inside styled labels with no text | Each toggle named from its row's visible label |
| Scrollable region | 2.1.1 | 1 (kanban) | Overflow area unreachable by keyboard | Focusable, with a role and a label |
| Label in name | 2.5.3 | 1 (SV avatar) | Name "User menu" omitted the visible initials | Name now begins with the initials |
| Token | Before | After | Used for |
|---|---|---|---|
| Muted text | #94A3B8, 2.56:1 | #5C6B7D, 5.45:1 | Secondary text, labels, placeholders |
| Success | #16A34A, 3.30:1 | #15803D, 5.02:1 | Positive status and values |
| Warning | #D97706, 3.19:1 | #B45309, 5.02:1 | Caution status and values |
Because both portals share their tokens, one change fixed both and cannot drift.
Every semantic colour passes AA but would fail AAA's 7:1. Meeting it means darkening the whole palette, for example the primary blue toward #1A3BC4, which changes the brand. I documented the options and left the call to brand sign-off.
The gap automated tools cannot see. Many cards and stepper steps are clickable containers with no keyboard access: 22 of 88 clickable elements in SecureVault and 73 of 162 in RenewXpert. axe-core does not flag them, but a keyboard user cannot reach them (WCAG 2.1.1). This is the largest remaining accessibility issue and the first item on the roadmap.
I evaluated the prototype with Nielsen's ten usability heuristics. The method combined expert walkthroughs in both roles, scenario-based tasks, cross-portal consistency checks and deliberate error states such as a wrong password and an empty search.
One cosmetic finding (onboarding and a help centre) is deferred on purpose.
| Heuristic | What works | Gap found |
|---|---|---|
| 1 Visibility of system status | Typing indicator, staged canvas loader, live offer tracking, workflow bar | None open |
| 2 Match with the real world | Customers read "renew" and "plan"; resellers read "offer" and "propensity" | Search advertised a shortcut that did not exist |
| 3 User control and freedom | Every modal and dropdown can be dismissed | Dead links; no undo after commit |
| 4 Consistency and standards | One visual language across both portals | Identical search bars behaved differently; a mislabeled help link |
| 5 Error prevention | Form validation catches bad input before it is sent | Renewal committed in one click |
| 6 Recognition over recall | Persistent navigation, context labels, suggestion chips | Two routes to one answer looked different |
| 7 Flexibility and efficiency | Chips and a command palette for experts | SecureVault had no accelerators |
| 8 Aesthetic and minimalist design | Dense screens grouped into scannable cards | None open |
| 9 Recover from errors | Plain-language messages, a useful empty search state | None open |
| 10 Help and documentation | Real shortcut list, tooltips on badges | No onboarding or help centre |
| # | Finding | Severity | Resolution |
|---|---|---|---|
| 1 | SecureVault search looked functional and did nothing | Major | Built grouped search with keyboard control; fixed the focus race in both portals |
| 2 | Renewing committed a plan in one click | Major | Confirm modal stating plan, price and billing terms |
| 3 | Search hinted at Cmd+K, which did not exist | Minor | Implemented with finding 1 |
| 4 | "Forgot password" and "Contact your account manager" were dead links | Minor | A plain inline message explains what the preview does |
| 5 | "Help and keyboard shortcuts" opened the Support page | Minor | Opens the assistant with the real shortcut list |
| 6 | Two routes to the urgent-renewal answer looked different | Minor | My premise was imprecise: they were two features. Restoring chat history now renders the same cards |
| 7 | No undo after committing an action | Cosmetic | Undo on the SecureVault renewal and the RenewXpert offer |
| 8 | No help beyond a shortcut list | Cosmetic | Deferred Onboarding and a help centre are on the roadmap |
I set quality gates that a script could verify, then re-ran them after every change.
| Audit | Method | Result |
|---|---|---|
| Token parity | Script compares all custom properties in both files | 211 tokens, 0 mismatches |
| Component parity | Computed styles read from the running pages | 10 components match (see Design system) |
| Typography | Search for fractional font sizes | 105 half-pixel sizes normalised (99 SV, 6 RX) |
| Icon sizing | Computed icon sizes by location | Five size rules applied in both portals |
| Dead code | Unused function and class scan, then checked by hand | More than 120 unused CSS rules removed from RenewXpert, 7 from SecureVault, 1 dead function |
| Copy | Manual read of every visible string | About 150 strings reworded; plan descriptions rebuilt around specifics |
| Release hygiene | Search for debug code, structure checks | No console logging, no TODOs, valid structure, meta description and favicon on both |
| Accessibility | axe-core on every view, modal and overlay | 32 views and states, 0 violations |
A toggle that does not work is worse than no toggle.
| What I saw | Root cause | Fix | Lesson |
|---|---|---|---|
| The dark mode toggle changed an icon but not the page | A later global override redefined the same colour variables. Equal specificity, later source order, so it always won | Removed the feature | Remove a feature before shipping it half-working |
| The banner's dismiss button would not click | An invisible decorative circle overlapped it and took the clicks | Decorative layers ignore pointer input | Decorative layers should ignore pointer input |
| A dashboard click was undone two seconds later | An untracked timer from canvas generation | Track the timer and cancel it on navigation | Every timer needs an owner |
| Search results vanished before a click | Visibility was tied to input focus | Manage visibility in script | Do not bind interface state to focus |
| A typed discount request got a generic reply | The chat was told to expect details on only one entry path | Arm it on every path and reset it when another option is chosen | Set conversation state on every entry path |
| "Raise commission to 20%" cut the price by 20% | Any percentage was read as a discount | Context-aware parsing | Read the whole phrase before reading its numbers |
| The stepper collided with its badge when the AI panel opened | Breakpoints followed the viewport, but the constraint was the container | Container queries in three stages | Size components to their container |
| "Zero violations on every page" was not true | My sweeps listed pages by hand and skipped Settings | Found 7 unlabeled toggles; rebuilt the sweep to cover every view | Generate coverage from the navigation, and say what the tool cannot see |
Renewals run on deadlines and promises. A missed renewal window, a slow reply or an unresolved ticket is a service-level failure before it is a design failure. I treated service levels and compliance as design inputs, then checked each against what the prototype does.
| Moment | Commitment at stake | How the design supports it |
|---|---|---|
| Renewal window | The customer renews before the contract expires | A countdown ring and an "expiring in 12 days" headline on the first screen, an action-needed strip, and notifications |
| First response to a client | A reseller follows up quickly once a client shows interest | Offer-opened alerts, a suggested call window on the canvas, and AI-drafted follow-ups ready to send |
| Unresolved tickets | Open tickets are visible before they threaten a renewal | The at-risk strip names accounts with open tickets, and the engagement feed shows when each ticket was raised |
| Support coverage by plan | The support hours each plan promises | Plans state coverage in plain terms: email in business hours (Essentials), 24/5 priority (Pro), 24/7 with a success manager (Premium), custom SLAs (Enterprise) |
| Sending an offer | A send is never silent or accidental | A confirm step, a sandbox email preview, offer tracking and undo |
| Area | What the prototype does | Status |
|---|---|---|
| Accessibility, WCAG 2.1 AA | Zero axe-core violations across 32 views and states, keyboard shortcuts, reduced motion | Partly Click-only cards still need keyboard access |
| Data residency and privacy (GDPR, CCPA, PDPA) | Compliance updates surface in SecureVault notifications and on its dashboard. RenewXpert offers can bundle a compliance pack for regional requirements | Content only Enforcement belongs to the back end |
| Consent for actions | Confirm before sending or renewing, a sandbox preview that sends nothing, undo after commit | In place |
| Audit trail | Offer events (sent, opened, viewed) are tracked and shown in the feed | Partly No persistent audit log yet |
The prototype has no live SLA data. Items marked as targets are hypotheses. The verified items describe what the interface does. They say nothing about results in service.
How I will measure it after launch. Share of renewals completed before expiry. Median time from offer opened to first follow-up. Share of at-risk accounts whose open ticket is older than its SLA. Share of sends and renewals that went through the confirm step. Accessibility audit pass rate.
The prototype has no real users yet, so these are targets from the discovery phase, not results. Moderated testing will replace each with a measurement.
| Metric | Baseline | Target | How I will measure it | Status |
|---|---|---|---|---|
| Renewal completion time (customer) | 20 to 30 min | 5 to 10 min | Timed task in moderated tests | Not measured |
| Missed renewals (customer) | 35% | Under 10% | Renewal funnel analytics after launch | Not measured |
| Customisation requests | Manual, by email or call | In-app, AI-assisted | Share of requests started in the builder | Not measured |
| Reseller prioritisation accuracy | Low, manual tracking | AI-ranked insight | Agreement between ranking and expert choice | Not measured |
| Customer satisfaction | 3.2 of 5 | 4.6 of 5 | Post-task survey | Not measured |
| Reseller productivity | 10 to 12 clients a day | 18 to 20 | Clients handled in a timed scenario | Not measured |
| Response time to client queries | 8 hours | 1 to 2 hours with AI help | Time from alert to first outreach | Not measured |
| Segment | Stage | Behaviour to observe | Signal |
|---|---|---|---|
| New customers | Awareness to trial | Starts the plan builder and finishes it | Builder completion rate |
| Returning customers | Trial to regular use | Renews through the portal and reuses AI suggestions | Repeat renewals in portal |
| Power customers | Regular use to advocacy | Customises independently and refers others | Custom plans, referrals |
| New resellers | Awareness to trial | Uses the dashboard before trusting the AI | Dashboard use before first AI prompt |
| Experienced resellers | Regular use to power use | Works from the canvas and modifies offers | Canvas opens, modifications sent |
Now
Next
Later