STC Bahrain - An online shop for devices and plans
“
Phones, plans, numbers and checkout in one shop, on every screen size.
STC Bahrain
E-commerce website, 2016-2019
About the project
STC Bahrain is the Bahrain operator of Saudi Telecom Company. It launched in 2010 as Viva and took the STC Bahrain name in December 2019. We redesigned its online shop, where people buy a device with a plan, a number and accessories. From August 2016 we mapped the flows, wireframed every screen for desktop, tablet and phone and designed the UI, then reworked devices, plans and checkout in 2018.
Project
STC Bahrain Online Shop
Industry
Telecom E-commerce
Location
Bahrain
Date
2016-2019
“
Client Request
STC Bahrain wanted a redesigned online shop where people can buy a device with a plan and check out on desktop, tablet or phone.
STC Bahrain
Wireframes, 2016
Design Pillars
Core UX Principles
Choosing a phone, how to pay for it and a plan happen in one guided path with a step bar.
Each device shows the upfront and monthly price, with the full price as the other option.
Each flow was wireframed for desktop, tablet and phone.
Discovery
What the Flows Had to Handle
Plans Depend on Payment
Plan types and values depend on the upfront and monthly commitment, so the plans step comes after payment.
Stock and Pre-Orders
We drew separate paths for devices that are out of stock and devices that people can pre-order.
Existing Customers
Customers who sign in can add a device to a plan they already have, and they only see eligible plans.
The Challenge
Problem Statement
The Main Goal: Sell a Device and a Plan in One Order
One order in a telecom 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 shop had to walk people through those choices in order and keep the upfront and monthly totals in view on every screen.
“
Select from a wide range of devices at the best prices in Bahrain.
Devices page banner
Plexable, 2018
Our Approach
Solution
One Shop for Devices, Plans and Numbers
User flows, wireframes for desktop, tablet and phone, high-fidelity screens and the UI for devices, plans, numbers, cart and checkout. It is an example of our Ecommerce Website Design work.
01 - Devices
Categories from smartphones to car gadgets, and a device page to pick color, storage and how to pay.
02 - Plans and Numbers
A new plan or an existing one, then a number from the Bronze, Silver, Gold or Platinum tier.
03 - Cart and Checkout
Review the order, choose delivery or pickup from a branch, then pay by card or cash.
Before & After
The Blueprint & Evolution
Wireframe to Final UI
We wireframed the devices page first, then designed the UI on the same layout.
Before: the devices page wireframe, 2018.
After: the same page in the final UI, 2018.
Design
Key Features
Pick Your Number
Numbers come in Bronze, Silver, Gold and Platinum tiers. People search, save favorites to compare, and add the one they want to the cart.
Delivery or Pickup
At checkout people choose delivery to their address or pickup from a branch, then pay by credit card, debit card or cash on delivery.
Design System
Visual Identity
Typography
Helvetica in bold, regular and light, with 26 and 20 px headings, 16 px bold labels and 14 or 16 px body text.
Color Palette
Purple #6F2577 for the header and order totals, pink #F21F64 for buy buttons and cyan #00ACD7 for selected options, on light grey #F4F6F9.
Step Bars
Buying a device moves through device, payment, plans and accessories. Checkout has its own three steps: review order, delivery and payment, receipt.
Impact
From Wireframes to a Full UI
Results for STC Bahrain
By April 2017 the shop had 344 high-fidelity screens for desktop, tablet and phone. In 2018 we took the work into the UI for devices, plans, numbers and the store locator.
STC Bahrain
Result
By the Numbers
344 Screens
High-fidelity wireframes for desktop, tablet and phone, April 2017.
3 Screen Sizes
Every flow designed for desktop, tablet and phone.
8 Wireframe Rounds
Dated rounds from August 2016 to April 2017.
Process
From Flows to Screens
Eight Rounds of Wireframes
We started with user flows for each way to buy a device, with or without a plan. We then wireframed the shop in eight rounds between August 2016 and April 2017 and turned the last round into high-fidelity screens. You can see some of the results below.
Final Showcase
The STC Bahrain Online Shop
