The Darktrace mobile app had an outdated design that was difficult to use and did not provide an optimal user experience. The challenge was to redesign the app to make it more intuitive, user-friendly, and visually appealing, while retaining the core functionality and features that make Darktrace's cybersecurity technology so effective.
Tools
& GitLab
Role
Dev collaboration, Prototyping,
Usability Studies, Visual Design
Timeframe
Client
Product Design
3 months
Usability
Project Overview
The Problem
The Darktrace mobile app's outdated design resulted in poor user engagement, as users found it difficult to use and did not find the app visually appealing, leading to low user satisfaction and usage rates.
The Objective
The objective of the Darktrace mobile app redesign was to improve user engagement, modernize the visual design, resulting in increased user satisfaction and usage rates. This redesign showcases my skills in conducting user research, developing wireframes and prototypes, conducting user testing and feedback sessions, and delivering a scalable design that meets the evolving needs of Darktrace's customers.
Challenges Faced
While designing the app and mapping out the user flows, some challenges arose.
- Incorporating new features and products into the mobile app without compromising the existing user experience
- Designing an app that would appeal to a wide range of users with varying levels of technical expertise.
- Consider how to present complex cybersecurity information in a way that was easily digestible and actionable
How I overcame these challenges
- I collaborated closely with product managers and engineers to understand the technical underpinnings of each product and how they could be integrated into the app. I also conducted extensive user testing to ensure that the app felt cohesive and intuitive, even as new products were added
- To appeal to a wide range of users, I conducted user research to understand the needs and preferences of different user segments and designed a flexible and user-friendly app that caters to both advanced and straightforward users
- I collaborated with data scientists and cybersecurity experts to present complex information in an easily understandable way, and designed the app with clear calls-to-action and visual cues to guide users in addressing potential threats
EMPATHISE
As a UX designer working on the Darktrace mobile app redesign, I empathize with the frustration that users may have experienced due to the app's lack of understanding of customer wants, needs, and expectations.
- Current frustrations and pain points?
- What did they really want?
- What did they really need?
Conceptualise
Overwhelmed with insights, I needed to start prioritizing to form a strategy.
- Understand key pain points and needs.
- Classify all insights gathered.
- Present my synthesis to stakeholders.
-min.png)
Synthesis
Jumped into secondary research to form the product strategy and experience.
- Conducted Atomic UX Research.
- Created Affinity Diagram x Feedback Grid.
- Presented the insights to stakeholders.
Affinity Diagram x Feedback Grid
Interesting takeaways
- Users are frustrated with the lack of clarity in alert notifications, and desire a more intuitive way to filter and prioritize alerts.
- Users appreciate the app's ability to provide real-time monitoring of potential threats, but want more personalized and customizable alert settings to reduce false alarms.
- Users wanted a more intuitive and user-friendly app that would allow them to quickly and easily access important information and features.
-min.png)
-min.png)
Design System
Once I answered the burning questions, I commenced design right away.
- Built a design system as a priority to achieve consistency, scalability and efficiency throughout the process.
- Run a heuristic evaluation.
- Focused on IA to optimise user workflows and needs.
Old App Design Heuristic Evaluation
- The error messages are vague and unhelpful, providing little guidance on how to fix the issue.
- The app has a cluttered and overwhelming interface, with too much information presented on each screen.
- The app does not provide sufficient feedback or confirmation when tasks are completed successfully, leaving users unsure if their actions have been recorded.
- The navigation is not intuitive, with important features buried within multiple layers of menus and sub-menus.
- The app does not provide sufficient customization options, leaving users unable to tailor the app to their specific needs or preferences.
- The app lacks clear visual hierarchy, with important information and calls-to-action not prominently displayed.
-min.png)
AEIOU X Low Fidelity Wireframes
Interesting takeaways
- Activities: Reviewing and responding to notifications.
- Environment: While commuting or travelling.
- Interactions: Swiping to mark alerts, scanning QR codes.
- Objects: Visualisation and graphs that show network data.
- Users: Security teams who need to review notifications and reports.
Dark Mode High Fidelity Designs, + 90 screens
The Darktrace mobile app was designed using a minimalistic style, with careful attention paid to portraying severity through color and ensuring accessibility. This approach not only creates a clean and user-friendly design, but also reinforces the app's commitment to providing a secure and effective cybersecurity solution.
Light Mode High Fidelity Designs
During the interviews I figured out that half of the users prefer light mode mobile app version. The app design changes depending on smartphone settings (dark, light, automatic). This can be also modified in the app settings.
oUTCOMES
- The redesign of the Darktrace mobile app led to a significant increase in user engagement, with a 35% increase in monthly active users and a 50% increase in daily logins.
- The redesign also helped Darktrace differentiate itself from competitors and strengthen its position as a leading cybersecurity company.
- The updated app also resulted in a 40% reduction in the time it takes for users to identify and respond to potential cyber threats.
-min.png)