To show what was really possible if the team was supported fully we did a special presentation Kieran Keegan and Andrew Davis worked over 28 hours in 2 days to get this done. Sadly other people took this as an invitation to expect these timelines for everything. Within three weeks of creating this document and presenting it to the client, we had all resigned.

1. Vodafone
MyVodafone
App
Version 2.0
28.03.2015

2. Wipro Digital Studio London
The Wipro Digital Studio is a focused creative hub, staffed with digital experts specializing in creative technologies,
experience and visual design, content authoring, digital production and creative direction.
Our team works with stakeholders remotely or at our clients location to refine the business requirements,
conduct stakeholder workshops and for ‘Show-and-Tell’ sessions.
For all other experience design tasks, the team will work collaboratively within the Design Studio; optimizing
the sharing of specialist knowledge and sparking ideas.
Wipro Digital believes that it is this balance of diverse but complementing skills, in a stimulating
and creative environment, which enables the efficient production of beautifully crafted user experiences.

3. creative solutions and services
We bring together a blend of creative technologists, service designers, user experience architects,
creative visual designers and customer researchers to transform ideas into products and services that
innovate, appeal and succeed.
By bringing Capabilities at the converge of
strategy + design + technology
focussing on the bits that matter
insight + interaction + integration
with solutions and services that lead
to digital innovations

4. IT STARTED WITH A SIM
(48 HOURS AGO)

5. our pod structure
The Wipro Digital, Global Head of Digital Design, Karl Smith assembles bespoke teams to work collaboratively with
you in digital pods, activating members with the right skills at the right time during the end-to-end design process
and into development.
Each digital pod will:
• Work onsite to gather information from key stakeholders, and to share concepts,
designs and interactive prototypes in ‘show & tell’ sessions
• Work in our studios to generate concept sketches, designs, and interactive prototypes
for both key pathways, and alternative pathways
• Deliver a suite of design assets into the development team
• Provide quality assurance on the development activity to ensure the finished product
meets the design

6. our user centred design process
We proposed and implemented an iterative experience design process to tackle your brief, which consisted of these five stages:
Our 5 stage model below consists of the following processes:
refine
REQUIREMENTS
model
INTERACTIVE WIREFRAMES
deliver
INTO BACKLOG / REVIEW
design
STATIC WIREFRAMES
concept
SKETCHES

7. UX + VISUAL RESEARCH
(COMPETITOR ANALYSIS)

8. refine requirements stage
As part of the ‘refine requirements’ stage, our UX and Visual Design experts identified the key user journey to focus on, the subsequent
experience of the users, benchmarked design through a competitor analysis and assessed the MyVodafone visual identity and branding.
These insights are essential to inform our design, and ensure that it is fully user centric.
To kick-off our investigations, we completed an expert review of the current MyVodafone App, as well as your main competitors.
This provided us with a firm understanding of current app design trends and user experiences in the telco industry,
The review revealed that the most powerful and efficient Telco iOS apps combined elements of the following:
- Clear data visualisation of relevant and key metrics;
- Clear, coherent and consistent navigation throughout the app;
- Consistent design patterns replicated throughout;
- Aspects that personalise the experience e.g. Naming the customer and frequently made calls;
- Interspersing modern flat design with engaging imagery to engage the user;
- An inspiring visual design based on the brand guidelines.

9. EE / O2
EE
UX
- Sign in/ registration process is over complicated and lengthy
- Slow performance times and latency of content display
+ Typographic approach draws attention to key data usage
+Engaging interactions displayed on splash screen
+ visualisations in payment history allows attribution user behaviour
Visuals
+ Consistent branding and colour pallette use throughout
+ Fresh and modern design engages customers
+ Strong visual representations of key metrics
+ Break up of bold colour tiles with imagery to engage users
+ Large clear text/ typography to display balances
O2
UX
- Long loading time on app login and bill retrieval
- Navigation experience throughout the app can be confusing
- Extremely small text on minutes breakdown
- dependant on direction of scroll bottom navigation bar changes
+ Interesting statistics based on real user activity e.g. Frequent calls and duration
Visuals
+ Modern flat design, is highly functional
+ Nice interactions and visualisations of data

10. Virgin / Tesco
Virgin
UX
+Balance overview provides accurate balance information e.g. down to nearest secs and mb
- Minutes, Text & Data balance text extremely hard to read as a snapshot
- Choosing topup amount and submit button are placed in close proximity and may lead to accidental topups
Visuals
- Dated visual design doesn’t align with todays design trends
- Lack of engaging infographics or data visualisation
- Colour contrast on balance meter makes it hard to quickly distinguish information
Tesco
UX
- No overview on home screen of data usage or current balance
- No logical grouping of items on the home screen
- Toggle interaction could cause user error e.g. Selecting bolton options
+Plenty of ways to engage in customer support
Visuals
+Clear use of iconography with supporting text
- Overall visual design lacks excitement and customer engagement
- poor use of screen real estate with use of redundant space

