MyVM App new designs

PROJECT OVERVIEW
I worked directly in-house with Virgin Media to create and deliver a ‘My account’ mobile app for both iOS and Android consisting of Billing, Package, Service Status and Help information. I arrived at a point whereby primary research had already been conducted, along with an external review and the release of a pilot app to over a 1000 customers to gauge opinion. I was employed to substantially improve the experience and make it fit for purpose.

8 months later we had re-designed and rebuilt it, adding multiple new features whilst removing pain points to successfully launch in July 2017. 

DELIVERABLES
Gathering research insights, current state analysis, landscape and competitor analysis, experience mapping, experience principles, information architecture, scamps, wireframe flows and prototypes, user-testing facilitation and conclusions, developer feedback and documentation.

CLIENT
VirginMedia | 2016/17

MY ROLE
UX / Service design / strategy and creative direction. My role was to work within a team consisting of a Product Owner, BA, Visual Designer and development team both in the UK and in Romania. We added a UX Researcher and copywriter to complete the team working within an agile environment within 2 week sprints to gather and utilise all research, analytics and personal evaluation to bring onboard all stakeholders across multiple teams.

My aim was not to just improve the app but to push it to a whole new level, to create a vision and use this app as a starting point to strategically raise the standard across all Virgin Media’s mobile apps and corresponding web experiences by continually iterating and solving pain points. After launch, my role changed to lead the UXD across all of Virgin Media’s app portfolio. Delivering a cross-apps UXD strategy to elevate and align all Virgin media apps going forward.

Divider line

KEY BUSINESS NEEDS

  • Increase customers ability to self-serve by reducing time and effort to resolve problems.
  • Reduce calls to call centres (main commercial driver behind our business case).
  • Increase customer satisfaction (as measured by Net Promoter Score).
  • Reduce customer churn and thus increase loyalty.
  • Drive increased usage/value perception of existing product holdings.
  • Drive cross-sell/ up-sell of products.
  • Promote adoption of other Virgin Media apps.

KEY CUSTOMER NEEDS

  • Check latest bill balance, due date and recent transactions.
  • Make Credit and Debit card payments.
  • Check service status in the customer’s area and see the date when issues will be fixed.
  • View package details.
  • Instant access to help and useful tips to self serve without the customer having to phone the call centre.
  • Solve further customer pain points (see insights below from the discovery phase).

Divider line

DISCOVERY PHASE/ RESEARCH CONSOLIDATION

Firstly I wanted to immerse myself with all existing research, to highlight and explore any further gaps and opportunities and to fully understand the current experience and customer behaviour. Virgin Media had already commissioned numerous research pieces both externally and internally. This included:

  • External user testing and review.
  • Testing a Pilot version with a 1000 VM customers.
  • Survey analytics to understand customer pain points.
  • VM Analytics.
  • Persona development.
  • Landscape & competitor analysis.

This was in the form of multiple documents, from this I collated and produced a ‘master’ deck whereby all separate findings were classified into sections based off the app’s information architecture and features. This helped me to then systematically approach each problem both individually and holistically.

Examples of the individual research docs as follows.

Persona creation by EY seren

Personas

External review by Chelsea Apps FactoryExternal review

User testing User testing conclusions

Testing a Pilot version with a 1000 VM customers

Pilot launch research findings

AnalyticsAnalytics and pilot issues

Divider line

TOP-LEVEL PROBLEMS TO SOLVE 

I then consolidated all insights from the above research into key problems to solve.

Old_screens_white_bg

Positive intent – underwhelming outcome

  • Clear app purpose and value for the customer is lacking.
  • Underwhelming experience lacking functionality and engagement.
  • Lots of web re-directs, clunky, lacking seamless journeys, not the expectation of a native app.
  • Multiple barriers to content through multiple sign in screens.
  • Needs bill details, make a payment and manage direct debit details.

Formatting and content challenges

  • No clear links between content and VM products and channels.
  • Billing particularly confusing, reduce cognitive overload.
  • Lack of information hierarchy and difficult to scan.
  • Allow customers to drill down into content.

