my vodafone app ux research and design concepts

VodafoneMyVodafone App

Version 2.028.03.2015

Wipro Digital Studio LondonThe 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.

creative solutions and servicesWe 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

IT STARTED WITH A SIM(48 HOURS AGO)

our pod structureThe 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

our user centred design processWe 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:

refineREQUIREMENTS

modelINTERACTIVE WIREFRAMES

deliverINTO BACKLOG / REVIEW

designSTATIC WIREFRAMES

concept SKETCHES

UX + VISUAL RESEARCH(COMPETITOR ANALYSIS)

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.

EE / O2EE

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

Virgin / TescoVirgin

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

Giffgaff / 3 MobileGiffgaff

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 AAAcompliance 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

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

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

conceptUtilising 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.

modelOur 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.

designPulling 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.

MyVodafone AppUX

+ 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 Vodafonebrand guidelines

- Call to action buttons app-wide are generic and don’toffer sufficient contrast to aid recognition

- Icons appear out of date and don’t follow the modernflat design trends

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.

UI VISUALS(PAY AS YOU GO)

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

Vo,dafone Pay As Yo,u Go Visual UI treatment

Adding credit wirthin

tlhe interface

Starting screen introduction.

phone number. account: deta i Is. cu mi,11t

balanCG. data/ usage allowances.

rng istration & offers.

Main functionality and key user joumeys

{via research data) to be highlighted at the

bottom of the screen - potential for

constant positioning

Welrom e 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.

indud i ng account dm:ails�

bala nCGs. data. upgrades ..

offers. Thiis will util�e and

indude, key findings from UX

research to add value, for PAYG

customern

Yo1,1r CL.Jr,,ent bal,mce

£0.00 >

Hover statD.s

Consistent 1J1Se of Vodafone

user e!Kpe rtence & brand

g u idelinos

Tactile CTAs for enhanced

experiienCG. reinforcing clicks

& good for accessibility

wipro digita I


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.

Cu rrn111t ba a nee dis played throughout

Bottom pers.istg,nt positioning ind tcBting

us.er locBtton.

wipro digita I


Mu ltJiple payment optfons available.

Future paymGnt methods to bG discussed

with marketing teams. Digital paymGnt

methods lik9 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


Manual entry or card scan optio111s

available.

Multiple cards across a horizontal .scrol I.

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


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'i Is.

Add Pay As You 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"lbe surl,11c,:

,

_J

<

£5.00

r aqua

L .J

• 1111 I .I. l;:m,- � 1/W.OC Ji,i;((l;,I'(

wipro digita I


Card i'n put completion

Either via manual entry or ca rd 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�ua I. 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


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 & Contin u,e - - - - - - - - - --

wipro digita I

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.

__

For information regarding the showcased work, please email:

Global Head of Design [email protected]

European Creative Direction [email protected]

UK Lead Designer [email protected]

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