Bank statement
Last 3 months, PDF, issued by your bank.
Shows the state of a document, request, application or payment. Always icon + label + color, so color is never the only signal.
Shows when something is due. It is separate from the state: a Needed item can also be overdue. Overdue is the only solid red element in the portal.
One primary action per screen. Say exactly what happens: "Upload document", not "Submit". Comfortable is 48px high for the client portal; Compact is 36px for staff.
The label is always visible. Errors say what is wrong and how to fix it. Identity fields use "Full name (as on passport)" because spelling must match the passport exactly.
The core client pattern: "What we need from you". One card per request, each with a state, a deadline and one clear action. Waiting-on-third-party items show no button and no due date.
Last 3 months, PDF, issued by your bank.
Two answers are missing. See the note from your case officer.
We shortlisted 4 options that match your profile.
Pay by bank transfer, then upload your proof of payment.
Approved on Mon 5 Oct.
Submitted on Sat 3 Oct. Nothing for you to do. We will tell you when it changes.
This test is no longer valid (older than 2 years). Please send a new result by Mon 26 Oct.
Available after your offer letter is received.
Camera-first for phones, with the requirement visible at the point of upload. Uploads resume after a lost connection. A rejected document always shows the reason and a new deadline.
PDF, JPG or PNG, up to 10 MB. Last 3 months, showing your name and account number. See a sample
We have it and will review it soon. We will email you when it is checked.
Shows where the case is across a 6 to 18 month journey. Progress uses the brand color, not status green. The summary is for the dashboard; the full list is for the case page.
Step 4 of 9
Next: we start your applications as soon as you choose. Reply by Wed 14 Oct.
Contract signed
Done on Mon 7 Sep
Initial documents
Done on Fri 2 Oct
Document review
Done on Thu 8 Oct
Choose your universities (current step)
You are here. 1 decision needed.
Applications
We submit them for you
Offers
Visa preparation
Visa application
Decision
For messages about the whole page or case. Four tones reuse the status colors. Use sparingly: one banner per screen.
A running history of the case. It answers "what is happening?" without a phone call. Most recent first. Dates are absolute plus relative.
University options sent to you
We shortlisted 4 options. Please choose by Wed 14 Oct.
Today, 09:10 · Your case officerAll documents approved
Your file is complete.
Thu 8 Oct, 16:25 · Document teamBank statement needs fixing
The statement was older than 3 months. New deadline: Mon 19 Oct.
Tue 6 Oct, 11:02 · Document teamYou uploaded 6 documents
Fri 2 Oct, 20:44 · YouContract signed. Welcome!
Your document checklist is ready.
Mon 7 Sep, 14:00 · Your case officerSecure messages tied to the case. They replace email back-and-forth. Incoming messages align to the start, the client's own to the end, so the layout mirrors automatically in a right-to-left language.
Hello! I sent you 4 university options. Which ones would you like us to apply to?
Thank you. Can I choose two now and decide on the others later?
Yes. Please choose the first two by Wednesday. I attached the fee overview.
fee-overview.pdf · 180 KBUsed when there is nothing to show. For long waits, it reassures: it says what is happening and what the client should do (often nothing).
Your case officer is preparing your applications. We will email you as soon as something changes.
When your case officer writes to you, the message will appear here.
Where a document specialist approves or rejects a file. Compact density. A rejection needs a reason and a new deadline, and shows a preview of the message the client will see.
Example client · CA-STU-0142 · Uploaded today, 09:40
Hello! I sent you 4 university options.
Thank you. I will choose today.
Several figures in one white card, each with a tinted icon chip. Used for the summary row at the top of a dashboard. The tint adds meaning only together with the label.
The side card holds one headline figure, an illustration, two thin meters and one dark action. The help card sits in the sidebar and offers support in a friendly voice.
Next: application fee, due Thu 22 Oct.
See payment detailsYour case officer replies on working days.
Send a messageLine illustrations use the text color for outlines and the brand tints for fills. Decorative: hidden from screen readers.
A smooth curve with one highlighted point and a dark tooltip. On a client dashboard it shows the case journey; on the staff console it shows weekly volume. The chart always has a text alternative, and scrolls sideways on narrow screens instead of shrinking its text.
Staff work lists: a title, tabs, a search field and a switch above a data table. The table scrolls sideways on narrow screens. Row actions name the row for screen readers.
| Client | Case | Document | Waiting | Status | Action |
|---|---|---|---|---|---|
| Hamid R. | CA-STU-0150 | Language test result | 5 days | In review | |
| Ali M. | CA-STU-0119 | Transcript (translated) | 2 days | In review | |
| Sara A. | CA-STU-0142 | Bank statement | 2 h | In review |
The full screens, live. Open them in their own tab to test keyboard use and zoom.