Emmanouil (Manos) Chatzidakis - Portfolio

VODAFONE EVO

Get the phone you want, at the price you choose.

— PROJECT NAME

Vodafone EVO

— ROLE

UX UI Design


— DATE

2021

Vodafone EVO puts customers in control of how they pay for their new device, giving them the flexibility to decide how much they want to pay upfront for their new device, and over how long they want to pay it off.



WHAT IS VODAFONE EVO?

  • Vodafone EVO enables customers to get the phone they want at the price they choose. 


Vodafone EVO addresses three main customer needs:

  • • Flexibility to trade in and get an instant guaranteed saving 
  • • Flexible phone contract lengths from 12-36 months 
  • • Flexible upgrades after 12 months 


As well as:

  • • New phone and airtime plans packed with exclusive and unique benefits
  • • Access to the UK’s best network, 400+ stores across the country, and the MyVodafone app for 24/7 service.

METHOD

Agile methodologies and The Double Diamond Framework guided me through the design process in Vodafone UK for the EVO project.


Depending on the project, the size of the diamonds may vary. Meaning that there might be challenges or projects, in which we solely focus or emphasis on one part of the Double Diamond.


This process is not linear. In reality, you need to be prepared to be agile and go back and forth at any point.


DISCOVERY WORKSHOPS

Discovery workshops is a specific activity of the discovery phase that aims to put key stakeholders (POs, BAS, Architects, proposition leads, commercial leads, legal and compliance) in a room together for the specific purpose of ideating and defining the project objectives, requirements, and expected outcomes.


Key Goals of our discovery workshops is to:


• Define our MVP

• Create a product development plan for investors

• Identify end users and entry points

• Create user stories and personas

• List of key product features

• Pros & cons of stakeholder expectations/ideas

• Early financial estimate for development

• Estimated project timeline and budget


NOTE: If we are in the early stages of development, participating in a discovery workshop is the best way to test ideas, investigate potential markets, and evaluate risks or other contingencies.

COMPETITIVE ANALYSIS

Competitive analysis is a critical part of the research process, understanding the landscape of solutions is crucial to the foundation of the solution I am designing for.


A competitive analysis provides strategic insights into the features, functions, flows, and feelings evoked by the design solutions of your competitors. By understanding these facets of competitors’ products, you can strategically design your solution with the goal of making a superior product or experience.


As a UXr I usually contact a SWOT analysis, the goal is to identify all of my competitor's strengths, weaknesses, opportunities, and threats using a format similar to the diagram below. 

DEFINING USER AND BUSINESS NEEDS

Journey mapping is an important step in the Define phase it helps to identify business and customer needs, as well as defining technical limitations (heritage) and technology that will be used in each step.


Through journey mapping comes task analysis and me and the team can Identify the task and its subtasks. If there’s one major goal (the task), break it down into subtasks. Each subtask needs its own goal.


DEFINING AND AGREEING ON USER FLOWS

Next step is to define and agree on the User flows with Architects, Product owners and Key stakeholders so that the Back end work can start without the need of the final UX or UI designs and that budget and resource can start being populated from the programme team and the product owners.


We define the path taken by a user on a website (or app) to complete a task from point A to point B.


The user flow takes them from their entry point through a set of steps towards a successful outcome and final action, such as purchasing a productor service.


I usually provide the team with High level flows like the examples below because I find them easier to communicate with key stakeholder and management.

IDEATING WITH MODULAR DESIGN

Modular atomic design has been around for a while. Web components should be versatile and reusable. We should be able to place them like bricks, interlocking them however we want without worrying about changing any code.


A modular design is an approach for product designing which is used to produce a complete product by integrating or combining smaller parts that are independent of each other.


With the modular design approach, any complex product can be broken down or divided into smaller and simpler components that are independently designed and manufactured.


Each of these individual components is then integrated (or assembled) together to form the final product.


Learning from Lego: A Step Forward in Modular Web Design by Samantha Zhang


A well-known example is Lego toys but IKEA implements this method smoothly into their products. As you can see the modularity of the design is not only in the shape of their storage furniture which allows it to be set in different directions, but also the parts that make up the piece itself, which are rectangles of different sizes repeating the same pattern. 


This makes modular design very cost-efficient from a manufacturing perspective. Building small parts that can be put together later is much easier than building one complex piece. In combination, the modules become increasingly complex and customizable, changing to fit the situation.


Because they can transform based on changing needs of the consumer, these product sets were adapted by many industries, mostly for commercial needs like cars, furniture and on Vodafone's product pages.

THE LAYOUT AND Z-PATTERN SCANNING

The layout of most e-commerce product detail pages are identical.


The image area takes up about half the width of the page, with the product details and the primary action button (main CTA), sometimes referred to as the “buy area” taking up the rest.Interestingly, this particular layout is rarely found outside of e-commerce. But it does make sense in its context.


