Project
Senior design project
Duration
January 2023 - May 2023
Role
UI&UX Designer
Team
Solo
Tool
Figma/Miro
Patterns Awareness Background
Pattern Awareness is my capstone project that centers around a website aimed at increasing awareness among early-stage designers about deceptive patterns (also known as dark patterns)—manipulative user interface design techniques that deceive users into unintended actions.
The Problem
The term "dark patterns" was coined by UX designer Harry Brignull in 2010, and since then, there has been increasing awareness and concern about the use of deceptive design techniques. But companies are increasingly using this design practices to trick consumers (FTC).
The Objective
With its educational purpose, the website primarily targets design students, aiming to bring attention to the common use of deceptive patterns.
The Challenge
How to create a solution that increases awareness in a straightforward way while avoiding overwhelming experiences?
🔎 Discover Stage
Project Background
Even though deceptive patterns are unethical, they are commonly used on many platforms. Professor PattieBelle Hastings once mentioned that many designers don't seem aware they are using unethical design patterns unless they were taught at school. It is crucial to investigate the level of awareness and understanding of dark patterns among early students.
Research Goal
The goal of this study is to gain a deeper understanding of the awareness among design students and early-stage designers. The collected data is utilized to develop a tools that helps to raise awareness.
Research Methods
There are 4 research methods are chosen to be used in this project - survey, interview, literature review, and content analysis. Survey was used to quantitative data, while interviews provide qualitative data. Additionally literature review and content analysis were employed to gain a deeper understanding and knowledge of the research topic.
Survey Findings - Quantitative Research
32 people participated in the survey. The participants are design students from various universities and UX bootcamp students.
Interview Findings - Qualitative Research
Conducted 10 semi-structured interviews ( 6 design students, 1 UX bootcamp student, 1 software engineer, and 2 product designers).
Affinity Map
After conducting interviews and summarizing the transcripts, I inferred codes for an affinity map, which helped me understand the connections between different themes based on their relationships and sequences.
Interview Main Takeaways
Unveiling crucial insights gathered from interviews
Awareness of Dark Patterns
Deceptive patterns can be subtle, some design students and even experienced designers are not fully aware of deceptive patterns.
Call for Society-wide Awareness
Some participants believe deceptive patterns aren't solely the designers' fault. Management and company culture often play a role.
Importance of Education
Participants think that making designers aware of Dark Patterns is a good start to bring awareness.
Negative Perception
Some design students express their negative opinions after they know more about deceptive patterns.
Content Analysis
Thanks for the contribution of many great scholars who have provided extensive resources on deceptive patterns, which have enabled me to analyze and understand the design elements employed in these patterns.
📝 Define
Problems Breakdown
Deceptive patterns are unethical design practices that are widespread across various platforms. Many design students and experienced designers are not fully aware about these patterns. Raising awareness about this issue is crucial. Additionally, it's important to recognize that people generally prefer interactive learning methods.
💡 Ideate
Brainstormed The Possibilities
I explored different design directions for Pattern Awareness and generated various ideas, including a card game, a booklet, a work lab, a website, an electronic PDF, a plugin, a mobile app, and a campus forum.
Afterwards, I presented these ideas to my target audience and asked for their feedback. A website received the highest number of votes.
Whiteboard Speed Drawing
Tackle the problems
After thorough analysis, I identified 3 key areas to address and tackle the problems
Interactive Examples
Engage people with interactive elements to understand and experience deceptive techniques and promoting awareness.
Real-world Case Instances
Concrete examples help people recognize and relate to the use of deceptive patterns in digital experiences.
Credibility Enhancement
Include credible resources to establish trust in the website's content, backed by reputable professionals who have conducted research and analysis in the field.
Low-Fidelity
I used Figma for low-fi website prototypes, tested them with the target audience, and made changes based on their feedback. Changes included removing forums, simplifying navigation, optimizing landing pages with less text, and adding more visuals.
🎨 Design
Building Design System
After completing low-fi version, I progressed to branding the product for the hi-fi prototype. This involved developing a design system, including decisions on color and typeface.
Logo
Hi-Fi Version
Using Figma, I created multiple layout iterations and incorporated early feedback into the design. After two rounds of input and implementation, I finalized the high-fidelity version three.
⭐️ Usability tests
The Third Round Test
I conducted six in-person usability tests with target audiences and Professor Sosa-Tzec in the third round of the usability test to gather feedback and evaluate the prototype's usability for identifying areas of improvement.
Positive Feedback
Participants expressed a positive impression of the design, finding it visually appealing and enjoyable to learn deceptive pattern examples.
Positive impression
Participants liked the design, praising its clean and visually appealing layout.
Visual Consistency
Feedback on the color scheme and typography was generally positive.
Clear Messaging
The website's messages were clear, and participants understood the focus on spotting and avoiding deceptive patterns.
Engaging Examples
Participants liked real-life examples, as they made deceptive patterns easier to understand and relate to.
Enhanced Clarity
Users were confused by full-page pop-ups, unsure if they were part of an example or related to the website. This disrupted their understanding and navigation, causing frustration. To fix it, I added a browser frame to separate interactive sections and made the pop-up cover only those areas. This created clarity, allowing users to engage with the interactive sections without confusion.
🌞 Final Delivery
Project Completion
I delivered the final design, showcasing a refined and improved product that fulfills user needs and aligns with the project's goal of increasing awareness in a more interactive way, engaging users with examples.
Engaging Deceptive Patterns Examples
As a key component of the website, Pattern Awareness includes interactive examples that captivate users, promoting better understanding and interaction on the website.
Presenting Voices from the Community
Showing interview quotes from interviewees adds a valuable dimension to Pattern Awareness.
Enhances the Credibility
Including resources from reputable scholars enhances the credibility and trustworthiness of the website.
Outcome Discussion
The objective of the Pattern Awareness project is to raise awareness about deceptive patterns and promote ethical design practices among design students and early-stage designers. Throughout the design process, I designed a website that prioritized engagement, offering interactive features aim at helping users recognize and combat deceptive patterns. The design outcome is a website that features simple yet helpful interactive elements.
✨ Reflection
Seeking Input
Even thought it was a solo project, seeking input from peers was crucial. Engaging in collaborative discussions proved invaluable in refining ideas, making informed decisions, and strengthening the project. Collaboration leads to better outcomes.
Objective Clarity Through Deep Understanding
Another key takeaway from the project is the significance of fully understanding the topic before setting objectives. Initially, I faced uncertainty about the project's objective due to limited knowledge on this topic. This experience taught me the value of diving deep into the subject matter to gain clarity and ensure well-defined objectives.
Understanding More About Deceptive Patterns
Through an in-depth exploration of the subject matter, I gained a deeper understanding of deceptive patterns. By learning more about this topic, I can identify deceptive patterns in digital interfaces, enabling me to advocate for more ethical design practices in future projects.