Orange’s account screen, rebuilt in a week
Orange is my mobile carrier, and their app leaves a lot on the table: dated layout, features scattered across screens, a visual system that never settles. So I took the UX apart and put it back together.
Role · Product, UX/UI · solo
Scope · Account home screen
Status · Figma prototype with smart-animate. No contact with Orange, no user testing.
Before and after
On the left, the original app. On the right, my redesign. The interface is cleaner, the numbers that matter sit on the first screen, and Orange’s identity finally reads at a glance.
Before
Everything I open the app for is hidden. The balance sits in small type, and the minutes, gigabytes and texts I have left aren’t on the home screen at all — you have to dig into a separate section for them. The first screen goes to promo cards and an ad banner, and the features are scattered across the interface.
After
The home screen now carries everything that matters: number, balance, expiry date and what’s left. The app looks current, and it’s obvious which carrier it belongs to.
FROM THE ORIGINAL TO SOMETHING NEW
Where the polish starts
I took the system as it stands and worked it into shape, one step at a time.
Original
Screenshot of the original.
Rebuild
Rebuilt from screenshots, as close to one-to-one as I could manage, because I wanted to show the move to the new version as a smart-animate transition. I didn’t like the original icons — mismatched, unpleasant, hard to parse. I swapped them for ones that sit better with straight, cut lines (Material Symbols Sharp). I thought it was the layout that was bothering me, so I started giving objects room to breathe — looking, as I went, at what could already become components, tokens and styles.
Pass 1
Dropped the “Top up” card-button: topping up is the same act as refreshing — and I never found a top-up icon I liked. Moved the orange icon up, closer to the balance. Either way what follows is a top-up, whatever you call it: if there’s money you’re adding to the balance, if there isn’t you’re topping it up. Replaced the useless “Your balance” label with the number itself — this may not be the only number or device the person has with Orange. It saved room below, too.
BALANCE, DATA, NAVIGATION
Polishing further
Moved the number and balance to the top — it’s the first thing anyone checks. Pulled the SIM, data and minutes figures onto the home screen. Reworked the navigation: instead of a faceless tab bar, a personal header with an avatar and a menu.
Pass 2
Number and balance right at the top, the figures that matter just below. As someone who actually uses this app, these are exactly the things I open it for. If the internet stops working I go and check whether the data ran out; if there’s no signal I check the balance is fine. Made the icons bold. Took the emphasis off the assistant in the bottom menu. Turns out that’s what it was — an assistant, that unremarkable.
Pass 3
It clicked: I fit the top card into the shape of a SIM. Still trying to stay close to the original, so the figures came out for now. I may move that information to the back of the card with a flip animation. I also moved one Quick access item up there — the line’s activity date — so the duplicate is coming out. Labelled the top-up button, in case it isn’t obvious. Redesigned the second card into a proper banner. While I was at it, raised the “Quick access” block so it’s actually quick to get to. Banners moved down.
Pass 4
Recoloured the top and moved the figures into it. I’m trying different ways of presenting them — a test will decide which one wins. Redesigned the quick menu to feel lighter. Took the line’s activity date out of it and moved it up into the SIM card. Changed the navigation: in my version it isn’t anonymous but personal — the user’s avatar goes right here. And the person icon that currently opens the menu became a burger. Swapped the “Contacts” icon for one that fits the meaning better — “Help”. It’s round, like most assistants.
THE SIM CARD AS THE FOUNDATION
Taking the design further
I shape the interface around the SIM card — it becomes the brand’s key visual element inside the app.
Pass 5
Widened the SIM card and turned it into the background.
Pass 6
Inverted the background.
Pass 7
Tidied it up and brought the banner back: it’s the fast route to the carrier’s offers.
A LIVING INTERFACE
Card backgrounds
Animated backdrops for the SIM card. A different one every time the app opens, which keeps the interface feeling 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.
A FIGMA EXPERIMENT
Shader effect
I also 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.
What this work does not have
No contact with the Orange team, no access to analytics, no user testing. This is a personal exploration, not a validated product outcome: some decisions — how the remaining allowances are presented, for one — need a test to pick the winner. Everything above was made from public information and my own experience as an Orange customer.