Hosting control panel redesigned for the iPad
A desktop control panel that had to fit in two hands.
- Role
- Product & UI Designer, solo
- Product
- UltaHost · hosting control panel
- Scope
- iPad app, both orientations
Results
- Every fieldof an invoice kept when the tables became cards: number, dates, amount and status in one touch-sized card
- 1stat-card component covering every card on the dashboard, the overdue variant included
UltaHost is a hosting provider whose desktop control panel holds customers' services, domains, invoices and support tickets. I redesigned it for the tablet in both orientations, built its component system and tested the prototype on a real iPad. Tables became cards without losing an invoice field, and a colour or a state changes everywhere in one edit.
Introduction
A desktop panel, on a device that is neither phone nor desktop.
The panel was built for the desktop, and the screens that matter most show it: dense, multi-column tables. On an 11-inch iPad in portrait there is no room to keep those columns and give every action a touch-sized target, so the table itself had to change.
Portrait first
Portrait set the rules, landscape got its own pass.
At 834 points a tablet stops being a small desktop, so the iPad in portrait became the lens for the whole redesign. Landscape then got its own wider grid, so the interface reflows instead of scaling up. Two complete layouts cost close to twice the drawing time, and neither orientation reads as an afterthought.
Cards
Tables became cards, and no field was lost.
Horizontal scroll and hidden columns both push a decision onto the user and hide what a hosting customer reads: amount, date, status. So each record became a card with the same fields, laid out for a narrow, touch-first column. Cards give up comparing column to column; for records you act on one at a time, that trade is worth it.
System
Variables and components came before the screens.
Fonts, colours and spacing from the live site sit in Figma as variables and styles, and every screen is built from them, AA-safe status pairs included. Components carry real variants and a pressed state, because a touch interface has to answer the finger. Slower to the first frame, it pays back the moment a colour has to change everywhere.
Payments
The prototype goes deep only where money moves.
Invoices and the Pay sheet reached from the overdue alert are fully clickable, with the balance after paying shown before the customer commits. I tested it on a real iPad, not in a browser frame, because touch targets and reach only tell the truth under a finger.
Outcome
Outcome
The redesigned panel reads as a tablet product in both orientations, and because every screen is built from variables and components, a colour or a state changes everywhere in one edit.
What I learned
- Portrait was the right lens, though not my first instinct: landscape would have looked finished sooner and taught me less.
- Replacing the table beat optimising it. I spent the first round trying to make the table fit; the design only moved once I stopped trying.
- Setting up variables before drawing screens felt like a detour until the third colour change took one edit instead of forty.
