Urban Decay x Cybersmile

2 Months
Art Director, Creative Director
UI Designer
Sketching, Wire-framing, User Interface Design, Prototyping
Adobe XD, Figma, Adobe Photoshop


The Urban Decay x Cybersmile is a collaboration between the Cybersmile Foundation and Urban Decay Cosmetics, aimed at combating cyberbullying and promoting digital wellbeing. Over the course of a three-year partnership, the project will develop educational resources on crucial topics such as cyberbullying, mental health, and digital wellness. These resources are designed to cultivate a welcoming, inclusive, and safe community within the Urban Decay brand.

As the User Interface designer for Phase 1 of the project, my role is to collaborate with the Art Director and our partners to create a digital e-commerce package. This package will encompass user interfaces for both the website and mobile platforms. Our objective is to design interfaces that not only showcase Urban Decay products but also serve as a platform for disseminating educational content and fostering community engagement. Throughout the design process, we iterated and refined our solutions based on feedback from stakeholders and user testing.

Role & Responsibilities

As the UI designer for the UD x Cybersmile Project, my primary role revolves around crafting the visual and interactive elements of the digital e-commerce package, translating the project's goals and user insights into engaging and user-friendly design mockups. My responsibilities span the creation of both low-fidelity and high-fidelity mockups. I strive to seamlessly integrate the educational resources against cyberbullying while maintaining the aesthetic appeal and functionality expected from an Urban Decay platform.

Tools & Methods

Methods: Wireframing, User Testing, Prototyping
Tools: Adobe XD, Figma, Adobe Photoshop

Value Proposition

Key value propositions for the project include:

  • Enhanced Visual Appeal: Through meticulous UI design, I intend to elevate the visual aesthetics of the UD x CyberSmile digital platforms (website, emails, social media). This enhancement will not only showcase campaign content but also create an engaging and visually compelling environment that resonates with both brands’ identities.
  • Increased User Engagement: The project focuses on creating an interactive and immersive user experience to boost engagement within the Urban Decay community, influencers, and social activists. By incorporating features that encourage participation, such as interactive educational content and community forums, we aim to make the digital platforms a hub for meaningful interactions.
  • Educational Empowerment: The integration of educational resources against cyberbullying directly aligns with the Cybersmile Foundation's mission. By providing valuable information within the platform, we empower users to navigate the digital landscape with confidence, contributing to their digital wellbeing.
  • Inclusivity and Safety: The UI design emphasizes inclusivity and safety, creating a welcoming space for users. Features such as reporting mechanisms, community guidelines, and moderation tools will be integrated to ensure a secure environment that reflects the campaign’s commitment to user welfare.

Problem Statement

How might we create engaging and trending user interfaces for Urban Decay x CyberSmile campaign that align with both brands’ identities?

User Research

Over a two-week period, we conducted intensive user interviews with a diverse group of 8 influencers, delving deep into their experiences with online platforms and their encounters with cyberbullying. These interviews were structured to uncover nuanced insights, understanding users' behaviors, challenges, and aspirations within the digital space. 
To complement these qualitative findings, we implemented a broader approach by administering surveys to a sample of 100 participants. The surveys were meticulously crafted to gather quantitative data on user preferences, perceptions of online safety, and expectations regarding the integration of educational content within a cosmetics e-commerce platform. The combination of both approaches provided a comprehensive understanding of our target audience, equipping us with the knowledge needed to tailor the user interface design effectively.

Target Audience / Persona’s 

The Cybersmile Project aims to reach a diverse audience interested in beauty, cosmetics, and digital well-being. Our personas are carefully crafted to encompass various user segments:

  • Digital Savvy Influencers: They are our main target to collaborate with, and are popular beauty and lifestyle influencers with a substantial following. They are deeply engaged in digital platforms and advocates for positive online experiences.
  • Empathetic Support-Seeker: people that personally experienced cyberbullying and are passionate about supporting others facing similar challenges. They looks for a digital space that provides resources on digital well-being, mental health, and a supportive community.
  • Everyday Social Media User: this group represents the everyday internet user. While they are not beauty enthusiasts, they appreciates informative content will engage with platform that seamlessly integrates educational resources without compromising on a user-friendly and visually appealing interface.

Design Direction

  • Interactive Learning Ecosystem: Design interfaces that seamlessly integrate educational resources on cyberbullying, mental health, and digital well-being, encouraging users to explore and learn while navigating the platform.
  • Beauty and Empowerment Fusion: Fuse beauty and empowerment through visually striking designs that celebrate individuality and diversity. Explore interface elements that convey a sense of self-expression, encouraging users to embrace their uniqueness.
  • Visual Storytelling and Advocacy: Utilize visual storytelling to amplify the advocacy against cyberbullying. Design interfaces that narrate impactful stories, leveraging visuals to convey emotions and experiences.