Published on | Prototyping: From UX to Front End — Medium Michel van Heest

A comprehensive view inside a student’s design-process of accidentally creating a popular resource for designers around the globe

Introduction — How it all started

I’ve always been looking for ways to speed up my workflow but never got into the habit of using keyboard shortcuts. Searching on Google for a list of shortcuts from the application I was using took too long and ruined my focus.

I wanted to fix that and built Shortcuts.design as a single truth for all keyboard shortcuts and for improving my workflow. The website became the product of the day on Producthunt and went viral in the design-world within a week after launch.

Me, just after the launch of Shortcuts.design

A lot of people asked me how I designed and built this website and I’m going to give you an inside in my design-process. As a 20-year-old Interaction and UX design student from The Netherlands, I would like to show other students how I work and maybe give them inspiration in their journey to become a professional and grow as designers together.

This is the first part of a short series about Shortcuts.design. This is the story about my design- & develop-process of building this website. A story about the good, the bad an the ugly of my process. It covers a wireframe technique I learned, learning to code, losing motivation, dealing with imposter syndrome and a lot more.

Spoiler alert: I think it’s just a regular design process with a lot of learning along the way 😉.

Observing and interviewing people

I wanted to fix my problem, described above, 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?

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. 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, because yes, I’m still a student and I had (and have) to learn a lot. Win-win.

It all started as a big Google Sheet

Wireframing an easy experience

Thinking about the content

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?

Making a simple overview doesn’t have to be hard, but for a student who’s starting out just like me, it already was a big challenge.

I learned that on tests in university, the first answer that comes to mind is often the right one and you should not change this. I have noticed that when making a good design this is not the case. For this reason, I wanted to push myself to think past my first ideas so I could make a really simple but effective interface.

I did not expect what happened next. By sketching multiple versions and trying new things, I got a combination of good and bad ideas that I could combine very well.

Surprisingly, I had many more ideas in my head about how to layout the content on the page than I initially expected. It helped me a lot to quickly test and explore multiple variants and to oversee all ideas that I, consciously or unconsciously, had in my mind.

The Crazy 8’s technique for wireframing

I started wireframing the layout following the Crazy 8’s technique I learned about on the CharliMarieTV youtube channel. It is a technique where you fold a piece of paper in 8 areas and sketch different variants of your idea per plane as quickly as possible. By putting time-pressure behind this you are forced to think about and sketch different variants quickly and not worry about it for too long. In addition, all variants are sketched neatly next to each other when you’re done so you have a good overview of all your sketches.

I really want to recommend the content on Charli’s YouTube channel to all design-students reading this. It helped me a lot and I learned a lot from her content.

As you can see in the image below, I didn’t worry about how my wireframes looked. I tried to sketch down my ideas as quickly as possible and was focussing on creating different looking layouts so I could combine different versions.

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 few combinations for the hero. Below that would come the table with shortcuts.

Some of the earliest wireframes after deciding to make a big website

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. Also, using websites and applications with a lot of colors and fun elements are actually more fun to use (for us designers) than clean corporate designs, right?

Typography

I tried a lot of basic fonts like Roboto or Open Sans and more premium fonts like Proxima Nova but settled with Nunito.

Nunito is a complete ‘round’ font that feels very friendly. The use of the round corners, as in Nunito, is also reflected throughout the website in all elements used. With Nunito, I tried to give the website a friendly and ‘soft’ appearance through typography.

Colors

There’s actually no logical or well-reasoned explanation behind the purple color. By simply playing with different colors, I finally arrived at this blue/purple tint with a friendly appearance that felt really natural with the Nunito font. The color worked well as a fun element for black text, as a button and for large areas.

The other colors are based on the purple by playing with the hue of the now chosen color. It’s a really simple trick I learned from a teacher at my University to get different colors that match the color you already choose.

I used the red, green and pink colors as indicators for the tool-categories so it was easy to see which type of tool you were viewing without having to read a text-header. This also made it a little more colorful and playful.

In the initial design, I used the brand-colors from every application’s website as background for the logo’s but this didn’t work out so I introduced the subtle gradients which are now in use on the whole website.

Tools-page illustration

At first, I wanted to make the hero of the tools-pages unique for every tool.

After I had designed this, I found out that this had little added value. When you visit the page you are probably already using the application, a screenshot of the application added little to none in my opinion.

Because of the missing added benefit of the screenshot, I tried to really simplify the hero. After many iterations, I added a small illustration on the tools-page hero and used them as indicators. Just like I did with the red, green and pink colors.

The final visual design 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 do back-end programming from the half year I studied Computer Science before switching to Digital Product Design, but I learned the majority of the coding-skills I’m using today by working on Shortcuts.design (Many thanks to Stackoverflow and W3Schools!)

It was a hassle but I had to succeed, otherwise I couldn’t launch the website and I was silently hoping to actually launch it and help a few people with it.

Researching different frameworks and languages

I started by researching which languages and frameworks I needed to know and was a bit anxious I needed to learn a lot about JavaScript and a framework like React or Vue. After doing some more research, I noticed I didn’t even have to learn that! I could just make a simple static website with plain HTML & CSS. And because the site was actually for myself, I could just start right away and build it myself without taking a lot of time learning a new language.

Is my codebase a codebase to be proud of? Probably not. Will a lot of (front-end) developers laugh at it? They probably will. But who cares? I learned that I could make a simple product with only knowing (and learning) HTML and CSS and a few lines of jQuery for the animations. It isn’t that hard and everybody can do it. Don’t make it harder on yourself than it already is.

Learning by building

