Orange’s account screen, rebuilt in a week
Orange is my mobile carrier. I open its app for two things: my balance and what’s left of my plan. Both take more effort than they should. So I took the account screen apart and put it back together — as one customer, from the outside.
Role · Product, UX/UI · solo
Scope · Account home screen, prepaid line
Status · Figma prototype with Smart Animate. No contact with Orange, no analytics, no user testing — every decision below is a hypothesis.
THE PROBLEM
The first screen answers the wrong questions
- The balance sits in small type.
- The minutes, gigabytes and texts left aren’t on the home screen at all — they live in a separate section.
- The first screen goes to promo cards and an ad banner.
- Features are scattered, and the icons don’t read as one set.
Original
THE QUESTION
Why people actually open it
I don’t open a carrier app to browse. I open it when something stops working. No internet — did my data run out? No signal — is my balance fine?
So the home screen has one job: answer both before I touch anything. That gave me the order:
Number & balance → Expiry date → Data · Minutes · Texts → Quick access → Offers
Offers stay. They’re how a carrier sells, and the banner is the fast route to them. They just come after the answer, not before it.
Everything I open the app for, on one screen
Before
Balance in small type, what’s left hidden a level deeper, promos first.
After
Number, balance, expiry date and what’s left, all on the first screen. The app looks current, and it’s obvious which carrier it belongs to.
HOW IT GOT THERE
Three turns, seven passes
I started by rebuilding the original from screenshots, as close to one-to-one as I could, so the move to the new version could play as a Smart Animate transition. Then I worked it into shape, looking as I went at what could become components, tokens and styles.
- Original
- Rebuild
- Pass 1
- 2
- 3
- 4
- 5
- 6
- 7
Turn 1 — HierarchyPasses 1–2
- Number and balance moved to the top. It’s the first thing anyone checks.
- Data, minutes and texts came onto the home screen. No more digging.
- The number replaced the “Your balance” label. A customer may have more than one line or device with Orange — the number says which one this is, and it frees up room below.
- Top-up merged into the balance. Adding money and topping up are the same act, so the action sits next to the figure it changes.
- Icons swapped for Material Symbols Sharp, then made bold — one set, with straight, cut lines.
- The assistant lost its emphasis in the bottom menu. In use it’s a secondary feature; the layout now says so.
Pass 1
Pass 2
Turn 2 — The SIM cardPasses 3–4
This is where it clicked: the top card took the shape of a SIM.
- The line’s activity date moved into the SIM card, and its duplicate came out of Quick access.
- Quick access moved above the banners — so it’s actually quick to reach.
- The top-up button got a label, in case the icon alone isn’t obvious.
- Navigation became personal: the user’s avatar in the header, the menu behind a burger.
- “Contacts” became “Help” — closer to what people open it for.
Pass 3
Pass 4
Turn 3 — IdentityPasses 5–7
- Pass 5 — the SIM card widened into the background.
- Pass 6 — the background inverted.
- Pass 7 — tidied up, and the offers banner came back, below the answer.
Pass 5
Pass 6
Pass 7
What I rejected
- A separate “Top up” card. It split one action into two places.
- A generic “Your balance” label. It named the obvious and hid which line you’re looking at.
- An anonymous tab bar. An account app should know whose account it is.
- A prominent assistant. It took prime space for a secondary feature.
Still open
- Figures on the card or behind it. I considered moving them to the back of the SIM with a flip animation.
- How to present data, minutes and texts. I tried several ways inside the SIM card — this is the first thing I’d A/B test.
DESIGN LANGUAGE
The SIM card as the foundation
Every Orange customer already holds one object from the brand: the SIM. I made it the key visual element of the interface — the card that frames your line, then the background the whole screen sits on.
BACKGROUNDS
A living interface
Animated backdrops for the SIM card, a different one every time the app opens, so the interface feels fresh and alive.
FIRST IMPRESSION
Splash screen
Replaced the dull default loading screen with an animated splash built from Orange’s own graphics. I’d normally do this with smart-animate; here I tried Figma Motion.
The component system
THREE THEMES, ONE SYSTEM
Tokens and theming
Built a design-token system with three themes: Orange, Light and Dark. Colour, spacing and type are bound to variables — switching the theme changes the whole interface in a second.
FROM THE OUTSIDE
What I don’t know
This was built from the outside, so here is what the Orange team knows and I don’t:
- Accounts with several lines and bundles (fibre + mobile + TV). The SIM card is designed for one line. With four, it needs a line switcher I haven’t designed.
- What the offers earn. I moved the banner down, not out, because I don’t know its revenue.
- Platform constraints. Which components and flows can actually change, and at what cost.
- Real behaviour. Everything here rests on one user — me. Analytics could prove the hierarchy wrong in a day.
BEYOND STATIC UI
Shader effect
Once the system worked, I pushed it past static screens. I tried Figma’s new shader feature and built an animated background with it. It can be handed off to Figma Make and exported as HTML and JS.
One week, one designer, one system.
What the home screen resolves
The screen answers the two questions an account user actually has: how much is on the balance, and what it’s made of. Promotional material moved to other sections — all that’s left on the home screen is a fast route to the carrier’s offers, as a banner. The current app is grey; in the prototype you can see whose app you’re using. The new version gives clear points of interaction, more at a glance, and fewer taps to get anywhere.