PROJECT OVERVIEW
CLIENT
STC Bahrain
MY ROLE
Design Lead, via Plexable
SCOPE
User flows, responsive wireframes, high-fidelity screens, visual identity, and the shop UI from devices through checkout.
VALIDATION
No usability testing is recorded. The checks were internal: every flow redrawn at every width, and every branch of the purchase drawn before any UI existed.
TIMELINE
Flows and wireframes across 2016 and 2017, UI through 2018, engagement running to 2019.
TEAM
Delivered through Plexable with the STC Bahrain team. Flows, wireframes and UI were shared work; the design direction was mine.
The context
One order in this shop can hold a phone paid monthly, a postpaid plan, a new number and accessories. Color and storage change the price, and the payment choice decides which plans appear.
The 2016 brief asked for wireframes. The shop had to walk people through those choices in order and keep the upfront and monthly totals in view on every screen.
My responsibility
We drew the user flows, the wireframes for all three screen sizes, then the high-fidelity screens and the shop UI. That UI covered devices, plans, numbers, cart and checkout. My part was the design itself: the order of the steps, what each screen asks for, and what stays in view.
A flow drawn at three widths can quietly become three different products. I held the step bar, the price pair and the selector patterns to one definition. The phone version is the desktop flow in a narrower column.
CONSTRAINTS & TRADE-OFFS
A telecom order is not a basket of fixed prices. Picking a color or a storage size moves the upfront amount. The monthly figure follows the payment choice, so both totals had to stay on screen rather than wait for the cart.
That room costs most on a phone, where the column is already narrow. I spent it there instead of hiding the totals behind a cart icon.
● RESEARCH & CONTEXT
What the Flows Had to Handle
Before any layout, the flows had to account for the cases that break a simple buy button. Devices run out of stock, and some open for pre-order. A signed-in customer may want to hang a new phone off a plan they already pay for.
We drew those as separate paths. Someone signed in sees only the plans they are eligible for, which keeps that step short.
● PRODUCT DECISIONS
One Shop for Devices, Plans and Numbers
The biggest decision was to treat the purchase as one sequence rather than three stores. A phone, a plan and a number are bought in the same visit, so they are chosen in the same flow.
The second was where to break that sequence. Device and accessories bracket the money, which puts payment in the middle, where it changes what comes next.
● PRODUCT ARCHITECTURE
Three Areas, Two Progress Bars
The shop splits into three areas: devices, plans and numbers, then cart and checkout. Nothing in a later area can be priced until the earlier one is answered.
Two progress bars run the shop rather than one. The device purchase and the checkout each count their own steps, so finishing a device never looks like finishing an order.
● PROCESS & EVIDENCE
Eight dated rounds of wireframing ran from August 2016 to April 2017, and we turned the last one into the high-fidelity set.
Every round was drawn at all three widths rather than one, which is why the screen count ended up in the hundreds. The 2018 UI was then built on those layouts.
OUTCOMES
344 Screens, Then the UI
By April 2017 the shop existed as 344 high-fidelity screens for desktop, tablet and phone.
In 2018 we carried it into the UI for devices, plans, numbers and the store locator, and the engagement ran on to 2019.
344
Screens
High-fidelity wireframes dated April 2017, covering all three widths.
3
Screen Sizes
Desktop, tablet and phone, with every flow drawn for all three.
8
Wireframe Rounds
Dated rounds between August 2016 and April 2017.
WHAT I’D IMPROVE
What I Would Change
Start the phone layout in the first round. Narrowing a desktop step bar late costs more than widening a phone one.
Put the pricing rules in one table before drawing the plans step, rather than carrying them round by round.
WHAT I LEARNED
What the Project Taught Me
When a price depends on an earlier choice, that dependency sets the step order. Sequence is a pricing question before it is a layout one.
Edge paths such as out of stock and pre-order cost less drawn as their own flows than patched into the main one later.
More work
HIRING A HEAD OF PRODUCT DESIGN?