Type: UX Research + Interaction Design
Tools: HTML, CSS, JavaScript, and AI-assisted development (vibe coding)
Role: Designer, Developer, UX Researcher
Timeline: Spring 2024
Overview
Con-Art is an interactive website I designed and developed to expose and explain deceptive design patterns (commonly known as dark patterns) used to manipulate users online. The goal was to blend education with experience by putting users in the shoes of those being manipulated, then teaching them how to recognize and avoid these unethical design tactics.
The Challenge
How do you intentionally design poor UX to teach good UX?
I had three main challenges to solve:
- Demonstration Through Interaction: How can I exaggerate common dark patterns (e.g., forced continuity, misdirection, trick questions) to clearly demonstrate how they manipulate users?
- Educational Clarity: How can I guide users to reflect on their experience and help them learn how to recognize these patterns elsewhere?
- Performance & Accessibility: How do I ensure an engaging, interactive experience while keeping the site lightweight and easy to navigate?
UX Research
I began with secondary research from:
- Deceptive.design
- UX case studies on dark patterns
- Evaluations of real websites using misleading UI
Ideation & Prototyping
My design process for Con-Art was both exploratory and iterative, grounded in research and driven by the challenge of teaching UX ethics through interaction.
1. Early Sketching: Paper Wireframes
I began by sketching out paper wireframes for each deceptive pattern, visualizing how it might appear in a real interface. This helped me quickly explore how dark patterns manifest and how they influence user flow.
2. Figma Wireframes: Dark vs. Bright Patterns
I then created digital wireframes in Figma, pairing each dark pattern with its “bright pattern” counterpart—the ethical, user-centered alternative. This contrast helped me better define and communicate how deceptive patterns could be redesigned for clarity, consent, and respect.
3. Visual Research: Pattern Library & Flash Cards
To deepen my understanding, I collected real-world examples of dark patterns from deceptive.design, printed them, and annotated them from a user’s perspective. I also created a set of flash cards as a learning tool. Each card featured a deceptive pattern on one side and a description of the deceptive pattern type on the other.
4. Interactive Prototyping in Figma
I built a high-fidelity prototype of a fake website using Figma that intentionally demonstrated poor UX. This prototype became the blueprint for the final site structure.
5. Custom Development: Bringing the Concept to Life
Finally, I custom-coded the Con-Art site using HTML, CSS, and JavaScript. The site features:
- Dark Mode: An intentionally manipulative experience using exaggerated deceptive patterns
- Light Mode: Educational content and redesigns that teach users how to recognize and avoid manipulation
This development process required me to not only apply interaction design principles but also ensure the performance, accessibility, and clarity of both modes.
Final Design: An Interactive Teaching Tool
- Code: Hand-built using HTML, CSS, JavaScript
- AI as Tool: Used AI to scaffold basic structure, then customized and debugged extensively
- Design: Balanced visual exaggeration with educational intent
- Testing: Informal user feedback sessions to refine clarity and interactivity
My Reflection
Designing Con-Art was a deeply exploratory and rewarding process that pushed me to think critically about the ethical responsibilities of UX designers. This project helped me see how interface design can directly influence user behavior, and how even subtle design choices can build or break trust.
By intentionally designing for poor UX in order to teach good UX, I learned how to reverse-engineer deceptive experiences, break them down, and reframe them with user-centered principles. I also grew more confident in developing interactive learning tools, blending my background in design, coding, and research into a unified experience.
This project reinforced my passion for humanity-centered design and sparked a deeper interest in digital ethics, interaction design, and UX education.
Skills Demonstrated
- UX Research – Pattern analysis, user perspective annotation, secondary research
- Wireframing & Prototyping – Paper and digital wireframes in Figma, high-fidelity mockups
- Interaction Design – Designing intentional friction and contrast for learning impact
- Front-End Development – Custom site built with HTML, CSS, JavaScript
- Ethical Design Thinking – Identifying dark patterns and creating ethical alternatives
- Educational Design – Flash cards, paired comparisons, and explanatory content design
- Iterative Design Process – Moving from concept sketches to fully coded, interactive site