Back

Graphics Library Documentation

The new Docs + Colors page replaced the previous Docs page and the Colors page, both used to document the CMU CS Academy graphics framework. Our main goals for this update were to: make the page fit our new style, clear up the formatting so that the page could be skimmed more easily, and provide more diagram or image based documentation for visual learners. To see the live website and design visit: https://academy.cs.cmu.edu/docs

Tools + Skills

Figma, Illustration

Duration

3 weeks, June 2020

Team

Monica Chang

Team Role

Create new visual content, edit voice of existing content, content organization, layout and interface design

Goal

Revise existing docs page to be more readable and design mobile docs experience

Process

Research, ideate, design, iterate, polish

Read More

Overview of all section styles and layout styles for desktop

When first entering an exercise, students are prompted to read about the task through the checklist and play around with the interactive program they are about to replicate. This is to understand the problem they are about to tackle.

Searching interaction for desktop

When first entering an exercise, students are prompted to read about the task through the checklist and play around with the interactive program they are about to replicate. This is to understand the problem they are about to tackle.

Mobile design and searching interaction

When first entering an exercise, students are prompted to read about the task through the checklist and play around with the interactive program they are about to replicate. This is to understand the problem they are about to tackle.

New diagrams for the docs page

To improve understandability, we created new diagrams to better represent mathematical and geometric concepts.

Process

We began by researching different forms of documentation, especially documentation of other code libraries. We analyzed their navigation, organization structure, and general layout. From there, we started creating iterations.

Some initial iterations for desktop

After, we critiqued our initial explorations and worked towards refining a general navigation structure, and section heading, code example, code block, and color palette style. Reviewing our current docs, we organized the sections to three section levels and designed a way to navigate through them using side navs. We also review out current docs to refine our voice to create a more cohesive experience with the written content.

From there, we then worked on creating layouts for unique docs sections as well as a general layout design to hand off and discuss with the development team.

General layout structure for docs

After refining the desktop layout of the docs + colors page, we decided to work on a specific experience for browsing the docs on mobile which had never been designed before. This was driven by the fact that we heard from teachers that students were using their phones to reference our documentation while coding.

We worked on translating our layout and structure to a mobile screen size and explored several search interactions.

Search bar at top

Search opens on click

Browsing with nav modal

Nav modal for docs

© 2021 Janet Peng. All Rights Reserved. Designed with Webflow.