Inconsistent navigation

  • Navigation elements are removed on certain pages creating a lack of consistency and poor experience.
  • Lack of back button and ‘collapse’ function following expand.
  • Too many clicks to access content creating fragmented journeys and poor experience.
  • Replication of navigation on homepage. No real value to the homepage.
  • Separated and disjointed CTAs, lacks contextual placement and information is too hard to absorb.

Designing for the platform

  • Outdated refresh icon/ interaction.
  • Mixed platform conventions lacking clarity and focus e.g. Android back link convention on iOS Visual layer dated.
  • Broken visually in places using ambiguous conventions e.g. tick validation.
  • Format and fonts not optimised for device usage.

Divider line

FURTHER RESEARCH TO INFORM THE EXPERIENCE

From this I then identified additional opportunities to further inform the project:

  • Personal expert evaluation.
  • Further landscape analysis to gain more inspiration from innovation in other industries and disrupters.
  • Brand expression. I found the current experience very sterile, dated, un-engaging, dis-jointed and not particularly ‘Virgin Media’. A missed opportunity to connect with customers and strengthen customer/ brand relationships, to further fulfil customer expectations of Virgin Media’s products and services.
  • Experience Principles.

Personal expert evaluation

It’s always important for me to get into the detail and personally evaluate current experiences, to validate previous insights and formulate further conclusions. Additional personal recommendations include:

  • To create a vastly improved first impression and on-boarding experience. To convert customers into initial and then long-term use throughout the customer lifecycle.
  • To focus journeys, making them more succinct and seamless, removing repetition and blockers.
  • To break down and layer information into consumable chunks.
  • To provide greater utility (especially for an ‘account’ app) whilst engaging and delighting customers.
  • To help, understand, educate and solve service problems when things inevitably go wrong..
  • To further embrace and utilise the benefits of the platform compared to the web experience.

Brand research and expression

One clear gap which was not evident in the previous testing research is the lack of brand expression. Virgin Media is mean’t to be innovative, fun, playful and exciting. The pilot app was dull to engage with and was similar to Virgin’s competitors showing a homepage with a list of conventional links. Rather than being the same, I wanted this account app to be original, not to follow the crowd but to deliver an account app which is truly distinctive and unique. Like it’s competitors, it’s primary objective/ expectation is to provide utility and solve account problems. However, a further challenge is to strengthen the customer/ brand relationship and emotionally engage with customers, something Virgin Media and it’s competitors are currently lacking. 

To help with this, I approached the head of brand to understand the brand principles further and to see examples of how the brand has evolved over time and how material has been delivered more creatively outside of digital. A huge opportunity to add personality and feeling into digital products and services. This was the first time a UX designer had ever approached his team to understand the brand principles. This really helped to inspire the ideation phase and also build better relationships between brand and the delivery of experience design going forward.

Competitor landscape analysis

Above, a cross comparison of account app homepages.

Divider line

Creating ‘Experience Principles’

I then created experience principles, to utilise the research insights, create empathy, build stronger relationships between customers, products and services and to further focus the project.

This was to help the team and the wider business to understand where we want to be, what makes a good app experience and to further challenge ourselves to deliver my overall vision.

Why create experience principles?

  • To adhere to best practice, to create best in class experiences.
  • To elevate the importance of how customers emotionally engage in our experiences.
  • A framework to benchmark potential solutions against and help the team and stakeholders make decisions.
  • To align thinking, to educate and help different disciplines to understand the reasons why we want to elevate quality and deliver better experiences.
  • To Increase accountability, it gives us an additional method to compare against, challenge our solutions further and measure success.

Experience Principles deck image

Divider line

DELIVERY PROCESS

This involved ideation through scamps, low and medium fidelity wireframes and journeys, flow diagrams, site maps, wireframe and visual prototypes using Proto.io to validate ideas through user-testing. Below are just a few examples from a large body of work.

Divider line

Scamps

Ideation scamps

Top-level journeys
Top level flows

Medium fidelity wireframe flows

Bill history screen

Divider line

Agile process

Working within 2 week sprints, below is in example of a ‘show and tell’ session and UX/UI review.

