Design Challenge | Re-imagining Vodafone's Superapp
Redesign of Vodafone Yanımda
Project Overview
The Problem
Vodafone Yanımda is a mobile application where you can do all the transactions related to your Vodafone line in Turkey, shop on the marketplace and take advantage of the offers from the campaigns.
1. What are the main problematic points you see in current practice?
2. If you were to redesign the “Vodafone Yanımda” application and turn it into a superapp, what process would you follow?
3. We expect you to design sample screens for the interface of the superapp whose process you have designed. The homepage and navigation structure will be a priority for us. You can also add additional screens if you need them.
Tools
Miro, Figma
Year / Duration
2022 / 2 Days
Design Process
Discovery / Research
Information Architecture & Services
Netnography
Heuristic Evaluation
Benchmark
Solution / Design
Early Wireframe
Information Architecture
Wireframe
UI Design
Prototype
Discovery / Research
Information Architecture & Services
In order to recognize and understand the services and functions in the application, I first created the existing information architecture. This information architecture allowed me to understand how existing services are located and how their interrelationships are designed on the homepage. Then I highlighted it using different colors to better see how different services are positioned on the homepage. After this study, I gained enough command over the application to be able to interpret users’ feedback.
Existing Information Architecture
Existing Information Architecture with Highlighted Functions in Different Colors
My Account
Invoice
Tariff
Advantages
Netnography
After understanding the basic functions of the application, I made a netnography to quickly reach the feedback of the users. While App Store and Google Play were my main sources, Ekşi Sözlük was another source where users freely comment on many subjects in detail in Turkey. The subject I focused on was the homepage experience, but while reading the comments, I found that most of the users had problems with notifications. Thus, in addition to the homepage and general experience, the use of notifications has become a function that I will focus on.
Findings
Home Page
- Disorganized
- Complicated
Notifications
- Irrelevant notifications for the user
- Difficulty accessing notification preferences
- Unable to delete notifications
Heuristic Evaluation
In order to better understand the reason for the findings I obtained as a result of netnography, I carried out an heuristic evaluation for the homepage and notification page using Jakob Nielsen’s 10 general principles for interaction design. As a result, I have made a more focused examination of the details that may cause problems.
Usability Heuristics
- Consistency and standards
- Flexibility and efficiency of use
- Help users recognize, diagnose, and recover from errors
- Visibility of system status
- Consistency and standards
- Aesthetic and minimalist design
Benchmark
As a final step, I examined the global and local applications with similar services and examined how solutions were brought to similar problems before proceeding to the solution.
Global (Notifications)
Wish: All notifications; categorized as deals, my orders and others. This categorization is a correct form of categorization as it is created by matching the application functions to meet the user’s needs within the application.
Local (Home Page)
Trendyol: It positions the features such as Cabinet, Food and Market at the top. We see your special recommendation on personalization.
Yemeksepeti: It shows the market and food sections separately.
Getir: It shows how it categorizes different services thanks to a neat and clean design as its homepage structure.
Global (Home Page)
Uber: We see a superapp structure on the homepage. It shows different services together.
Klarna: Klarna again shows different services together in a superapp style. Homepage contains searchbar. Separation and hierarchical display of modules are successful.
Groupon: Groupon, a loyalty and coupon application, shows the campaigns separately at the top according to their categories.
Problem Definitions
Home Page
- Supermarket content and function are not separated from operator-related content and functions
- The difference between the functions is not clear enough and a complex homepage structure is formed.
- Low clarity of visual hierarchy due to intense use of color
Notifications
- Difficulty accessing notification preferences
- Irrelevant notifications for the user
- Unable to delete notifications
Solution / Design
Early Wireframes
After defining the problem definitions, I made lo-fi wireframes by creating different iterations of the homepage structure. I created my first sketches for the solution of the problems I have reached.
Information Architecture
After the first sketches I made, I made sure that the main point that created the problems was the grouping of services and functions. That’s why I regrouped the services and functions over the information architecture I had created before, and got new action-based titles.
Shopping
Campaigns
Application
Support
Payment
Status Information
Wireframe & Information Architecture
I made the home page structure final by combining the information architecture I recreated and the sketches I drew. The solution I came up with was to change the positioning of the functions and to have some main functions on the main page without going too far from the existing design.
UI Design
Finally, I completed the UI design in accordance with Vodafone’s design language. I also prototyped the screens I designed and made them testable.
Home Page
See More
Profile
Notifications
Before/After Home Page
Prototype
You can tap the prototype below to experience the full flow.
