Home › Work › App Transformation
Mobile UI App Transformation UX Justification 2024

App Transformation —
screens with the
why behind them

A selection of screens from a mobile-app transformation. Each one is shown alongside a short UX justification — the reasoning that drove the layout, the flow, and the small decisions that add up.

View the screens ← Back to work
My Role
UX/UI Designer
Scope
Selected screens · before/after
Platform
iOS · Android
Focus
UX rationale per screen
Tools
Figma · FigJam
Hero
01 — The Approach

Every screen is a small argument

Good UX shows up in the small decisions — where the primary action lives, how dense the information is, whether the user has to remember anything between screens. The screens below are individual examples from a larger app transformation, each one annotated with the short reasoning behind the design choice.

02 — Screens

Ten screens, ten decisions

Hover the phone to lift it slightly. Justifications are kept short on purpose.

Screen 01
Service booking — primary action first
Pricing and inclusions visible before any tap, so the user can decide without committing. The primary CTA is the only red element on the screen — there's only one obvious next step.
CTA hierarchyPricing clarity
Booking
Screen 02
Request form — grouped by intent
Fields grouped by the question they answer, not by the database table they map to. Inline validation surfaces errors where they happen, not in a summary at the top.
Form groupingInline validation
Request
Screen 03
Special number — search where the eye lands
Search field sits exactly where the thumb falls on a one-handed grip. Filters are visible but quiet, so the page reads as "search this" not "configure this".
Thumb zoneSearch-first
Special number
Screen 04
Reservation detail — decision-ready
Critical info up top, supporting info collapsed under disclosure. The user can confirm or change without scrolling — a one-screen decision instead of a scroll-and-remember.
Progressive disclosureSingle-screen decision
Reservation
Screen 05
Success — recognition, not just confirmation
A success screen isn't just "done" — it's a chance to confirm what happened and offer the natural next action. Status, summary, and onward CTA in a single view.
Confirmation patternNext-action
Success
Screen 06
Voice — big targets, calm motion
In-call controls get oversized tap targets — accuracy matters more than density here. Visual feedback is smooth and slow, so the user trusts the audio is working.
Touch targetsTrust feedback
Voice
Screen 07
Promo — one offer per screen
A single offer reads stronger than a list of three. The CTA is impossible to miss, and the visual hierarchy answers "what is this and what do I do" in under a second.
Singular focusCTA emphasis
Promo
Screen 08
eSIM activation — plain language, fewer steps
High-anxiety task done in three steps with a visible progress indicator. Plain-language labels replace carrier jargon — this is where support tickets used to come from.
Step indicatorPlain language
eSIM
Screen 09
Account — most-used at the top
List ordered by frequency-of-use rather than alphabet. Configuration lives below the fold, on purpose — the goal is to make the common case feel instant.
Frequency orderingBelow-the-fold
Account
Screen 10
Profile update — single-purpose form
One thing per screen. Save and cancel use platform conventions instead of bespoke buttons — the user already knows how this works from every other app on the phone.
Platform conventionsSingle-purpose
Profile
03 — Before / After

The change, side by side

Drop the legacy screen on the left and the redesigned screen on the right. The arrow between them does the rest of the work.

Before
The legacy experience
After
After transformation
04 — In Summary

Small decisions,
stacked deliberately

Each screen does one job well. Together they form an experience that feels lighter than the sum of its parts.

10
Screens Documented
Each shown with the short reasoning behind the layout choice.
1
Design Language
One shared visual system across every screen in the app.
A11y
First-class
Tap targets, contrast and motion budgeted in from the start.
↓
Support Tickets
High-anxiety flows (eSIM, account) redesigned to reduce help-seeking.
Up Next

Device
Pre-order

A focused pre-order flow for a high-anticipation device launch — detailed UX rationale and a desktop preview.

View next case study ← All projects