Agile Process Example

Divider line

Into the detail

Just one example was working directly with developers to show API data flows to inform specific experiences within the app. Below is an example of a webex conversation where we discussed, changed and adapted the flow diagram based on API success and failure for Service Status to agree on the best way to build the journeys. 

Working with devs to develop API scenarios

Like any app experience there is a large amount of work that should never be noticed by consumers. These details include partial data, error screens, notifications for all scenarios across the customers the lifecycles.

Divider line

Wireframe and visual Prototypes

I created wireframe prototypes, Marta Pogorzelska and Abdulkadir Mursal (at konquer) created visual prototypes both using Proto.io. Below are just two examples which enabled us to user-test iteratively and to create and inform discussion with the internal team and wider stakeholders.

App_experience_08032017

Divider line

Agile user testing

We achieved a sweet spot of user testing every friday to deliver constant insights to iteratively improve the experience.

Agile user testing insights

Agile user testing prioritisation

Key insights from user-testing 

  • Customers are unclear regarding the relationship between the ‘latest bill’ and ‘recent charges’.
  • Further breakdown of usage charges needed.
  • Package price breakdown is needed.
  • Billing navigation/ carousel not obvious to everyone.
  • Service Status as on of the main use-cases needs more prominence.
  • Customers do not know they have credit limit applied.

Solutions

  • ‘Recent charges’ are the charges that customers are using now e.g. Watching a VOD film that will be applied to their next bill. Improved copy and explanation within the Recent charges screen.
  • This has further validated a known need. For now we cannot technically show this however, a longer-term API will be built to allow us to add this information.
  • Again, relient on a new API to solve this.
  • Visually the links are weak so we have made them bold and also added an animation for first time use where the carousel links animate into position enabling easier discovery of how to interact with the carousel.
  • Longer term we would like to add this to the homepage however, at this moment we don’t want to access too many APIs that will negatively effect performance. Also, the current service status within the business highlight issues all on one level and therefore gives a negative impression. One idea I would like to pursue is to breakdown and classify those issues into levels just like TFL do for the underground line status. E.g. Good service, minor issues etc. This way, if customers can temporarily not see a programme on television that they don’t even watch, this is a minor issue and not represented as a larger issue than it actually is.
  • One key learning we didn’t expect is that specific customers do not know they have a credit limit applied to their accounts. They are not told during the sales process and therefore this is often the first time they find out about this. To solve this we have added more explanation text and raised it on the page and not revealed via tapping a question mark icon as previously designed.

Divider line

A FEW SPECIFIC PROBLEM EXAMPLES AND SOLUTIONS

SIGN-IN

Prioritising work within a sprint plan

Before we had even started our 2 week sprint cycle, I soon realised that the sign-in process was not good enough for the launch of a major new app. As this was the current web sign-in journey and not specific to this app, this wasn’t part of the initial requirements. However, we had to prioritise this, and with the backing of the product owner we rapidly improved this in a very short space of time.

Initially I scheduled 3 days to work closely with the visual designer (Marta Pogorzelska) to ideate and to create an overall creative direction. I wanted to break away from a legacy of constrained visual aesthetic, to implement brand and experience principles at the beginning of the process and target specific parts of the experience to help inform this e.g. On-boarding, Credit limit, Micro-interactions for default functionality. The challenge to aid utility and value by communicating information and feedback in a more fun, seamless, usable, engaging and delightful way that none of the other competitor brands can do. We continued this thinking specifically when we approached each problem within the sprint plan.

Educating and persuading stakeholders 

Just one example is ‘show’ functionality for the password text field was met with high resistance from stakeholders due to security fears. I used landscape analysis to communicate the usability benefits, to show it is now an industry standard feature and if multiple banks and huge retailers have implemented it, then there should be no reason why Virgin Media cannot do it.

Educating and Persuading landscape analysis

Divider line

BILLING (Roll-over and click through the slideshow).

