INITIAL SITUATION

McAfee faced challenges with inconsistent design across its products, leading to a fragmented user experience and complicating maintenance.

MINE GOAL

Create a unified design standard to ensure consistency across all McAfee products, including implementing a dark theme.

Roadmap and deadlines were established to guide the development process.

Solutions

PERSONAS

As part of the audit, we developed user personas like Sam the Seeker to better understand user motivations and behaviors, and conducted a competitive analysis to benchmark against industry standards.

Sam the Seeker focuses on protecting family and values trusted, high-security solutions based on recommendations. Confident Cam prefers to take control of their own security, choosing reliable, tech-forward brands.

These personas played a key role in design standardization, helping us create more targeted and user-centric interfaces. As a result, we were able to better adapt existing layouts to user expectations, improving their perception and experience with McAfee products.

GRID SYSTEM

I started by analyzing the unique layouts and navigation structures across all the company's products. This audit revealed diverse design patterns and significant variations in navigation. Next, I created basic prototypes to understand the existing grid systems and navigation logic. With this insight, I developed a unified grid system and standardized navigation framework that could be applied across all products with minimal modifications, ensuring consistency and flexibility.

TYPOGRAPHY

I based my work on the existing font system from the design system, which was originally developed only for desktop devices. This font system did not work correctly with the mobile versions of web products.

I refined and expanded the design system with new rules and font styles specifically for mobile devices, ensuring proper display and consistency across all platforms.

RESULTS

Problem: The original typography system was designed only for desktop devices and did not work correctly on mobile versions.

Solution: We redesigned the typography system, adapting it for mobile devices, and implemented new rules into the design system.

Result: Improved text readability on mobile devices increased user satisfaction by 23% and boosted mobile user engagement by 12%.

DARK THEME IMPLEMENTATION

Designed a comprehensive dark theme compatible with all McAfee products, adhering to accessibility standards.

Each element is labeled with color codes and design styles, ensuring visual consistency and facilitating the development of new interfaces.

RESULTS

Problem: Users complained of eye strain when using light interfaces, especially in the evening.

Solution: We developed and implemented a dark theme that met accessibility standards, ensuring comfortable product use in any condition.

Result: After implementing the dark theme, 63% of users reported improved comfort when using McAfee products, and the number of support requests related to visual discomfort decreased by 21%.

RESULTS

Key Metrics

DESIGN SYSTEM

Problem: Before our intervention, McAfee’s product design was inconsistent, with fragmented layouts and navigation, leading to difficulties in maintenance and a poor user experience.

Solution: We conducted a thorough audit of all existing layouts and developed a unified grid system and standardized navigation, which allowed us to unify the design of all products.

Result: The implementation of the unified design system increased consistency by 85%, streamlined the development process by 38%, and reduced the time required to update interfaces by 27%.

Problem: Developers and designers faced difficulties in maintaining design consistency due to insufficient documentation.

Solution: We created detailed and clear documentation and trained the team to confidently use the new design system.

Result: Training time for new team members was reduced by 43%, and the number of errors in implementing new interface elements decreased by 35%

Overall Impact

Increased Productivity: The unified design system reduced the time needed to develop new interfaces and simplified the process of maintaining and updating existing ones. Thanks to standardization and the introduction of clear documentation, team collaboration improved, accelerating the development process by 38%.

Improved User Experience: The overall improvement of interfaces, adaptation to mobile devices, and the implementation of the dark theme led to a 23% increase in user satisfaction, which positively impacted the brand’s reputation.

additional tasks

CASE STUDY

Subscription Purchase Optimization for McAfee

Problem

A complex and cluttered subscription purchase interface, causing confusion and lowering conversion rates.

process in short

I conducted A/B testing to simplify McAfee's subscription interface, based on screens developed from specific hypotheses. The best-performing design, which highlighted the "best value" plan and used a clear layout, resulted in a 15% increase in conversion rates. This confirmed that a streamlined and visually clear design improves user engagement and conversions.

"Before" and "After" of the McAfee subscription interface redesign. The new design simplifies the layout, highlights the "best value" option, and guides users more effectively. The right side of the image details the design specifications for a smooth handoff to the development team.

Conclusion

By simplifying the subscription purchase interface and validating design changes through user testing and data analysis, I was able to significantly improve the user experience and drive better business outcomes for McAfee. The success of this project highlights the importance of user-centric design and continuous iteration based on real user feedback and data.

a little more

CASE STUDY

Dashboard Redesign

Before: The dashboard was cluttered and lacked clear hierarchy, making it difficult for users to quickly access functions and understand their security status.

After: The new design simplifies the layout, highlights key tasks, and adds visual indicators like security scores and alerts. This improved accessibility and increased user engagement.

User Research: Conducted interviews and usability testing with current users to identify pain points and preferences.

Analytics: Analyzed user behavior data, including heatmaps and engagement metrics, to understand which interface elements caused difficulties.

A/B Testing: Tested different dashboard layouts to determine the most effective solutions.

Conclusions: Found that users value simplicity and quick understanding of their security status. Focused on key tasks and visual cues.

Key Metrics

the last one

Wi-Fi Scanning Interface

Before:
The original interface was cluttered and confusing, with too many options that overwhelmed users, making it difficult to find essential information.
After:
The redesign simplified the user flow, organized the layout, and made key actions more accessible. This led to a 36% reduction in user drop-off, a 21% increase in task completion rates, and a 18% improvement in user satisfaction.

A massive amount of work was done, from a comprehensive analysis of all products to implementing new features in the interfaces. What I've presented here is just a small portion of the full scope of tasks I completed.

thanks for watching

Deepfake Audio
Detection

Dark Theme
And Design System

More than 80 mobile app screens
have been updated

© 2003 - 2021, Art Osetrov

IF CRAFTING A BEAUTIFUL UX & UI RESONATES WITH YOU, CONTACT ME.

*

*

*

*