UX Case studY

Develop a new funnel and design elements specifically for phone agents

What is Magenta View?

Magenta view is an internal dashboard and booking tool for phone agents working at a Telekom that serves as a centralized platform that assists these agents in managing and processing new contracts for customers.

Satus quo & problem analysis

Tariff selection

I made the decision to implement changes on the website through collaborative discussions with key stakeholders and business analysts, ensuring a well-balanced approach that aligns user needs with business objectives. By working together, we were able to identify and address potential issues, ensuring a smoother user experience and better outcomes for the business.

Some issues were:

Tariff grouping unclear

Insufficient explanations and assistance confuse users. Clear guidance is vital for informed choices.

too much whitespace / unused space

Excessive whitespace creates emptiness on the design and unused space can lead to imbalance. The content should fill appropriately for visual harmony

no clear filtering or contracting

Lack of clear filtering causes search confusion and agents often struggle to refine results efficiently. Frustration arises due to inability to narrow choices.

no details and / or usp's

Users can't assess product/service benefits and lack of information leads to uncertainty.

Satus quo & problem analysis

Configuration & Options page

mandatory elements are missing

Excessive whitespace creates emptiness on the design and unused space can lead to imbalance. The content should fill appropriately for visual harmony

no clear filtering or contracting

Lack of clear filtering causes search confusion and agents often struggle to refine results efficiently. Frustration arises due to inability to narrow choices.

a lot of information is missing

Users can't assess product/service benefits and lack of information leads to uncertainty.

UI inconsistencies

Insufficient explanations and assistance confuse users. Clear guidance is vital for informed choices.

Satus quo & problem analysis

Checkout page

vertical stepper leads to confusion

Insufficient explanations and assistance confuse users. Clear guidance is vital for informed choices.

no editable positions

Excessive whitespace creates emptiness on the design and unused space can lead to imbalance. The content should fill appropriately for visual harmony

iconsistent ui

Lack of clear filtering causes search confusion and agents often struggle to refine results efficiently. Frustration arises due to inability to narrow choices.

customer details are missing

Users can't assess product/service benefits and lack of information leads to uncertainty.

Satus quo & problem analysis

Device selection

too much whitespace / unused space

Excessive whitespace creates emptiness on the design and unused space can lead to imbalance. The content should fill appropriately for visual harmony

no clear filtering or search

Lack of clear filtering causes search confusion and agents often struggle to refine results efficiently. Frustration arises due to inability to narrow choices.

no details

Users can't assess product/service benefits and lack of information leads to uncertainty.

Grouping and categories are missing

Insufficient explanations and assistance confuse users. Clear guidance is vital for informed choices.

Overall Challenges

Challenging an existing UX design involves critically evaluating its effectiveness in meeting user needs and business goals. Identifying pain points, inconsistencies, and areas for improvement is essential to enhance the user experience. This process often leads to iterative refinements that result in a more intuitive and user-centered design.

User interface

feels old and outdated

it feels too complex

it is not scalable

Flow & user journey

not optimal for power users

not converions optimized

non systemic

Demographic User Persona

An experienced Agent who handles this process 4 to 20 times weekly and has spent 6 hours on calls that day as an Agent whose performance is influenced by diverse sales journeys.

Status Quo

The Old User Journey

It no longer aligns with evolving user behaviors, technological advancements, or business goals. Outdated journeys can lead to user frustration, inefficiencies, and missed opportunities. A refreshed journey ensures a relevant and effective experience that meets current user needs and maximizes desired outcomes.

Driving UX principles

My foundational guidelines that steer the design process. They ensure user-centricity by emphasizing concepts like simplicity, consistency, usability, and accessibility, guiding designers to create intuitive and impactful experiences that align with user needs and business goals. These principles form the core of effective and user-centered design practices.

User interface

Clarity

Information, actions, and interfaces are presented in a straightforward and easily understandable manner for users. It minimizes confusion, enhances comprehension, and contributes to a seamless and satisfying user experience.

focus

Prioritizing essential elements, minimizing distractions, and guiding users' attention towards key actions or information. It ensures a clear user journey and a more efficient interaction by reducing cognitive load and helping users accomplish their goals with ease.

productivity

Streamlining user workflows, providing efficient navigation, and optimizing task completion. By designing interfaces that empower users to accomplish tasks quickly and effectively, productivity is enhanced, leading to a more satisfying and efficient user experience.

The New User Journey

This user journey reflects current user behaviors, technological trends, and business objectives. It offers a streamlined and tailored experience that addresses an optimized task flow, and ensures a more engaging and satisfying interaction with the service. This refreshed journey embraces modern design principles and insights to deliver a user-centric and impactful experience.

The solution

Checkout

adding a less prominent stepper

