Observing and interviewing people

I wanted to fix my problem but I was curious; Is this just my problem or do other people have similar issues? I started by observing how people were working in professional programs. Were they using keyboard shortcuts or a mouse and trackpad?

I asked the mouse- and trackpad-users why they didn’t use keyboard shortcuts for speeding up the tasks they were performing.

The answers taught me that shortcuts are often hard to remember. This is especially the case when you are using for instance Photoshop for enhancing images and Sketch for designing interfaces. Also, people often found it hard to find a good resource for every single app they were using. They were accustomed to perform tasks using their mouse, even when that was an annoying way to do so.

So it turned out to be not just my problem, it was a problem many people were facing, even when they didn’t think a lot about it, and I wanted to help them.

Google sheets as an MVP

Pieter Levels talked about using Google Sheets as an MVP in one of his posts[1]. I liked it, it looked so simple.

I copied a few lists with shortcuts of the internet and pasted them in a Google Sheet. I saved the link to my bookmarks and Shortcuts.design was born.
After two weeks, I noticed that a Google Sheet wasn’t easy to use for navigation between a lot of different apps. It just didn’t cut it for me. It also wasn’t that easy to use the Google URL and share this with everybody.

From that point on, I knew I wanted to build a simple website listing all the shortcuts I needed. By doing that I could also go through a design process and learn a lot along the way. Win-win.

First version of Shortcuts.design in Google Sheets

Wireframing an easy experience

In the first place, Shortcuts.design needed to be really clear, simple and easy to use. Using it as a reference shouldn’t get you out of your flow.

I started by thinking about the different pages. The website had to consist out of two types of pages: a clear list of all selected applications and some pages with the shortcuts of each specific tool.

The overview page was a real challenge. How was I going to display a lot of tools in a way that wasn’t cluttered?
After sketching some of the ideas, I settled on the idea of splitting the tools into sections and making the sections horizontally scrollable. I noticed this wasn’t easy to use at all and redesigned it into a six-column grid with all the tools displayed in it.

The tools page was a lot easier. I wireframed a simple two-column layout with a small text about the selected tool in the left column and an image of the tool in the right. Below that would come the table with shortcuts.

Shortcuts.design digital wireframe
Shortcuts.design analogue wireframe

Pushing pretty pixels

I wanted to make the site for designers (what’s in a name) so it had to be fun and playful, certainly not too serious.

For the design, I used a combination of fun and bright colors on an almost white background for extra contrast. I used the bright red, green and pink colors as indicators for the tool-categories so it was easy to see which type of tool you were viewing.

Last, I added a small fun custom illustration at the different type of tools pages.

Shortcuts.design tools illustration
Launch image of Shortcuts.design

.shortcuts { display: table; }

Inspired by Pieter Levels, I decided to build the whole website myself, even the coding part. I knew a little bit about how to code but I learned the majority of the coding-skills I’m using today by working on Shortcuts.design. It was a hassle but I had to succeed, otherwise I couldn’t launch the website.

Building Shortcuts.design

Tests and iterations

After I built the homepage and a tool page I was finally ready to show people what I had been doing in the last few weeks.

I waited long before showing it because I was a little bit ashamed of what I was making, like who would actually use it? Little did I know…

I tested the first wireframes and versions many times with some friends to tackle as many usability issues as possible.
In addition, I sent the beta build to designers I found on Twitter to ask if they wanted to use my beta and give me feedback.
I didn’t expect this at first, but everyone was enthusiastic about the idea and my way of executing it.

Based on the feedback, I made some iterations on the design such as adding a ‘Related apps’ section on the bottom of the tools page, making the table a little bit smaller for easier reading and adding a hover state on the selected shortcut.
fter fixing all the (usability) issues, Shortcuts.design was ready to for launch.

Launch + Producthunt = Succes

On November 6th, 2017, I launched Shortcuts.design. After the launch, I submitted it on Producthunt and wrote a few lines about it on DesignerNews and some Facebook groups for designers. I was hoping to get at least 500 people visiting my site.

Within a week, the website had gotten about 50k unique visitors, became product of the day on Producthunt and was featured by large websites or companies like Creativebloq, Sidebar, InVision, DesignerNews, Prototypr and HeyDesigner, to name a few.

Further development

After the first hype, the users actually started to come back and kept using the website. I started to monitor the usage of the site with Hotjar to find UX problems I missed.

After being live for a few months, Shortcuts.design reached over 65k visitors, 2.5k returning visitors each month and has become an open source project.
I have received a lot of feature requests for the website and it is still in active development.

Check out the website live: Shortcuts.design.