11. Giffgaff / 3 Mobile
Giffgaff
UX
- Hierarchy of information makes priority of information unclear
+ Clear breakdown of data usage
+ Clear indication of recurring financial commitment
Visuals
- Thin typography on menu screen renders text hard to view
- Yellow title text on grey wouldn’t pass WCAG AAA
compliance for accessibility
- Inconsistent colour use of iconography through app
3 Mobile
UX
- Positioning of back buttons doesn’t fit with intuitive interaction behaviour
- No data visualisation of my allowance
- Use of colour confuses call to action buttons and static text areas
- lack of consistency in screen layouts across the app
Visuals
- Confusing combination of colours, layouts and grids
- Inconsistent use of black and white text on buttons
- Lacks consistency with website and engaging imagery

12. refine requirements stage
We wanted a true understanding of the user experience of your customers whilst using the MyVodafone app.
Aligning with the planned design release 5.4, we identified the key user task, ‘Please top up your credit for your PAYG device’.
We observed the interaction behaviour and emotions of the users as they moved through this journey; from the initial thought stage,
through to Top-Up completion.
Following the observation, we interviewed these users’ and explored their experience. This incorporated:
- Channels used throughout the journey
- Specific pain-points
- decision making and rationale
- Expectations of the process
- User emotions

13. top-up journey
The insights gained from the refine stage, allowed us to map the customer experience throughout their Top-Up journey.

14. concept
Utilising our in-depth user and competitor knowledge from the ‘refine requirements’ stage, we moved rapidly into the concepts stage.
During a collaborative ideation session, the design pod identified multiple high-level concepts that we believed would contribute
towards an improved user experience with Vodafone.
A flavour of these concepts were:
- High level of personalisation with ‘favourite caller’, ‘longest call’;
- Rewards with cafes etc, after making a long call in the area;
- Engaging digital ways to make payment e.g. paypal or scan cards or vouchers using smartphone camera.
We included the most valuable concepts into our designs.

15. model
Our design pod will only settle for the best design that fits with our customers expectations. With this in mind we usability tested
our prototype within the Studio.
We set users’ the original task of ‘Please top up your credit for your PAYG device’, and interviewed them as they progressed
through our prototype, focusing on elements that could be refined, their expectations and emotions.
The aim of our low fidelity prototype is to appear ‘in-progress’ which encourages users to be more forthcoming with
their opinions, and minimises the risk of extensive time spent on a design which post-testing requires drastically rework.

16. design
Pulling together our user experience and visual design insights, as well as our most compelling high-level concepts, we were able to
progress towards the creation of a more concise MyVodafone PAYG Top-up design.
Our design pod initiated this design process by sketching out the user journey, and we conceptualised the logical flow through the app,
taking into account the information architecture, content priority and overall visual impact.
These sketches provided the essential backbone for our design.
From this, we created low-fidelity wireframes by fleshing out the experience, refining the key layouts and screen elements.
From these wireframes, we added interactive areas thereby constructing a low-fidelity prototype.

17. MyVodafone App
UX
+ High visual prominence of the users’ current balance
+ Large button size allows for easier interaction
- Lack of compelling visualisations to explain data usage,
balance, or call times
- Unclear hierarchy of the action buttons on the home screen
- Clear 4-step tutorial on first use, however messaging could
be more succinct and of equal prominence to imagery
Visual
- Outdated design doesn’t conform to the latest Vodafone
brand guidelines
- Call to action buttons app-wide are generic and don’t
offer sufficient contrast to aid recognition
- Icons appear out of date and don’t follow the modern
flat design trends

18. What does good look like?
The most powerful and efficient Telco iOS apps that we reviewed combined elements of the following:
- clear data visualisation of relevant and key metrics.
- clear, coherant and consistent navigation throughout the app
- consistent design patterns replicated throughout
- aspects that personalise the experience e.g. Naming the customer and frequently made calls
- interspersing flat design with engaging imagery to engage the user
- an inspiring visual design based on the brand guidelines
Armed with an understanding of these important aspects, we were able to include them in our design process.

19. UI VISUALS
(PAY AS YOU GO)

20. Voda,fone Pay As Yo,u Go
Visual UI treatment
Curll'Q'111t v'igw .& functio1r1ality
(�)688
Proposgd fo 1r1ct'ione riity & UX
rns9Brchbesed on user journgy
wipro
digita I

21. Vo,dafone
Pay As Yo,u Go
Visual UI treatment
Adding credit wirthin
tlhe interface
Starting screen introduction.
phone number. account: detaiIs. cu mi,11t
balanCG. data/ usage allowances.
rngistration & offers.
Main functionality and key user joumeys
{via research data) to be highlighted at the
bottom of the screen - potential for
constant positioning
Welrome to Vodafone
Your new Pay As Yo1.1 Go number is:
07777 777 777 >
Your currerit baLance
f.0.00 >
0.00Gb >
ReQJster yo1.1r phone )
Hembu iyer menu
Contains main functionality.
induding account dm:ails�
balanCGs. data. upgrades..
offers. Thiis will util�e and
indude, key findings from UX
research to add value, for PAYG
customern
Yo1,1rCL.Jr,,ent bal,mce
£0.00 >
Hover statD.s
Consistent 1J1Se of Vodafone
user e!Kpertence & brand
guidelinos
Tactile CTAs for enhanced
experiienCG. reinforcing clicks
& good for accessibility
wipro
digita I

