my vodafone app ux research and design concepts
TRANSCRIPT
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
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.
Cu rrn111t ba a nee dis played throughout
Bottom pers.istg,nt positioning ind tcBting
us.er locBtton.
wipro digita I
Vo,dafone Pay As Yo,u Go Visual UI treatment
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
Vo,dafone Pay As Yo,u Go Visual UI treatment
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
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'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
Vo,dafone Pay As Yo,u Go Visual UI treatment
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
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 & 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