This approach maintains a streamlined design while offering clear progression cues, allowing users to understand their position within the workflow without being overwhelmed by the stepper's presence. This balances guidance with visual aesthetics, contributing to a user-centered and visually pleasing experience.

adding editable positions

Enables Agents to review and modify their selections before finalizing their purchase. This feature empowers users to make adjustments to quantities, or other options without starting the checkout process from scratch. By offering this flexibility, users can ensure accuracy and make last-minute changes, enhancing their confidence and satisfaction with the purchasing experience.

consistent ui elemenets

Maintaining a consistent UI in the checkout process ensures that design elements, colors, typography, and interaction patterns remain uniform throughout. This visual continuity helps users navigate seamlessly through each step, fostering a sense of familiarity and reducing cognitive load. A consistent UI reinforces the user's trust, encourages a smooth flow, and contributes to an efficient and reassuring checkout experience.

customer details are missing

By integrating a user-friendly form that requests details, users can provide the necessary information without friction. This simplifies the checkout process, enhances personalization, and ensures a smooth transaction, resulting in a more convenient and satisfying user experience.

The solution

Configurations Page

Mandatory elements are highlighted

Drawing attention to crucial information or actions that users must complete. This visual emphasis ensures users don't overlook critical steps, such as required fields in forms or essential actions in a process. By making mandatory elements stand out, the UX design promotes clarity and guides users through tasks, minimizing errors and frustration.

clear filtering

Presenting filtering options in a straightforward and user-friendly manner. By using intuitive labels, visual cues, and a logical layout, users can easily identify and apply filters to refine their search results or view specific content. This approach enhances user control, simplifies content discovery, and contributes to a more efficient and satisfying user experience.

added missing product details

Ensuring that all relevant and necessary information is provided to users about a product. By filling in any gaps in details, such as specifications, dimensions, or features, users can make well-informed decisions without the need to search elsewhere for crucial information. This approach reduces uncertainty, improves user confidence, and contributes to a seamless and informative browsing experience.

ui consistency improved

Creating a cohesive and harmonious design across the user interface. By aligning visual elements, typography, color schemes, and interaction patterns, users experience a more predictable and user-friendly interface. This enhances usability, reduces confusion, and fosters a sense of familiarity, leading to a more positive and consistent user experience.

The solution

Configuration & Options page

Filtering and contract duration

It empowers users to find relevant information quickly, leading to a more personalized and efficient experience. By enabling users to control what they see, filtering enhances usability and helps users achieve their goals with less effort.

promotional elements are highlighted

Promotional elements in product cards, such as badges or labels, draw attention to special offers, discounts, or unique features. These elements serve to entice users, communicate value, and prompt them to explore the product further, potentially increasing conversions and engagement.

overall New tariff card layouts

A fresh design approach that showcases items in an innovative and engaging manner. This layout optimizes visual hierarchy, enhances readability, and employs contemporary design elements to captivate users' attention and encourage exploration. By presenting product details and images in a novel arrangement, this layout aims to create a distinctive and memorable user experience.

Summary is clear and structured

By presenting key details in a logical format with organized hierarchy, users can swiftly grasp the essence of the content, facilitating better decision-making and navigation within the interface.

Responsivenes

Ensuring a consistent and optimal user experience across various devices, from desktops to smartphones. This approach adapts the layout and content to different screen sizes, reducing the need for separate mobile sites and catering to the preferences of a diverse audience, ultimately leading to higher engagement and user satisfaction.

Chart Position

If an app or game is on the Top Charts, you’ll see the ranking on its app page. So you know how popular it is right now.

Videos

So. Many. Videos. Watch how an app works before you download it or get a preview of the gameplay.

Ratings and Reviews

The streamlined ratings system makes it easy to see how much an app is loved. And when a developer answers a question, everyone can see the response.

Editors’ Choice Badge

This seal of approval is given to apps and games that really deserve a download. If you see this, you know it’s going to be extraordinary.

In-App Purchases

It’s easy to find and make in-app purchases for the apps and games you already own. You can also subscribe to an app or level up in a game even if it’s not on your device yet.

BLOG & CASE STUDIES

Our Latest News & Updates

MARKETING

Why will webflow dominate the web in 2020.

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Learn More
DESIGN

How to craft a perfect marketing campaign.

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Learn More
BUSINESS

Learn how to get started with webflow interactions.

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Learn More

STATISTICS ABOUT US

Over 600+ completed
webflow projects.

623

PROJECTS

13,323

GITHUB PULLS

34

AWWWARDS

ABOUT US

Creative and Technology Partner for Growing Brands

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book

Search Engine Optimization

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book"

Mark Smith (CEO & Founder)

"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book"

Joran Lee (Head of Marketing)

"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book"

Kate Jose (Business Advisor)