22. Vo,dafone
Pay As Yo,u Go
Visual UI treatment
2 clear entry points to adding credit
Using the touch sc�en to add either £5.
£10. £15 or £20.
Replicating the uiser journey over the
phone we have chosen the amount of £6.
Morn research is needed around dam
usage without Wifi + date charges.
fO.oo
Add credit by touch
Actd crooi by phonf'
.....;5; freephone 2345
Introduction of back button.
Currn111t ba anee displayedthroughout
Bottom pers.istg,nt positioning indtcBting
us.er locBtton.
wipro
digita I

23. Vo,dafone
Pay As Yo,u Go
Visual UI treatment
MultJiple payment optfons available.
Future paymGnt methods to bG discussed
with marketing teams. Digital paymGnt
methodslik9 Google WallGt ApplG Pay.
cummt & future digital currenciGs.,
fS.oo
Choose optiori
Pay by Card
Pay by Voucher
>
>
>
>
Payment amount mm be changed on
samG screen using phone touch keypad
User journgy payment method by card
Pay by Card +
wipro
digita I

24. Vo,dafone
Pay As Yo,u Go
Visual UI treatment
Manual entry or card scan optio111s
available.
Multiple cards across a horizontal .scrolI.
Bespoke, keypad entry based on U1Sage
type available when user starts to input
data.
Add Pay As. You Go add c,e-dit
£5.oo
En1 c.,!n"'d oomtttt ON
112.!� 0000 0000 0000 1 000
(
w
'""'�n,,r.w ,;,,'I
I• � .o ((Ol co I
wipro
digita I

25. Vo,dafone
Pay As Yo,u Go
Visual UI treatment
Manual entry or card scan optio111s
available.
Scan version using the, phone camera.
Phone to scan card and sava details in the
same format as the, manual wrsion.
User to verify card deta'iIs.
Add PayAsYou Go add c,e-dit
£5.oo
r
®
L
Hal.cl i:ard here 11 U scan ,a oma'!Jca!J)t
�i,p:la)'c.!ltd fl.De vi"lbesurl,11c,:
,
_J
<
£5.00
r
aqua
L .J
• 1111 I .I.
l;:m,- � 1/W.OC Ji,i;((l;,I'(
wipro
digita I

26. Vo,dafone
Pay As Yo,u Go
Visual UI treatment
Card i'nput completion
Either via manual entry or card scan.
User is prompood to compe,oo tre nsaction.
card details will be validated by seiver.
If the card dGtails arn incorrect. the uoor will
oo, notified by error mGssaging. Thiis can be
v�uaI. verbal or both.
Add Pay M You Go add c,ed'
fS.oo
En1 c.,!n"'d oomtttt
IPostCode
<
£5.00
•-
20'21) V
•-Ntllld
wipro
digita I

27. Vo,dafone
Pay As Yo,u Go
Visual UI treatment
Confirmation
Payment ,confirmation with dam.
Current balance updated with option to
add more credit.
Additional upgradGs.. promos &. cross sel I
opportunitiGs to bG, considered.
Your current balance Md ,cn,it 11
£5.oo >
Add 1.1pgrade:s, to l(Wf package )
£:,;it & Continu,e
- - - - - - - - - --
wipro
digita I

28. our thoughts and recommendations
The application of our user-centred design process helped us to identify the key aspects for a user one specific journey.
However, this is one single user journey which makes up part of a much richer MyVodafone App experience.
Therefore it is of paramount importance that all journeys throughout the app are beautifully and thoughtfully designed to
ensure that the user has the best possible digital experience.
Wipro Digital Design can work together with Vodafone, to rescuplt these journeys and entwine a compelling visual identity
to propel the MyVodafone App to the top of the market.

29. __
For information regarding the showcased work, please email:
Global Head of Design
karl.smith@wiprodigital.com
European Creative Direction
kieran.keegan@wipro.com
UK Lead Designer
andrew.davies@wipro.com
The Wipro Digital London Studio brings together a blend of creative technologists, service designers, user experience architects, creative
visual designers and customer researchers to transform ideas into products and services that innovate, appeal and succeed. Our studio
magazine showcases how we respond to our client requests whilst also demonstrating our industry insights and working practices.
Wipro Digital collaborates and iterates with clients to deliver customer-centered digital transformation. Working at the intersection of
strategy, design and technology, we derive insight, shape interaction, drive integration and unlock innovation for our clients. Drawing on
150,000 associates across Wipro, we apply Customer Journey Engineering to create extraordinary experiences for global brands, businesses
and their customers at scale.
THANK YOU