Prismora - Framer Website Template for Freelancers

Swetha De-Smith

Product Designer

Digital Creator

Ui Designer

Product Designer

Get in Touch

Swetha De-Smith

Product Designer

Digital Creator

Ui Designer

Product Designer

Get in Touch

Swetha De-Smith

Product Designer

Digital Creator

Ui Designer

Product Designer

I topped up my Three plan and couldn't believe how hard it was

So I redesigned the journey. A personal accessibility-led redesign of the Three app's manual top-up flow, from frustration to a cleaner, more inclusive experience.

TLDR;

Problem: The Three app's manual top-up journey was buried, confusing, and inaccessible. It required 10+ steps, used ambiguous language, and failed basic accessibility standards.

Solution: A streamlined, accessibility-led redesign of 10 screens across the top-up journey. Clearer navigation, plain English, consistent patterns, and WCAG AA-aligned interactions throughout.

Impact: 7 key UX improvements validated through informal testing with Three users. Reduced perceived complexity and improved confidence at every decision point in the journey.

Problem: The Three app's manual top-up journey was buried, confusing, and inaccessible. It required 10+ steps, used ambiguous language, and failed basic accessibility standards.

Solution: A streamlined, accessibility-led redesign of 10 screens across the top-up journey. Clearer navigation, plain English, consistent patterns, and WCAG AA-aligned interactions throughout.

Impact: 7 key UX improvements validated through informal testing with Three users. Reduced perceived complexity and improved confidence at every decision point in the journey.

CONTEXT

I'm a Three customer. One evening I tried to top up my plan manually, something that should take thirty seconds. Ten minutes and several confusing screens later, I had nearly given up twice.

Three pushes direct debits heavily. That's fine for some customers, but plenty of people top up manually by choice or necessity, including people with limited tech confidence who can least afford a confusing experience. I wanted to understand whether this was a me problem or a design problem. So I tested it.

I'm a Three customer. One evening I tried to top up my plan manually, something that should take thirty seconds. Ten minutes and several confusing screens later, I had nearly given up twice.

Three pushes direct debits heavily. That's fine for some customers, but plenty of people top up manually by choice or necessity, including people with limited tech confidence who can least afford a confusing experience. I wanted to understand whether this was a me problem or a design problem. So I tested it.

USER RESEARCH

I ran informal usability tests with friends and family who also use Three, asking them to complete a manual top-up while thinking aloud. None of them were UX professionals. Most of them hit the same friction points I did.

Too many steps for a simple task
10+ taps to complete a top-up. Every participant lost momentum at least once and questioned whether they were in the right place.

Too many steps for a simple task
10+ taps to complete a top-up. Every participant lost momentum at least once and questioned whether they were in the right place.

Navigation to the top-up screen was genuinely hard to find
Account access was buried at the bottom of the homepage with unclear labels. Several participants tapped the wrong section before finding it.

Navigation to the top-up screen was genuinely hard to find
Account access was buried at the bottom of the homepage with unclear labels. Several participants tapped the wrong section before finding it.

Language caused real decision paralysis
"Add-ons" vs "Data" - nobody I tested could explain the difference without guessing. Two participants abandoned the flow at this point.

Language caused real decision paralysis
"Add-ons" vs "Data" - nobody I tested could explain the difference without guessing. Two participants abandoned the flow at this point.

Accessibility failures throughout
Small tap targets, inconsistent button sizes, low contrast text, and repetitive customer information displayed differently on every screen. Failing WCAG AA on multiple counts.

Accessibility failures throughout
Small tap targets, inconsistent button sizes, low contrast text, and repetitive customer information displayed differently on every screen. Failing WCAG AA on multiple counts.

BEFORE & AFTER - 7 KEY IMPROVEMENTS

Homepage Navigation

BEFORE

Account nav buried at bottom. 'My account' label is unclear. Button styles inconsistent across the whole app.

AFTER

07234567899

Switch to Three

My account

Account moved to top persistent nav. Consistent button sizes and styles. Clear, direct labelling throughout.

DESIGN RATIONALE

Users scan top-to-bottom. Persistent top nav follows established mobile patterns, reduces discovery time and task errors.

Load State Feedback

BEFORE

No feedback during long waits after tapping 'My account'. Users assumed the app had crashed and abandoned.

AFTER

Guidance text added during load states. Simple reassurance messaging reduces confusion and prevents abandonment.

DESIGN RATIONALE

Visibility of system status is Nielsen Heuristic #1. Even minimal text feedback meaningfully reduces perceived wait time.

Account Homepage

BEFORE

Customer details repeated on every screen, cluttered and overwhelming. No consistent visual hierarchy present.

AFTER

07XXXXXXXXX

Sticky header with customer context across all screens. Clean hierarchy surfaces the primary action clearly.

