— 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 addresses three main customer needs:
As well as:
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.
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.
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.
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.
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.
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.
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
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:
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.