Case study — UI/UX Design
Orange Pro
In-app notifications, an install tutorial, and the Sketch-to-Figma migration behind them.
Multiple missions ran back to back during my time at Orange Pro: UX work across the app, and a major design migration from Sketch to Figma. Two of those missions — a notification centre nobody had designed yet, and a tutorial for a feature people kept installing too late — are the ones this case study walks through.
Every screen still had to fit inside Orange's existing brand guidelines and design system — several of which got reworked along the way to meet accessibility standards.
The Orange Pro app had been live for a while, but in-app notifications had never been used. The first step was benchmarking how other app centers categorize notifications — 100 a day, badly sorted, makes an app harder to use than having no notification center at all.
A first version got sketched, turned into a prototype once the design-system team validated it, then tested with real Orange Pro clients over video call: what they clicked, why, and what they expected to happen. Categories, delete vs. archive, and how read state should read all got reshaped by that feedback — some ideas shipped, some got cut, some pushed to a follow-up version instead of the MVP.
Airbox Pro backs up a company's connection when the network goes down — but clients kept putting off setup until the network was already down, turning a five-minute job into a panicked one. The tutorial had to make install so straightforward it wouldn't get postponed, with multiple entry points so someone rushing mid-outage could jump straight to the step they were stuck on instead of replaying the whole thing.
The trickiest part turned out to be the animations. Figma's smart-animate looked promising — hand it two frames, let it tween the rest — but exporting a clean GIF out of Figma proved nearly impossible: buggy, and the prototype didn't travel well outside it. Photoshop's timeline features, closer to an actual animation tool, ended up doing the job instead. Every frame got redone by hand there, but the result was worth it — the animation let the tutorial show what to do instead of writing another paragraph of instructions.
Orange finally moved its design system, prototypes and page designs off Sketch and onto Figma — funnily enough, on an earlier internship I'd built part of that same design system in Sketch, so a year later I came back to migrate it.
Opening a Sketch file straight in Figma sounds simple; it isn't. Fully-componentized designs break into pieces the moment they land. So the backlog got split into three tiers by how much a file was actually worth saving properly: full hand rebuild for anything still in active use, a rough Sketch-file import with light cleanup for archives that just needed to exist somewhere, and flat image export for anything unlikely to be touched again. Components themselves always had to be rebuilt by hand — but once one existed, every designer on the team could reuse it, which is what actually made the migration possible.
Two features Orange Pro users had never had — a notification centre and a tutorial that actually gets Airbox installed on time — shipped inside the same brand system the rest of the app already used. And underneath both of them, a design system that finally lived in one tool instead of two, so the next designer on this app isn't stuck reopening a broken Sketch file to find out what a component was supposed to look like.
Next project