Enabling customers to view and pay their latest bills, provide bill detail and breakdown, recent charges to be added to the next bill, Direct Debit Setup and credit limit transparancy if a customer has had this applied to their account to limit their expenditure.

  • View Bill Screen
  • Bill history screen
  • Pdf failure screens
  • Recent Charges Screen
  • Example of billing scenarios
  •  

Improved Billing solutions include:

  • Greater clarity and customer understanding. 
  • Significantly reduced cognitive load by breaking up and drilling down into content creating a more absorbable information hierarchy.
  • Added multiple in-app notifications to create awareness and enable customers to self-serve and pay their bills, especially when their account is in arrears and numerous other account issues. Enabling customers to pro-actively solve potential payment issues before they happen. Reducing calls and customer effort.
  • Solving current customer frustrations/ pain points by adding additional features including greater bill details by providing a pdf bill as a phase 1 solution, longer term we would look to obtain new APIs to have a purely native experience to deliver a better mobile experience. Further additions include ‘make a payment’ and ‘manage direct debit’ options, adding ‘bill history’ of 12+ months all solving key customer needs.
  • Completely new navigation patterns across the app aiding consistency, ease of use, improving engagement and enjoyment of using the app.
  • We knew customers wanted to see their recent charges including VOD and Phone costs, these are the charges customers are incurring now but will be applied to their next bill. From user-testing and customer feedback we further broke down charges information .
  • Again from  user-testing, it was clear customers were unclear regarding the relationship between the ‘latest bill’ and ‘recent charges’ and that the navigation carousel was not obvious to everyone. We solved the first issue through simple copy tweaks and better explanation. The second, we made the links visually stronger and improved the interaction whereby when a customer lands on the billing screen for the first time, the carousel animates into place raising awareness and encouraging the customer to engage with it.

Divider line

SERVICE STATUS

Turning negatives into positives for when things go wrong.

Service Status allows customers to find out and understand any service issues in their area that might effect their TV, Broadband and Phone service.

Service diagnose an issue start

Service Status diagnose an issue

Solutions include:

  • Much easier to absorb, use and understand. Removed convoluted navigation, improved understanding by simplifying and improving IA placing links contextually within the right areas and not surfacing too many links up front. Vastly improved visual hierarchy by allowing information to flow in a relevant order by removing competition for attention.
  • Added new functionality to enable customers to test their equipment to solve equipment issues. Also, adding ‘text updates’ so customers can be kept updated regarding on-going issues effecting them. Again, reducing calls and allowing customers to have more transparency and control when experiencing service issues.
  • Removing blockers (previously customers had to input their postcode or home phone number). Now the app knows the customer allowing all access to information through sign-in.
  • Using brand principles to inform the navigation components delivering an engaging interface and navigation that’s delightful and fun to use.
  • Removed dated patterns and conventions, adopting a more platform/ app specific experience. Just one example is ‘swipe down’ to re-load rather than a refresh button.

Divider line

VISUAL DESIGNS

Visual design by Marta Pogorzelska and Abdulkadir Mursal (at konquer), creative direction by myself.

MyVM App new designs

THE LAUNCH

The app successfully ‘soft’ launched in July 2017 with no marketing.

Launch Photos

Launch Photos - Creating awareness internally

THE RESULTS

Within the first 2 weeks of launch it organically achieved 20,000+ downloads on both stores and had already achieved the same billing hits as the website. A 2nd release shortly followed to iron out technical bugs and additional experience enhancements followed.

KEY ACHIEVEMENTS

There are so many different scenarios relevant to customers needs during their lifecycle that are only shown when relevant. Like many projects, this is a real ice-berg of which customers will rightly only see the tip of the work that has gone into this project.

Convincing the business that brand principles need to be intrinsic to experiences and be a part informing them thus increasing customer engagement. Within such a competitive corporate sector this is a USP that is a great opportunity to explore. To break away from fixed, structured, dated visual design to a more free-flowing, organic aesthetic which we can now see much more on all Virgin Media’s on and off digital delivery across all comms too. A small thing but a BIG win and vast improvement within the business.

Bringing in key stakeholders to expand my experience Principles into principles for all Virgin Media apps and not just one.

