Mobile App
Tariff Comparison
Streamlining tariff comparisons.
Improving user satisfaction by over 200%.
Enhancing User Experience
in Verivox Mobile App
Intro
Verivox is a leading platform in Germany that offers consumers a comprehensive way to compare various utility tariffs, including electricity, gas, and internet. This case study reviews potential enhancements to the Verivox mobile app's “Tarifvergleich” (tariff comparison) feature. It discusses how these improvements could streamline user processes and improve overall experience, based on preliminary user tests with prototypes
My role
As a UX Designer, I redesigned the tariff comparison feature on the Verivox mobile app. My approach included conducting user research, wireframing and prototyping, optimizing the existing interface, and validating these designs through testing.
Concept
The concept phase guided my approach to enhancing the Verivox app’s tariff comparison feature. It directed the understanding of user needs and shaped the discovery and design phases. Some tasks were straightforward, while others were omitted due to my sole design role and technical uncertainties. This phase provided a clear roadmap for a user-centric solution.
Discovering User
Needs and Challenges
Discover | Initial Insights
- Ease of Use: Users found the existing tariff comparison feature cumbersome, with too much information presented in a cluttered format.
- Accessibility: Certain design elements, such as low contrast and small font sizes, made it difficult for users to navigate and compare tariffs effectively.
- Technical Issues: Frequent app crashes and long loading times frustrated users, particularly during the tariff comparison process.
🟢 The appealing design promotes information delivery with good color choices and structure.
🟢 The information is clearly and understandably presented, facilitating decision-making.
🔴 Certain design elements, such as color contrasts and font sizes, may not be accessible.
😐 Overall Score: 3 out of 5
1. Technical Issues: Frequent crashes and slow loading times disrupt app stability.
2. Navigation: Unintuitive operation and faulty filters often reset to the homepage.
3. Comparison Errors: Outdated prices and incorrect displays of the cheapest provider.
*approximately 96 reviews evaluated
Discover | Expert Reviews
- Navigation and Layout: The app had redundant navigation elements, such as unnecessary tabs visible to users who had not logged in, which cluttered the interface and confused users.
- Visual Design: Inconsistencies in font sizes and color usage made the app appear disorganized and affected the readability of information.
- Interaction Issues: Important interactive elements, like the "X" button to remove a tariff from comparison, were not prominent enough, leading to user frustration.
🔴 Unnecessary Navigation: Redundant elements waste space and add no value.
🟠 Cluttered Design: Various font sizes and styles..
🔴 Poorly visible "X" symbols: Make it difficult to dismiss tariffs.
🔴 Large Accordion: Insufficient separations and the caret is too thin.
🔴 Poor Visibility: Table border and thin, small table font make it difficult to read and hinder accessibility in the mobile app during daily use.
🟠 Hidden Tariff Names: Jerky scroll animation obscures tariff names.
🔴 Confusing Awards: Appear as unnecessary advertising and are poorly explained.
🟠 Unclear Energy Source Mix: Accordion function not intuitive, purpose of expanding and collapsing is unclear.
🔴 Performance Issues: App frequently freezes, especially when loading tariff results.
Discover | Competitive Research
- User-Friendly Interfaces: Competitors like Check24 provided clear, well-organized comparison interfaces that allowed users to quickly understand and compare options.
- Transparency and Trust: Platforms emphasized transparency by clearly displaying cost breakdowns and user reviews, which helped build trust and ease decision-making.
- Efficiency in Navigation: Effective use of accordion menus and clear filtering options were common, allowing users to easily navigate through complex information.
✅ Clear tariff selection with good feedback and a unique selection mode.
✅ Clear detail comparison with quick selection and good table presentation.
✅ User-friendly accordions and well-designed, easy-to-compare tables.
✅ Transparent user experience through step-by-step evaluations of the tariff.
✅ Simple and clear collapsing of accordions - even if not necessary.
✅ Excellent explanations of technical terms via popover, especially for new customers or inexperienced users.
Discover | Usability Testing
- Overwhelming Information: Users felt overwhelmed by the volume of information presented in the comparison cards, which hindered their ability to make quick decisions.
- Technical Frustrations: Many users experienced app crashes and slow loading times, particularly when retrieving tariff comparison results.
- Comparison Limitations: The restriction to compare only three tariffs at a time was a common frustration, as users often wanted to compare more options to make a well-informed choice.
- Additionally, users expressed frustration over the fine print, hidden costs, and the unreliability of some offers
1. The navigation and clarity of the app were rated differently; some users found it cluttered and confusing.
2. Contract details: Terms and contract details were often unclear and difficult to understand - because they were not explained.
3. Satisfaction with the app was average to dissatisfied, with many suggestions for improvement.
Clarity of Information: 3.2/5.Too much information, small font, and lack of highlighting important details.
Orientation and Information Retrieval: 2.6/5. Made difficult by opaque filters and advertisements.
Contract Details: 3.2/5. Certain technical terms and awards were unclear.
Tariff Comparison: 3.2/5. Users want to compare more than three tariffs and sort the list individually.
Overall Satisfaction: 2.7/5 - CSAT 20%. Criticism of advertising and lack of decision-making support.
SUS Score: 52.75
Synthesis
In the synthesis phase, I brought together all findings from my research initiatives. I clustered these insights to identify key themes and prioritized them to determine the most pressing user needs.
This process led to actionable recommendations and clear focus areas for the ideation phase, ensuring our design efforts effectively addressed the most critical issues in the Verivox app’s tariff comparison feature.
Identified Problems
System Usability Scale Score: Indicates that the Verivox app has usability issues.
Tech Stability and Performance
Frequent crashes and slow loading disrupt the user experience.
Navigation and Usability
Confusing navigation and redundant elements make the app difficult to use.
Customer Satisfaction Score: indicates an urgent need for improvements.
64% are okay with the current Verivox Tariff Comparison feature.
Transparency and Comparability
Hidden costs, unclear details, technical terms, and limited comparison options frustrate users.
Recommendations
Ideation and
Design Solutions
Ideation Phase
In the ideation phase, one of my first initiatives was to explore and develop a new navigation concept for the tariff comparison feature. I aimed to assess the feasibility of this idea through wireframing and prototyping.
However, I realized that implementing these concepts would not be straightforward, as both would have necessitated a complete redesign of the tariff comparison, entailing significant effort. Moreover, the benefits of the new solution might have been evident only to experienced users.
Design Implementation
Crucially, I also undertook a major overhaul of the app’s layout, targeting the excessive and unnecessary spacing that led to cognitive overload and gave the app an outdated feel.
- Simplified UI: To combat the clutter and enhance user engagement, I designed a cleaner, more intuitive layout for the tariff comparison feature. This involved eliminating superfluous elements and optimizing spacing to refine the information architecture.
- Improved Accessibility: To make the app more user-friendly, I adjusted font weights, sizes, and interactive elements, focusing on usability enhancements.
- Educational Popovers: I introduced popover functionality to clearly explain technical terms (“Fachwörter”) to users, thus enhancing the app’s educational value and accessibility.
- Enhanced Readability: I modified the color scheme to achieve better contrast, which significantly improved the reading experience for users.
Redesign
Outcomes and Impact
Prototyping and Testing
To validate my designs, I created a high-fidelity prototype and conducted another usability test with five users. These tests focused on the redesigned tariff comparison, assessing the ease of use, clarity, and overall satisfaction with the new design.
- Usability Tests: Participants found the new design significantly easier to use and more visually appealing. The streamlined interface and improved navigation helped users complete their tasks more efficiently
- User Satisfaction: Post-launch surveys showed higher satisfaction scores, with users appreciating the simplified and accessible design.
Key Metrics
The enhancements to the Verivox mobile app’s tariff comparison feature resulted in notable improvements across several key metrics:
- Improved User Satisfaction: User satisfaction scores rose by 225%, (20% to 65%) with many users highlighting the improved usability and accessibility.
- User rated the new Tariff comparison by 4.1 of 5 (3.2 before) 28% up.
82% are fine with the new design of the Tariff Comparison.
Navigation and Usability
The new design makes it much easier and faster to compare tariff information.
Transparency and Comparability
Technical jargon is highlighted and explained through popovers, making the information more accessible and clarifying decision-making.
CSAT has significantly improved over 200%, indicating successful enhancements.
Reflecting on
the Journey
Learnings
Key learnings from this project include:
-
Technical Stability is Crucial: Ensuring the app is free from technical issues like frozen screens and unclear navigation is fundamental for a positive user experience.
-
User-Centered Design: Incorporating user feedback, especially regarding accessibility and jargon, significantly enhances usability and user satisfaction.
-
Iterative Design Improvement: Small, iterative design changes, such as improving fonts and optimizing UI elements, can have a substantial impact on user experience without requiring a complete overhaul.
-
Importance of Competitor Analysis: Reviewing competitor apps, like Check24, provides valuable insights and highlights best practices that can be adapted to improve one’s own app.
-
Balancing Innovation with Practicality: While new navigation concepts are beneficial, they need to be balanced with the practicalities of current project constraints.