Valerio Pierbattista
Front end web developer

Lessons Learned From My First Stupid Open Source Side Project

April 11, 2015

dux

It has been a while since I wanted to create an open source project, something just for fun and not necessarily useful.

The idea for www.drunkuserexperience.com came after reading about this guy getting paid to get drunk and evaluate the client’s website’s UX is an altered state. The idea was pretty funny and I thought I could do better offering a similar “service” for free. I imagined a webpage where you could insert the URL of your website that would then be rendered in an iframe all moving and blurry using css filter and transform properties. Without thinking too much, I started working on it.

The user must be guided and nothing has to be taken for granted

After just a couple of days of work I considered the project finished, so I started sharing the link with friends. I gathered some insights and first impressions from the users and some nice considerations came up from it, which brought me to iterate again and again and again on the UX of this little project.

UI and UX problems

Many didn’t understand what the website was for because initially an open link was already provided, but it ended up being a distraction as the user just stared at the open website in the iframe and struggled to understand they had to actually insert a URL of their choice in the upper box.

This is what it looked like initially:

drunkux-3

What I expected the user to do was deleting the vice.com url from the input, insert a new one, click GO and when the website opened hit the DRUNK VISION button. This flow ended up being too much to understand for the average user so I decided to leave the url input field empty and put an alert that invites the user to write a URL of their own right after the page loads.

drunkux-1

I’ve also removed the drunk vision button, deciding to automatically start the effect as the newly input website opened, offering instead a sober up button to stop or toggle the animation.

"X-Frame-Options: SAMEORIGIN" response header

Another interesting thing I’ve noticed from google analytics was that the first website that comes up on a person’s mind is very very often www.google.com, or social network websites. All of these cannot be rendered in an iframe for security reasons and that was a big weakness. I faced the problem adding a javascript function that checked the value of the text input. I did a search on Alexa for the most visited websites on the internet (which are all very likely to not load in an iframe and are also very likely to be a user’s first choice) and any time the input box contained the names of these websites, an alert would prompt the user to go for something else.

drunkux-2

These tweaks ended up improving the website’s user experience and conversion.

Lessons learned

Iterate until your reach the best experience possible asking for improvement suggestions from people you know at early stages of development. Listen to anything your test subjects say and improve accordingly. Also when approaching a side-project, Keep It Simple and Stupid(KISS) and don’t create necessarily something useful and serious, you can still get rewarded with people having some fun and sharing it with friends .

Share this:

Back

Guest Posts

Recent Posts