Terminal Cheat Sheet


Project Overview, Role and Responsibilities

Terminal Cheat Sheet was a really cool project that I worked on as a designer and developer. With Terminal Cheat Sheet, we wanted to create a website that helped people learn and reference everyday terminal commands. We wanted to make sure all the content was straightforward and easy to understand.

We also wanted to maximize the usage of static content to drive performance and made sure to prioritize accessibility through best practices like WCAG. Terminal Cheat Sheet was designed and built to complement, not replace, options like man pages or detailed user guides.

This project was in collaboration with the insanely talented Matt Joseph.

I used the double diamond design process model to research for and design this website.

The project details are:


The Project

Terminal Cheatsheet is a website designed to help people learn terminal commands.


Project Duration

October 2020 - Present


The Problem

Users need a simple and accessible way to learn about terminal commands.



Create a straightforward website that helps users learn and understand basic terminal commands and functionality.



Lead UX Researcher, Lead UX Designer, Developer



User research, Wireframing, Prototyping, Development

Tech Stack

Jekyll - static site builder that works with GitHub pages

AMP - used to enforce speed, simplicity, and SEO


PureCSS - used for basic components and grid

Workbox - used for offline support/PWA functionality

Termynal - modified a bit to work with <amp-script>


GitHub for source and deployment

GitHub Pages for hosting the content

Cloudflare for CDN


User Research, Problem Statements, Competitive Analysis

For this project, I interviewed 5 users about their experiences using technical documentation websites. I was able to recruit these volunteers through Twitter.

4 of 5 interviewees said that simplicity was key when presenting documentation. 3 of 5 interviewees said that a helpful feature would be live demos of the commands. Several interviewees expressed frustration about guides that required downloading a document like a PDF. Users also emphasized that mobile view would also be essential for a technical documentation site.

The main findings from the user interviews were:

During our competitive analysis, we came across two websites that came pretty close to what we were going for. The first was Command Line Cheat Sheet by Fournova and the second was Linux Command Line Cheat Sheet by David Child. Both sites did a good job of categorizing commands. However, none of the sites showed live demos of the code, which a majority of our interviewees requested.


Paper Wirefames, Digital Wireframes, Low Fidelity Prototypes, Usability Studies

To start the ideation process, I sketched 5 rough ideas of what I wanted the app to look like. Sketches are a great way to quickly jot down some quick ideas. The goal here was to display terminal commands and live demos in a scalable fashion. After thinking through all of my ideas, I created two refined paper wireframes. In both paper wireframes, we decided to go with a list of commands. After this, initial digital wireframes were created in Figma. The big difference between the two wireframes are how the code blocks are displayed. In the first wireframe, code blocks are displayed side by side with the text. In the second wireframe, the code blocks are placed below the text.

The following images are quick paper wireframes of what we envisioned the website should look like (The dashed boxes represent live code demos):

The following are two digital wireframes of the refined paper wireframes, created using Figma:

We took the refined digital wireframes back to the users to run a usability study. We asked the users which wireframe they preferred, and how they would use the website.

Some of the feedback I got from the usability study was:

From this feedback, we made a few changes. The first major change we made was adding a "Copy" button to each command. This was a huge improvement to the current user experience of clicking, highlighting, and right clicking. The second change we made was hiding the code blocks at initial glance. If users want to see a demo, they can click the 'Show Me' button.

The following is the updated digital wireframe based on user feedback:


Mockups, High Fidelity Prototypes, Accessibility

After finalizing the digital wireframe, we moved on to creating high fidelity mockups in Figma. We made sure all colors were WCAG compliant through an awesome Figma plugin called Stark. We also added a Languages option. Between the myself and Matt, we were able to add Arabic and Spanish as options. You can view the high fidelity prototype here.

Going Forward

Takeways, Next Steps

This project was extremely rewarding. In addition to learning a ton from Matt, I was able to see our work pay off through how many clicks our website was getting. In September 2022, we hit the huge milestone of 3,000 clicks in a month. Seeing how much our work was actually helping users was super gratifying and made me feel great about the impact our work had. Microsoft also included our site as a reference for the curl REST API in one of their tutorials. Through open source contributions, we were also able to get the site translated in a number of languages like Arabic, French, and Portuguese. That was a super cool experience.

When the site was developed, we wanted to put an emphasis on making sure the content was all static to ensure fast load times. However, going forward, the plan is to integrate search functionality, which the site is currently missing. In addition to this, we are looking to add more commands, guides, and potentially languages in the future.