w — c | A Case Study

On creating a platform for experimentation

Bruno Santos
Dec 22, 2018 · 5 min read

This is a case study on a website I created as part of an Interface Design Class for my Digital Experience Design post-grad.

We have all been there, we create something beautiful that we really love but then our team decides it’s not good enough for the project and what do we do? Yeah… Either trash it or leave it to the silicon dust of our computer’s folders. There’s even a third solution, to share it online as it is, unfinished, either on dribble, behance or some other website alike, but that’s time consuming and it will be overshadowed by the dozens of mockups and pixel-perfect projects already on there. It’s not the right place for this kind of stuff.

With me it's different sometimes. For instance, one day I had this amazing thought: I’ve never seen a diagonally scrolling website, so I went home and did it! I was proud and everything because this time I actually used Javascript on my own and didn’t copy anything from the internet. But… again… it just stood there in my computer.

I just don’t know what to do with these things I keep creating for no reason, just to experiment!


I had the opportunity to design a web app for an Interface Design class so I decided to tackle this problem I have.

The place for you to dump your stuff

w — c is the perfect platform to rapidly share experimentations, scraps or ideas, no matter how unfinished they are.

The goal is to remove the boring, time consuming process of presenting your work for the web that blocks it from ever leaving your computer and blocks you from experimenting more.

The main purpose of this website is to give creative people of any kind a place to upload all their shitty things (hence the name) of all forms — images, videos, web or even just text — and create a secondary portfolio that isn’t polished represents the kind of research and raw ideas that are going on their mind.

Features

  • w — c is a scroller, a place to scroll away and get lost in. Much like Instagram where everybody goes when they're bored, but without any clutter and best of all full of great inspirational content. I also wanted to do something different and I saw no better opportunity than this to use that diagonal scroll script I wrote.
Image for post
Image for post
Working prototype in HTML, CSS and JavaScript

Disclaimer: Since I made the complete prototype in Invision and there are some complex animations going on, I also made a working dummy prototype in Javascript to better demonstrate how the animations work. Keep this in mind for every demo shown below.

  • Focus on what’s important!
    If you are looking for inspiration, why would you need to see a website that’s cluttered with unnecessary text? I removed all the unnecessary ‘noise’ from the homepage so that your eyes are naturally drawn to the images and nothing else. All menus are hidden behind the white bar in the top right corner and can be accessed just by moving your mouse up there.
Image for post
Image for post
Accessing the hidden menu
  • Uploading is a very important step in using the website, so I set to make it a process so simple and frictionless it could be done in seconds, either by dragging the mouse to the left and clicking upload or just dragging your files to any part of the website. Users can only upload their own content so that everything can easily be traceable to its creator.
Image for post
Image for post
After uploading the file, users can keep browsing or go see it in their profile.
  • Friends ≠ Followers
    There are no followers on w — c, that would be focusing the platform on the people. By contrast, having friends and restricting the number a user can have leads to a more curated experience on their feed.
Image for post
Image for post
Adding a friend is super easy and can be done using their email or simply by sending them a link to follow.
  • GROUPS!
    Users can access or create any group they want! Groups act like smaller feeds of curated content for the user to see, plus they’re great for teams, allowing for many users to collaboratively share their ideas on the project.
  • I love this Shit!
    Loving something takes just one click and is a big part of this platform, not only means you are supporting someone’s ideas but you are also saving them so you can remember them later.
Image for post
Image for post
Loving and opening an image

If you would like, you can see the complete prototype in action by following this link to Invision:

https://invis.io/SKPN2WXNV3U

Also, if you want to check out the working prototype follow this link:

https://drive.google.com/open?id=1l1fyZhAWW9HZ3eJhM0P1upD8_CeA-cM6


Thanks for reading, I hope you enjoyed this case study! 🙌


P.S. — Some of the images I used while designing this website are mine, some I have permission to use, but some of them I just took from the internet.
If you are the proud owner of any image I used without permission, contact me and we can talk about it!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store