Re-designing billing across the whole company. Interrogating and improving the Service design to then enhance and solve the pain points for every sub-channel including web and apps.

Sign in journeys and designs implemented across all apps and web experience.

GOING ABOVE AND BEYOND

Additionally, educating the business on the importance of ‘experience principles’ and evangelising customer experience.

Mentoring multiple levels of design talent whilst taking stakeholders and senior management along on our journey.

Being invited to presented to the brand team on their away day, to explain what UX is and how Virgin media’s brand should be intrinsic to the User Centered Design process.

Providing a 4 page document to senior management on how they can better enable great products and services.

After launch, in the absence of a Product Owner, I added multiple responsibilities to my work load to continue delivering and driving improvements.

NEXT STEPS

For customer feedback and opinion to directly inform the roadmap. Just a few examples include Touch ID, Improved help, Improved fully native billing information rather than pinching into a pdf bill, push notifications, more developed APIs to enable more detailed package and billing information.

A change of role for me, to look holistically at all of Virgin Media’s suite of apps handing over the reins to a new product team to drive continued improvements while I oversee and lead the UX and UI design, strategy and bigger picture thinking.

Continuing to balance specific and holistic solutions, creating a design system/ framework for all apps, improving the overall experience through service design across all touch-points whilst collaborating with more parts of the business to help inform strategies e.g. Help, components, logic and rules for every app. Visiting the main Liberty Global (who own Virgin Media) office in Amsterdam to present  our vision, educating and on-boarding stakeholders on the journey ahead of a much improved, aligned and consistent ecosystem. Where individual improvements enhance the collective experience and visa-versa.. Whilst ultimately saving cost to the business.

MY CLIENT’S RECOMMENDATION

 

Michael is a world-class UX professional. He played a critical role on our team in so many ways, including consistently showing:
– An incredibly collaborative working style, both within an agile product team and with a broad range of stakeholders.
– A positivity and determination in driving projects forward.
– An incredible attention to detail – always demonstrating a depth of thinking and designing for every scenario.
– A super clear communication style that always made it really easy to understand his thought process, through which his experience and intuition invariably come out strongly.
– A passion and relentless focus on user needs, while balancing decisions with real pragmatism.
I can’t recommend working with Michael highly enough.

Ben Zacharias, Lead Product Manager, Virgin Media.

 

I worked with Michael on Virgin Media’s service application. I can truly recommend Michael not only as a great professional in UX and product design, but mentor and leader to others. He has really great work attitude, is open minded and thinks holistically about problems he is approaching. He stands out from the crowd as an exceptional design thinking professional that will bring this extra value to any team he will join in the future.

Marta Pogorzelska, Designer, Virgin Media.

 

Michael is very talented and knowledgeable in his field. He is passionate about designing delightful best in class experiences and understands the importance of keeping customers at the centre of everything we do. His ability to combine this with our brand values and understanding of our customer needs have led to valuable improvements to our app UX design.

He’s also played a key role in the delivery of a cross-apps UX strategy and the definition of UXD principles. His ability to draw actionable insights from research, user testing and his knowledge of industry best practices have been a great asset to our team.

It’s been a great pleasure to work with Michael and I would highly recommend him.

Gilda Leicer-Avila, App portfolio strategy & convergence manager, Virgin Media.

 

Michael truly puts the customer at the forefront.

I worked closely with Michael at Virgin Media on the flagship MyVM App. I was impressed with his level of detailed analysis and ability to solve for underlying user problems. However, what separates Michael from the rest is the brilliant balance he has between the dream solution and the current optimal solution. He’s able to roll with the punches, quickly adjusting without compromising on the underlying goal.

It would be an absolute pleasure to work with Michael again.”.

Shanu Mahanama, Product Owner, Virgin Media.

 

FURTHER SHOUTS

Thank you Michael for always seeing the big picture and flagging up ideas and concerns that are insightful, and often beyond your strict remit (i.e. your Quick Start strategy observations this afternoon). You are a credit to us and we’re lucky to have you.

It would be an absolute pleasure to work with Michael again.”.

Adrian Taylor, Senior Product Manager, Virgin Media.