Web & Interaction Design
Manipulab
What happens when digital design violates ethical and moral principles? The result of my bachelor project was a fully elaborated interactive website that playfully and humorously educates users about manipulative design strategies.
Role: Usability Research, UX/ UI Design, Branding, bachelor project
The Problem with…
Dark Patterns
Dark patterns are deceptive design techniques that manipulate users for the benefit of companies, disregarding ethical and moral design principles. By exploiting behavioral psychology, they steer users into decisions that may not align with their actual preferences. A common example is cookie consent banners, where accepting default settings is easy, but disabling tracking requires navigating through complicated menus. These practices create transparency issues, frustrate users, and pose risks related to fraud and data security.
Manipulation
The use of dark patterns has been normalized. Especially big companies like Meta and X find it easy to manipulate and exploit people.
Protection
The use of dark patterns makes consumer protection more difficult.
Unawareness
Consumer unawareness and the normalized use of dark patterns create an atmosphere that leads consumers to accept the manipulation.
Research
Focus Group
Focus group question: Should the website be a guide for UI / UX designers or an interactive information archive for laypersons?
Implementation
Laypersons showed greater interest and need for information than designers.
- Designers felt sufficiently informed.
- Laypersons had prior experiences with dark patterns but only recognized them after learning about the term.
- Dark patterns were seen as inappropriate and disproportionate.
- Participants wanted to learn more about the topic.
Nils Wagner (Student) & Mario Pabst (Teacher)
Personas & Scenario
Several personas were developed to better define the target audience. In this case, the focus was on laypersons, specifically students and teachers, to raise awareness of dark patterns at an early stage. These personas helped tailor the content and approach to effectively educate and engage the audience.
Research
User Journey
In my work, I used the user journey method to analyze the potential functionality of Manipulab.com in more detail. The method was also important for defining how the website could be used.
Wireframes
Research
With the help of the previous results, I worked out wireframes (initially scribbles). Since the website should have many interactive elements & the interaction design should be particularly sophisticated, it was important to plan all steps precisely. It had to be determined which specific functions, information and dark patterns should be displayed.
Branding
Identity
Logo | Color | Name
The design uses a red-blue color scheme to evoke urgency and trust, reflecting deceptive tactics. The logo features a hexagonal shape symbolizing science and the brain, linking to the website’s laboratory concept and representing behavioral patternsThe design draws inspiration from the book PsyConversion by Philipp Spreer.
Final Design
Outcome
Prototype
