Redesigning our data flows, and putting users first

The why and how behind our redesign of CodeSee data flows.

When I joined CodeSee as Head of Design in March, I knew it was to build a suite of insanely useful tools for developers – to explore everything that happens when you run your app, gain insights about how the code works, record your knowledge, and share it with teammates. What I didn’t know, or wasn’t 100% sure about, was the appetite for the team to make the product as easy-to-use and as elegant as possible.

I was pleasantly surprised! Joining the team as the first full-time design hire meant taking in all the pieces and parts of features developed over the past few months and starting the work of unifying the UX and UI. My first week on the job, and with the full support of the team, I rolled up my sleeves and got to work.

An important design principle I wanted to make sure we follow at CodeSee is that the information about a user’s app should come first: the functions, variable names, values, execution loops, and source code. The content should shine and UI elements should recede. Color should be used minimally to help reinforce understanding. The design should communicate information clearly, it shouldn’t distract, and it should educate the viewer about what is being shown and what a user can do.

Here you can see the before (left) and after (right) view of the data flow screen:

data-flow-before-after.png

And some of the iterations that were tried along the way:

design-explorations-3-up.png

The redesign involved some quick design decisions: a set of color and type scales to standardize the design palette across Figma and Storybook.


The new design also introduces a “timeline” element on the left side of the data flow visualization to make it clearer that information is being displayed in execution order. We’ll be able to use this timeline to show other events that occurred during run time, like user actions and network requests.

recording.png

This redesign of our data flows provides a less cluttered and more consistent UI that allows you to focus on what’s important – your code and run time data – without overwhelming you, while preserving all of the capabilities of CodeSee our users love:

  • Seeing your code in execution order,
  • Diving into functions that call other functions instead of needing to build that mental model in your head,
  • Writing stories that connect directly to your code as you build your understanding of the codebase, and
  • Sharing these stories with teammates to make collaboration easy.

Early access users who are in the hosted version of CodeSee will see the new design automatically. If you’re in the local version of CodeSee, you can upgrade to the latest version to experience the updates.

We’re an early stage company, launching and learning from users rapidly. I’m excited about how we can provide you with deeper insights about your code, without creating or adding to mental overload. Our products will continue to evolve over time, and we welcome your feedback and ideas.

And as a designer in his first couple months on a new team – I’m really proud of this redesign. It’s a step forward for our users, but just the first step of many. Special thanks to Grayson Hay and our Engineering team in getting these changes out the door and into users’ hands. The best is yet to come!

About the Author