The project where I teach DARK PATTERNS *concept site*

While researching user patterns and user stories I came across the term “dark pattern” and was instantly intrigued. Upon further research, I discovered dark patterns are slimy snake oil salesman techniques that subtly push the user towards actions that benefit only the company. These practices can range from annoying to incredibly predatory.

As a designer who believes human-centered design (HCD) results in the best long-term results for ALL parties involved, I decided to create a game that would illustrate how exasperating dark patterns are for customers. Ideally, this would be a fun teaching tool for new designers and maybe even clients who can’t understand why you can’t “just hide that button”.

To make things even more interesting I designed the user story to follow an actual story everyone knows: Snow White. The player has the advantage of anticipating pitfalls (don’t eat the apple!) but must still try to navigate around them, illustrating just how subtle and deceptive dark patterns can be. (created by Dr. Harry Brignall who actually coined the phrase “dark pattern”) and the Twitter hashtag #darkpatterns were huge resources for me as I developed this project.

To start the project I wrote a short story version of the Snow White fairy tale (find it here) keeping the “choose your own adventure” format in mind.

Next I created the user story in Sketch detailing where the user could branch off into dead ends (gotcha!) or continue through the main storyline heading for the happy ending. I collected a “palette” of dark patterns to apply to different parts of the user’s journey through the site.

If a player does click on a dark pattern they will be taken to “Whoops” page and be directed back to the previous page. I considered requiring users to start the whole game over but decided against this as the point of the project is to educate players not frustrate them. Well, not frustrate them too much. 😉

I thought it would be delightfully shocking to give the player an option to “run away” or “say no” at which point they would be unceremoniously dumped on the Google homepage with no further instructions. While a misleading link (called a Bait and Switch) is a great example of a shady UX technique I also decided against this for the same reasons as above.

After this I created basic mockups for pages with dark pattern options.  Yes, the color theme follows the iconic dress of the Disney heroine but more importantly the call to action (CTA) buttons are in an eye demanding color creating some visual hierarchy to the page.

Confusing Copy calls these “Trick Questions“. A question or option appears to mean one thing but when read carefully actually means another.

A perfect example is annoying tick boxes like this one that requires you to opt in or opt out of receiving 3 spam emails every day for the rest of your life.

Muscle Memory Switch

If the “Next” button is always in the same location on the page a user is likely to assume clicking that area will always take them where they want to go. This can be hacked by switching the ‘Next” button to one that says “Sign Up”, “Donate”, or etc.

At this point in the game, the user has been taught to expect action buttons on the lower left screen so I made both of the buttons in that area lead to undesired consequences. The desired button is moved to the top right-hand corner where until this point no buttons have ever been located. Sneaky!

Disguised Link

Think this one is too dramatic? I found a screen shot on Twitter of a company doing exactly this with the “unsubscribe” button in emails! Wow.

On this page the link that benefits the user most is colored white like the background making it virtually impossible to see unless you are lucky enough to accidentally move the mouse over it.

Arbitrary Pay Wall

Ah, one of my favorites followed by arbitrary timepieces and arbitrary item counts. If a user truly needs to pay for a piece of content, if there really is only 1 hotel room left, or if the sale really does end in 30 minutes than it’s not a dark pattern. However, many sites implement these devices falsely to pressure users into acting.

Following a commonly seen dark pattern on this page, I put up an arbitrary paywall insisting users pay $20 to earn their Happily Ever After. None of the other pages had any content below the CTA button so the user has been taught to only scroll so far on each page (looks this dark pattern also uses some muscle memory). In order to get to the free Live Happily Ever After button they must scroll to the very bottom of the page.


My goals in designing this project were:

  • Personally research different kinds of dark patterns and the various ways they are used to ensnare users
  • Educate clients and other designers on dark patterns in a fun but engaging way
  • Create a tool that triggers instant empathy for the user by putting yourself in their shoes
  • Keep improving Sketch skills
  • Keep improving User Story skills


Thanks for reading! I hope to create and publish this project in Spring 2018.




Leave a Reply

Your email address will not be published. Required fields are marked *