DESIGN RATIONALE

Reducing working memory load : users shouldn't have to track whose account they're managing at every step.

Top-Up & Add-Ons Page

BEFORE

Complex terminology for Top-up vs Add-ons. No visual aid to guide decisions between data types on offer.

AFTER

Tooltip clarifies terminology inline. Payment method icons leverage existing mental models → decision made faster.

DESIGN RATIONALE

Match system to real-world language (Nielsen #2). Payment icons draw on prior knowledge users already have.

Add-Ons Card List

BEFORE

Large cards meant heavy scrolling, users forgot earlier options before seeing all available data packs.

AFTER

Compact card grid: all options in one viewport. Swipeable active add-ons. Consistent CTA buttons throughout.

DESIGN RATIONALE

Visible choice set reduces cognitive load and enables side-by-side comparison at the key decision moment.

Confirmation Screen

BEFORE

Charged and uncharged packs shown together, confusing. Full T&C text wall on screen was overwhelming.

AFTER

Selected pack and price clearly shown. T&C as checkbox with 'read more' link. Progressive disclosure applied.

DESIGN RATIONALE

Progressive disclosure keeps the critical path clean. Detail stays accessible without blocking the key action.

Payment Screen

BEFORE

Card detail fields split across multiple screens. 'Different payment method' option added unnecessary friction.

AFTER

All fields in one view. Pre-populated for returning users. Clear, consistent button hierarchy throughout.

DESIGN RATIONALE

Fewer steps to completion improves conversion. Pre-population honours returning user context and trust.

WHAT SUCCESS WOULD LOOK LIKE

Fewer steps, clearer path

Reduce the journey length and make each step feel purposeful. No unnecessary taps, no dead ends.

Plain English throughout

Eliminate ambiguous terms. A customer should always know what they are selecting and what it costs before they commit.

WCAG AA compliant interactions

Larger tap targets, improved contrast, consistent button sizing. Accessible by default, not as an afterthought.

Consistent, predictable patterns

Customer details, navigation, and CTAs behave the same way on every screen so users always know where they are.

REFLECTION

This started as frustration and turned into a proper design exercise. Testing it with real Three users, even informally with friends and family, changed some of my initial assumptions. I thought the biggest problem was the number of steps. Testing revealed the language was actually the bigger barrier. The confusion around 'Add-ons' vs 'Data' caused more drop-off than the journey length.

There are limits to what this project can claim. Without access to analytics, user data, or the ability to test the redesigned flows with a wider audience, the outcomes are observational and speculative. But the exercise sharpened how I think about accessibility. Not as a checklist at the end, but as a series of decisions made at every step of a journey.

If I were to do this again with more time, I would push further on the information architecture before touching the UI. Some of the problems run deeper than individual screens.

This started as frustration and turned into a proper design exercise. Testing it with real Three users, even informally with friends and family, changed some of my initial assumptions. I thought the biggest problem was the number of steps. Testing revealed the language was actually the bigger barrier. The confusion around 'Add-ons' vs 'Data' caused more drop-off than the journey length.

There are limits to what this project can claim. Without access to analytics, user data, or the ability to test the redesigned flows with a wider audience, the outcomes are observational and speculative. But the exercise sharpened how I think about accessibility. Not as a checklist at the end, but as a series of decisions made at every step of a journey.

If I were to do this again with more time, I would push further on the information architecture before touching the UI. Some of the problems run deeper than individual screens.

Prev project

Next project

Digital Creator

Ui Designer

Product Designer

Digital Creator

Ui Designer

Product Designer

Digital Creator

Ui Designer

Product Designer

I topped up my Three plan and couldn't believe how hard it was

I topped up my Three plan and couldn't believe how hard it was

So I redesigned the journey. A personal accessibility-led redesign of the Three app's manual top-up flow, from frustration to a cleaner, more inclusive experience.

So I redesigned the journey. A personal accessibility-led redesign of the Three app's manual top-up flow, from frustration to a cleaner, more inclusive experience.

TLDR;

TLDR;

Problem: The Three app's manual top-up journey was buried, confusing, and inaccessible. It required 10+ steps, used ambiguous language, and failed basic accessibility standards.

Solution: A streamlined, accessibility-led redesign of 10 screens across the top-up journey. Clearer navigation, plain English, consistent patterns, and WCAG AA-aligned interactions throughout.

Impact: 7 key UX improvements validated through informal testing with Three users. Reduced perceived complexity and improved confidence at every decision point in the journey.

Problem: The Three app's manual top-up journey was buried, confusing, and inaccessible. It required 10+ steps, used ambiguous language, and failed basic accessibility standards.

Solution: A streamlined, accessibility-led redesign of 10 screens across the top-up journey. Clearer navigation, plain English, consistent patterns, and WCAG AA-aligned interactions throughout.

Impact: 7 key UX improvements validated through informal testing with Three users. Reduced perceived complexity and improved confidence at every decision point in the journey.

CONTEXT

CONTEXT

I'm a Three customer. One evening I tried to top up my plan manually, something that should take thirty seconds. Ten minutes and several confusing screens later, I had nearly given up twice.

I'm a Three customer. One evening I tried to top up my plan manually, something that should take thirty seconds. Ten minutes and several confusing screens later, I had nearly given up twice.

USER RESEARCH

USER RESEARCH

I ran informal usability tests with friends and family who also use Three, asking them to complete a manual top-up while thinking aloud. None of them were UX professionals. Most of them hit the same friction points I did.

I ran informal usability tests with friends and family who also use Three, asking them to complete a manual top-up while thinking aloud. None of them were UX professionals. Most of them hit the same friction points I did.

Too many steps for a simple task10+ taps to complete a top-up. Every participant lost momentum at least once and questioned whether they were in the right place.

Too many steps for a simple task10+ taps to complete a top-up. Every participant lost momentum at least once and questioned whether they were in the right place.

Navigation to the top-up screen was genuinely hard to findAccount access was buried at the bottom of the homepage with unclear labels. Several participants tapped the wrong section before finding it.

Navigation to the top-up screen was genuinely hard to findAccount access was buried at the bottom of the homepage with unclear labels. Several participants tapped the wrong section before finding it.

Language caused real decision paralysis"Add-ons" vs "Data" - nobody I tested could explain the difference without guessing. Two participants abandoned the flow at this point.

Language caused real decision paralysis"Add-ons" vs "Data" - nobody I tested could explain the difference without guessing. Two participants abandoned the flow at this point.

Accessibility failures throughoutSmall tap targets, inconsistent button sizes, low contrast text, and repetitive customer information displayed differently on every screen. Failing WCAG AA on multiple counts.

Accessibility failures throughoutSmall tap targets, inconsistent button sizes, low contrast text, and repetitive customer information displayed differently on every screen. Failing WCAG AA on multiple counts.

BEFORE & AFTER - 7 KEY IMPROVEMENTS

WHAT SUCCESS WOULD LOOK LIKE

WHAT SUCCESS WOULD LOOK LIKE

Fewer steps, clearer path

Fewer steps, clearer path

Reduce the journey length and make each step feel purposeful. No unnecessary taps, no dead ends.

Reduce the journey length and make each step feel purposeful. No unnecessary taps, no dead ends.

Plain English throughout

Plain English throughout

Eliminate ambiguous terms. A customer should always know what they are selecting and what it costs before they commit.

Eliminate ambiguous terms. A customer should always know what they are selecting and what it costs before they commit.

WCAG AA compliant interactions

WCAG AA compliant interactions

Larger tap targets, improved contrast, consistent button sizing. Accessible by default, not as an afterthought.

Larger tap targets, improved contrast, consistent button sizing. Accessible by default, not as an afterthought.

Consistent, predictable patterns

Consistent, predictable patterns

Customer details, navigation, and CTAs behave the same way on every screen so users always know where they are.

Customer details, navigation, and CTAs behave the same way on every screen so users always know where they are.

REFLECTION

REFLECTION

If I were to do this again with more time, I would push further on the information architecture before touching the UI. Some of the problems run deeper than individual screens.

If I were to do this again with more time, I would push further on the information architecture before touching the UI. Some of the problems run deeper than individual screens.

Too many steps for a simple task
10+ taps to complete a top-up. Every participant lost momentum at least once and questioned whether they were in the right place.

Too many steps for a simple task
10+ taps to complete a top-up. Every participant lost momentum at least once and questioned whether they were in the right place.

Navigation to the top-up screen was genuinely hard to find
Account access was buried at the bottom of the homepage with unclear labels. Several participants tapped the wrong section before finding it.

Navigation to the top-up screen was genuinely hard to find
Account access was buried at the bottom of the homepage with unclear labels. Several participants tapped the wrong section before finding it.

Language caused real decision paralysis
"Add-ons" vs "Data" - nobody I tested could explain the difference without guessing. Two participants abandoned the flow at this point.

Language caused real decision paralysis
"Add-ons" vs "Data" - nobody I tested could explain the difference without guessing. Two participants abandoned the flow at this point.

Accessibility failures throughout
Small tap targets, inconsistent button sizes, low contrast text, and repetitive customer information displayed differently on every screen. Failing WCAG AA on multiple counts.

Accessibility failures throughout
Small tap targets, inconsistent button sizes, low contrast text, and repetitive customer information displayed differently on every screen. Failing WCAG AA on multiple counts.