People scan content from left to right, then down, then back to left to right.

It's called z-pattern scanning, and when shopping it seems to make sense to follow this progression.


People first look at the images, which are the most dominant element on the page, then they progress to the right and see the product title and price (among other details), and as they move down, they expect to see a primary action button.


The F-pattern is different from the Z-pattern in that it is more suitable to consider in a page that is heavy in text and content and it is being used in the text heavy sections of our product page.


The F-Layout relies upon various eye tracking studies for it's foundational concept. These scientific studies show that web surfers read the screen in an "F" pattern.


The numbers in the diagram below indicates the path that the eye follows along the page, and points of interest in the overall page.


People seeing the top, upper left corner and left sides of the screen mostly, only occasionally taking glances towards the right side of the screen. These eye tracking studies argue in favor of placing the most important elements of your site (branding, navigation, call to action) on the left side of the design.

Mobile Visual Hierarchy

However, when on a mobile device, the same reader may not necessarily focus on the left-side content. They will look more to the left but the gaze is somewhat distributed.


So essentially, there’s no “most important” area to optimize first. All the content needs optimization.


So the responsive hierarchy of the information plays a big role. You can you this place to talk a little bit about the image on the side.

Mobile Visual Hierarchy

However, when on a mobile device, the same reader may not necessarily focus on the left-side content. They will look more to the left but the gaze is somewhat distributed.


So essentially, there’s no “most important” area to optimize first. All the content needs optimization.


So the responsive hierarchy of the information plays a big role.

IDEATING AND PROTOTYPING

Prototyping is an integral part of the design process. It allows the team to turn a vision into something tangible in order to test our hypothesis with real users as well as experiment and explore various approaches to an idea before selecting the one that is most valuable both from a business and user standpoint.

Prototyping in Sketch – just before we move to Figma

TESTING YOUR IDEAS WITH USERS

Usability testing, or user testing, is the stage in the design process which enables the team to evaluate our product or service with real users and enables us to create human-centric products. Through this process, you can really explore and analyse your target audience's behaviour when interacting with your product.


Below a small sample of different desktop product pages that we tested.

Benefits and offer on the left Lead plan on the Right side – Winner

device USPS on the left – Lead plan on the right – Second place – but having the colour and storage on the right would crate issues in development

All USPs on the left side – Less engagement and customers interaction with the USPs

Customer did not like this approach especially as a sequence within the flow this performed really poorly.

RESEARCH FINDINGS AND ITERATIONS

Iterative research like this is all about continuous learning and actionable insights.


It helps convince colleagues and decision-makers about why something needs to changes to, say, a product launch message, a step or even micro copy.


And it keeps the team more in touch with customers and respondents as they go on their journey with our product.

Mural Discovery workshop and insights after user testing where gather and reviewed with the collaboration of the UX research team and other stakeholders

IMPLEMENTATION AND ANIMATION

Animating in principle or an other software helps communication within the team. Product owners, designers, testers and developers can easily understand what the expected result should be.


Below some of the assets I shared with the devs during this project.

Results

Period: 17/06/21 – 30/07/21


  • Progression to basket: +65.1% vs benchmark
  • Users added an Airtime Plan: +94.8% vs benchmark
  • Orders: +5.7% WOW, however slightly below benchmark.
  • AOV: +5.8% vs benchmark
  • Visits: +3.0% WoW and +7.8% vs benchmark.
  • tNPS: +8.6% overall vs benchmark
  • Basket empty rate: 23.7% vs benchmark.


  • Unfortunately I am not allowed to share:

  • Conversion rate: % vs benchmark.
  • Order success rate: % vs benchmark
  • Overall revenue: % vs benchmark.


BUILD, TEST, ITERATE

To summarize, the Build-Measure-Learn loop pertains to the cyclical process of turning ideas into products, measuring the reactions, response, and behaviors of the customers against the products that have been built, and learning whether to persevere or pivot the idea.


Testing can help validate—or invalidate—your assumptions, preventing you from wasting your marketing budget on a product that isn’t ready for market. Here are five areas where rapid testing can offer a wealth of marketing information:


My teams typical validated learning process is:


  1. 1. Formulate a hypothesis. A hypothesis is something you believe about your target audience and/or product that needs to be tested.
  2. 2.Devise a metric. A metric is how you measure your hypothesis.
  3. 3. Conduct the testing live or with users
  4. 4. Analyze the results
  5. 5. Make the improvements and test again.


The biggest secret to any Successful project is collaboration and unlimited teamwork


THANK YOU TEAM RAPTORS, SAM, HARRY, SWAGATH, ROBYN, LIVA, ANNA, HANNAH, ALBERTO, LISA


I feel grateful that I had the opportunity to work with you all.