I learned the basics of HTML and CSS by watching some (free) tutorials from LevelUp Tuts and started building with that knowledge right away. That way I could immediately apply everything I learned in a real project, something that made coding more exciting for me. Applying everything I learned right away helped me with learning the skills and because it was a real-life project I saw exactly which skills I needed and why.

For any (design-)student who is reading this: no matter how cliche it sounds, applying skills in a real project helps tremendously in understanding the code you learn. I can therefore advise everyone not to linger on exercises such as CodeCademy but to get started on a real project (been there done that).

Building the website while still learning to code, man, I broke a lot of things

Doubts

Imposter syndrome

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

I showed the first prototype to a couple of friends to see what they thought about the site. I asked myself why I actually was building a shortcut-reference..? I waited long before showing it to more people because I was a little bit ashamed of what I was making, like who would actually use it? Little did I know…

The so-called shiny object syndrome of building my first side-project and fixing my own problems with design was gone and I rather didn’t want to work on it anymore. The feeling was replaced by a little bit of imposter syndrome. I had a huge lack of motivation because working on it felt like a waste of time although I was learning a lot from it (which is something I didn’t realize at the time while struggling through the design and development problems).

I don’t know why I really felt it, maybe it was a fear of failing..? I learned that a lot of people are experiencing this feeling when designing and building stuff and that it’s actually normal in the beginning. I discovered this by asking around, talking to other design students, reading design blogs and listening to design podcasts.

**F*ck doubts and just ask for feedback**

I pushed through and did some more work on it. After that, I decided to send a working prototype to some more close friends and classmates. One of the close friends was so excited, h*ll he even sent it to everybody within the design-agency he was working in. The people at his agency really liked it. Apparently, I was building something really awesome, this gave me a lot of energy and motivation to continue the project.

One thing I learned from this as a student: show your work as early and as often as possible and ask a lot of feedback. Especially when you’re still a student and are still learning the craft, as I am.

This may look obvious, but for some reason, I’d rather not share my work with people who could criticise it and I’m seeing a lot of other young designers who are experiencing the same feeling. It’s a completely normal feeling but something you really have to push through.

Picasso’s first painting probably wasn’t as awesome as some of the later ones. Learning a skill or building something awesome takes practice, asking feedback and starting over a lot.

As students, we just have to deal with this because we simply can not expect to achieve greatness during the first time(s) we’re doing something. Gary Vaynerchuck is always saying he ‘loves to fail’. As beginning designers, we also have to start ‘loving failure’ and starting over. Even more important: we need to love the proces of creating, learning, starting over and seeing ourselves grow while designing and building things. Only by doing and enjoying this we can learn how to make great products that can solves user’s problems.

Learn to love and celebrate all the small things you learn over focusing on huge goals. That’s how you can keep up your motivation

Tests and iterations

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. I learned that every designer who is more or less famous, or even just really good in their line of work, also started at the bottom like I am starting right now (felt like a real Sherlock…) They know how it feels to start out designing and building stuff and are often willing to give you a lot of valuable feedback and help you further if you ask nicely. The design community is awesome and really helpful so making use of this is extremely smart.

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 bigger for easier reading and adding a hover state on the selected shortcut.

After fixing all the (usability) issues, Shortcuts.design was ready for launch.

Launch + Producthunt = Success

On November 6th, 2017, I launched Shortcuts.design. This part was so exciting and scary at the same time. I still didn’t expect a lot to happen but, silently hoping, kept refreshing my Twitter every few seconds.

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 and maybe help them speed their workflow up with my resource.

Product of the day on Producthunt

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, Prototypr and HeyDesigner, to name a few… something I never thought would happen.

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.

I am receiving a lot of feature requests for the website so in April of this year (2018) I shipped a big update in which Shortcuts.design became open source. From now on, the website is not only for designers and developers but also by designers and developers.

You can contribute to the site using GitHub or check out the website live: Shortcuts.design.

Also, please send in your feature requests for the website on Twitter or GitHub issues and let’s build the future of Shortcuts.design together!

Thanks for reading!

I hope you enjoyed my really long article and liked to hear the story of Shortcuts.design. I’d be happy if could give me a clap 👏.

Feel free to ask me anything by sending me a message or by commenting down below.

Michel

michelvanheest.com

<a href="https://medium.com/media/aaeba9d8527ce1953ab616df57033188/href">https://medium.com/media/aaeba9d8527ce1953ab616df57033188/href</a>

Many thanks to Daniël, Arend, Syara, Elwin and Graeme for proofreading the article 🙌 !

Helpful links from the article:

The inspiring post of Pieter Levels — https://levels.io/product-hunt-hacker-news-number-one/
CharliMarieTV YouTube channel — https://www.youtube.com/channel/UCScRSwdX0t31gjk3MYXIuYQ
Crazy 8’s technique for wireframing — https://www.youtube.com/watch?v=PmmQjLqJQlY
LevelUpTuts YouTube channel — https://www.youtube.com/user/LevelUpTuts
HTML5 tutorials — https://www.youtube.com/playlist?list=PLLnpHn493BHGlqEn4EE7dRUnPn4o_tKM0
CSS tutorials — https://www.youtube.com/playlist?list=PLLnpHn493BHH6DkHPhduhco5XavNA9JaD
CSS3 tutorials — https://www.youtube.com/playlist?list=PLLnpHn493BHFOoBjPGOcWL1PnY0H1w5N_
Contribute on GitHub and make Shortcuts.design even more complete — https://github.com/michelvanheest/shortcuts-design-data

Shortcuts .design: From MVP to #1 on Product Hunt was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Shortcuts .design: From MVP to #1 on Product Hunt

A comprehensive view inside a student’s design-process of accidentally creating a popular resource for designers around the globe

Introduction — How it all startedRead more

Top Stories

Introduction — How it all started
Read more