Terminal Cheat Sheet

Overview

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.

web

View Prototype

devices

View Source Code

devices

View Project

The project details are:

devices

The Project

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

watch

Project Duration

October 2020 - Present

priority_high

The Problem

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

star

Goals

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

person

Role

Lead UX Researcher, Lead UX Designer, Developer

list

Responsibilities

User research, Wireframing, Prototyping, Development

Tech Stack

‍Jekyll - static site builder that works with GitHub pages
‍
‍AMP - used to enforce speed, simplicity, and SEO

Libraries

‍PureCSS - used for basic components and grid
‍
‍Workbox - used for offline support/PWA functionality
‍
‍Termynal - modified a bit to work with <amp-script>

Infrastructure

‍GitHub for source and deployment
‍
GitHub Pages for hosting the content
‍
Cloudflare for CDN

Research

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:

Four of five interviewees said that simplicity was key when presenting documentation.

Three of five interviewees said that a helpful feature would be live demos of the commands.

One interviewee expressed frustration about guides that required downloading a document like a PDF.

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.

Wireframes

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:

The primary user action was copy-pasting.

All five users did the same exact thing when we started the usability session. Their first action was to go and copy and paste a command.

Showing all the code blocks at one time was overwhelming.

Users iterated that while showing the code blocks was extremely helpful, it was also very heavy on the eyes to see all of them at the same time.

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:

Prototypes

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.