top of page
logo_light.png

C2A Security provides automotive cybersecurity solutions to protect connected vehicles from cyber threats. With the increasing connectivity of modern cars, the risk of cyber-attacks is a major concern for the automotive industry. In this case study, I share my experience as a product designer enhancing the user experience of C2A Security's cybersecurity platform.

Shot-5.png

Product Challenges (Opportunities)

Onboarding process

As a growing company, Outgage recognized the importance of a seamless onboarding process to ensure new users could quickly and easily start using their product. However, they discovered that many new users were experiencing difficulty with the onboarding process, resulting in confusion, frustration, and low adoption rates. Outgage needed to address these issues to improve the user experience and increase user engagement.

Personal dashboard

Outgage lacked a personalized dashboard that provided users with a comprehensive view of their activities, progress, and key metrics. As a result, users had to navigate through multiple screens and interfaces to find the information they needed, resulting in a fragmented user experience and reduced productivity. Outgage recognized the need for a robust and customizable personal dashboard to enable users to efficiently manage their tasks and access critical data in one place.

Complex flows

As Outgage's product offerings expanded, the user interface became increasingly complex, with multiple features and functionalities available to users. This resulted in a user flow that was difficult to navigate, and users often struggled to find the information they needed or complete their tasks efficiently. Outgage recognized the need to simplify the user flow and reduce the number of options available to users to ensure a more intuitive and streamlined user experience

Outgage users not being tech-savvy

Outgage's user base includes a significant proportion of non-technical users who are not familiar with the latest digital tools and interfaces. This posed a challenge for Outgage's product designers, who needed to ensure that the user interface was accessible and intuitive for users with varying levels of technical proficiency. Outgage recognized the need to simplify the user interface and provide clear guidance and support to help non-technical users navigate the platform and complete their tasks with confidence.

Group 23.png

User flow

Creating a seamless and intuitive user experience is critical for any product's success, but it all starts with understanding how users interact with the system. A clear and well-designed user flow is key to achieving this. By mapping out each step a user takes, from initial login to completing a task, product designers can identify pain points and optimize the experience to increase user satisfaction and retention. This is especially important for Outgage's main user base, who may not be as tech-savvy and require extra guidance to navigate the platform efficiently. A well-designed user flow doc can serve as a roadmap for both designers and users, ensuring that everyone is on the same page and can use the platform effectively.

Working backward from Perfect

Before diving into the redesign, it was crucial to define success and assess the health of the current user experience at scale. Previously, we relied on basic metrics like completion rates to measure onboarding quality. However, I took a step back to unpack the concept of perfect onboarding and identified key dimensions such as time, user engagement, and task complexity. I partnered with our data team to investigate the onboarding experience globally, and used this framework to gain deeper insights into how we can optimize the process for users."

outgage uaser flow.png

Wireframe

Wireframes are an essential part of the user experience (UX) design process. They are low-fidelity, simplified visual representations of a digital product's interface, layout, and content. In the case of Outgage, creating wireframes is crucial to ensure that the main user can efficiently and effectively navigate the product, regardless of their technical proficiency. By creating wireframes, we can test and validate design concepts and interactions, identify potential issues, and iterate on the design before moving into high-fidelity designs and development. Ultimately, creating wireframes helps to ensure that the final product meets the needs and expectations of the main user and delivers a positive user experience.

  • A clear understanding of the layout - A perfect wireframe helps in providing a clear understanding of the layout and structure of the product, ensuring that the user interface is easy to navigate and understand.

  • Early-stage feedback - With a perfect wireframe, you can get

  • early-stage feedback from stakeholders and users, allowing you to make adjustments and improvements before moving on to the development stage.

  • Better communication - A perfect wireframe provides a common language for designers, developers, and stakeholders, making it easier to communicate design concepts and ideas.

  • Cost and time savings - A perfect wireframe can help save time and costs by identifying potential design flaws and issues before development begins.

  • Improved user experience - A perfect wireframe helps to ensure that the final product is intuitive, user-friendly, and meets the needs and expectations of the target audience, resulting in an improved user experience.

ONBOARDING WF_intro.png

Conclusions

  • The design should prioritize the user's experience and make it enjoyable and inviting. This will help increase user engagement and satisfaction with the system.

  • Navigation should be made easy and intuitive to help users understand where they are in the process. This can be achieved through the use of clear labeling and visual cues.

  • Iconography should be simple and readable to ensure users can easily recognize the different features and functionalities of the system. This will help reduce confusion and increase efficiency.

  • Use of layers and transparency can help users have a clear understanding of the system and how it works. This will aid in the system's learnability and reduce the need for external support.

  • Self-service components such as filters should be noticeable and easy to use to enable users to complete tasks independently. This will reduce the need for external support and increase user satisfaction.

  • Simple components should be used broadly to simplify the complexity of information presented in the system. This will make the system more manageable and user-friendly.

Typography & Colors

1 / Nunito

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

1234567890

2 / Open Sans

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

1234567890

outgage colors - 1.png

#01133D

outgage colors - 3.png

#F2F2F2

outgage colors - 5.png

#E996A7

outgage colors - 2.png

#B2B6C3

outgage colors - 4.png

#DD3E56

Group 25.png

Ready for Dev

bottom of page