UI and UX Design
Product Design
A White Label
Design Solution
To modernise and launch a range of new offerings and services to 44 million mobile telephone users, through the White Label approach.
One
Design,
Ten
Brands
A design solution that answers users and stakeholders from 10 different brands.
Brand Stack
NettoKOM
Netto are grocery story SIM cards operating on the O2 mobile network.
50 million users
WhatsApp SIM
An Innovative Sim card to use WhatsApp with free roaming worldwide.
24 million users
ALDI TALK
Aldi is a well-known supermarket selling SIM cards which operates on the O2 network.
30 million users
Blau
The brand blau offers discount tariff for calls within Germany and for calls outside Germany.
600K users
Final Designs
Scroll inside
The Design Process
PI & Scrum Planning
UX Research
Lo-fi wireframes
Visual Designs
Design System Integration
Brand Approvals
Dev Handover
UI & Usability Testing
Design Contributions
optimised user navigation
Payment Module
Objective
The existing payment module redirects and takes the user away from the journey. To redefine the journey so the user doesn't lose track of the steps during checkout and help retain customers.
Rationale
When the flow is simplified with limiting the relevant information and an easy save card details option, not only it pushed selecting direct debit first but reduce the user time during checkout journey helping in conversion.
Solution
I had reworked with the architects to redefine the payment journey, that lets user setup auto-up for future purchases. And designed a component that lets retain the user within the flow and enter payment details in the same flow.
Feedback
The new proposal was tested and data showed 85% of new users chose to set up auto-up. The new design was also found to be legally compliant, improved retention rate and was adopted by other brand managers within the RAITT stack.
Auto Top-Up & Recurring Payment — Payment Module
Select recurring payments
Select automatic top up
Select Euro / One-time payment
Design Iterations
Placement of Mini Shopping-bag
UX & UI Alignment Call
Open Topics
UI + DS needs to make the rules for the centered/left-aligned design. Which other pages will display the Mini-Shopping-Cart? How is it designed so far by the UI Team? Should we differentiate 2 use cases: INLIFE AREA and SHOP AREA?
Data Collected
Layout of the page: 8 + 4 columns — Content + mini-shopping cart. Current decision from DS Team: always use 8/12 columns due to better readability. Inlife Journeys (SIM Barring/Settings) — Side Navigation + content, flows don't have the side-nav → 4+8 and then 8 centered.
Key Decisions
'Summary Page' will NEVER have the Mini-Shopping Cart. 'Select Payment Page' will ALWAYS have the Mini-Shopping Cart. Mini-Shopping/Summary Cart will be displayed only in cases of Purchase-Journeys (price-communication). WhatsApp SIM does not have any fees (on services).
Data Collected — Competitor Benchmarking
John Lewis
Microsoft
Zalando
Change Log
Change-Log — 1
Pull up summary card with hidden CTAs within so the user doesn't miss the action when they scroll.
Extra real-estate with repeating CTAs and tariff information.
Change-Log — 2
Display summary as a card below the content and CTA group, with detailed price description.
Order summary now contains only the total amount rather repeating the bag content.
Change-Log — 3
The order summary containing the 'Place order' CTA is featured prominently at top and bottom of the screen to promote conversions and inline with the tried and tested Amazon checkout model.
The CTA is now near the Total to ensure compliance with Legal requirements. The Terms & Conditions are clearly visible and near the CTA.
Business Driven by Design
Tokens
We started with an audit of existing resources. Three levels of Design Tokens were created to help update design decisions globally or apply a change to a single component.
Base Token
Primitive values — color palette, font sizes, spacing
Alias Token
Semantic references — color.ui.interaction.default
Component Token
Component-specific — button.primary.background.default
Syncing to Code
As a pipeline between design and code a plugin called Figma Tokens from Jan Six was used.
color.palette.brand.1.default
color.ui.interaction.default
button.primary.background.default
#0019A5
JIRA
Design System Tracking
Jira as our Kanban board to track all progress. To request review from stakeholders via this tool. Team uses Jira to request designers for new requirements. Developers pick approved designs.
~300 icons
To identify gaps the existing icons assets were audited to identify specific icons in both, solid and outline variations, and a new and refreshed icon library was designed using Adobe Illustrator and Figma.
~56 Components
Components were built as reusable blocks of our design system. Each component meets a specific interaction or UI need, and has been specifically created to work together to create patterns and intuitive user experiences.
Design Compositions
Compositions were designed in a way that they can be reused in different parts of the design journey. Based on the design requirements and refinements of a flow, compositions were created with the involvement of the designers and engineers along with product and brand teams.
Live Sites
Challenges and Learnings
Cross collaboration
Regular meetings between UX, UI, DS, UX writers and Content with Business and Product owners, Brand Managers across tribes.
Avoid gaps between design and dev
Constant alignment and embedding creative team from the blueprinting to production to avoid gaps during handover and development.
Re-skin made easy
With the Superset library using the ONE library, the new features can be blueprinted faster and library swapped on Figma to respective brands.
Version Control
Every design stage within a file was documented to communicate design progress and ensure dev has the most updated screens (before Figma introduced dev mode).