You're reading:

Designing the new Swipe Dashboard

  • Kuba Bartwicki
  • November 10, 2014

I cannot imagine working on something I’m not a daily user of. It does so much for the process: exposes subtle flaws, sets a high standard for criticism, and keeps you excited when not much else can. Thus, redesigning the Swipe dashboard has been a blast: we had a very precise vision of what we need to fix, and plenty of time to fix it. Read this post to get a glance at what we ended up with.

We started off by trying to figure out what a dashboard should be. Look around your favourite web services to see that it’s usually not much. Most are an afterthought, a screen you’re not meant to hang around in for too long, moving on to more useful features as soon as you can. And that is, to an extent, fine: we toyed with a radical idea of merging the home with the editor to start with. The results were beautiful, all until we looked at the stuff we actually store on Swipe: a lot of them connected, parts of same projects and concepts. From this came a realisation that we had a unique opportunity at creating something powerful that lets you do multiple things at once, while offering a clean visual overview.

Turns out, it’s not easy to do a lot, show a lot, and look good. We started off with the toggles: our way of both showing and doing. These tiny fields display all useful information about your deck on the left-hand side, hiding a few non-essential ones, and expanding inline as you click. Something feels a bit off about overlays on the web and the idea of inventing a third dimension on top of your content is not quite web-like. We ditched it, and show you everything as it is – some toggles expand into a form and a list, some select text, and some expand to fit a confirmation button. A technical challenge, we managed to make it work as a tool that not only offers a glance, but it gives you power.

Another part of showing a lot is our horizontal scrolling for thumbnails: each of the decks in your home screen shows all slides that you can get to by scrolling horizontally within. It’s buttery smooth, beautiful, and we believe it brings a much needed horizontal direction to the web.

Finally, we went full-width. Your stuff takes all the space you give it, in a true responsive spirit. We split each deck into two: its metadata on the left, and the thumbnails on the right. It’s balanced and removes a lot of the noise that would usually come with so much data; beautiful.

For users with 100+ decks, the old Swipe could get a little… slow. Now that we load everything instead of just a few thumbnails and a title, we had to finally face the issues that come with building a tool as visual as Swipe. We introduced lazy loading both horizontally and vertically: at first, only the decks you need will load, drastically helping your bandwidth and speed. More, of course, load smoothly and handle a lot of images. We used to crop all the images to a standard 4:3 ratio, too; no longer. We now preserve all the ratios after testing extensively with portraits, panoramas, and Markdown slides.

Coming back to the point about organising your stuff into collections, we’ve introduced a few basic tools to help you do just that. Use the top bar to sort and filter, use the toggles to pin and archive. It’s all instant, and doesn’t take the context away.

We’ve had the new Home for a bit longer than you, and are yet to get sick of it. Hope you’ll love it as much as we do. It’s been a long time in the making, and we feel it’s a pretty good showcase of where we are taking Swipe.

Kuba Bartwicki

Kuba Bartwicki

Interface designer at Swipe.