Ryan Singer

April 9, 2021

9. Shorthand for shaping

Here’s a look at some shorthand I’ve been playing with, early in the shaping process.

I use this when I have a bunch of stuff in my head for a design but I don’t know where to start. I don’t know if all the pieces are going to combine or not. I don’t want to just start randomly and find out that I’ve painted myself in a corner, hit a dead end, or forgotten an important factor.

I’m working an idea for Basecamp 4 that introduces start and end dates on projects, so we can render them on a timeline.

So first, I listed the systems that were swimming around in my head. (By “system” I mean some piece of the overall solution that does something.)

IMG_1329.PNG


“Three types” refers to adding a new type of workgroup in Basecamp that distinguishes ongoing things from projects that end. “Mixed pool” refers to changing the UI so we no longer group projects by type (teams vs. projects vs. ongoing things). “Ceremony” refers to a new flow for creating projects that allows more time and space for making choices.

After they were out of my head, I numbered them to refer to them symbolically.

IMG_1330.PNG


Then, using the numbers, I drew a quick interrelationship diagram. I wrote the numbers in a circle first, then drew arrows to show when doing one thing would make it easier to do another.

IMG_1331.PNG


Having three types (1) isn’t going to be viable unless first we mix the pool (2) because the home page will lose coherence with too many sections. I need start/end dates on projects (4) in order to play with different timeline designs (3). Without more ceremony (5) there won’t be real estate for specifying start/end dates. Etc.

The interrelationship diagram is never perfect. It just has to be good enough to give me ideas about sequence — what to do in what order. Now I see the mixed pool (2) and ceremony (5) as the starting points for everything else.

That decision helped me think about what to sketch. To represent what the sketch should do, I wrote this description:

IMG_1332.PNG


There are three symbols here:

  • The dot (•) means the two things are going to combine in a way I don’t understand. The idea is they will both be changed by being combined due to interdependencies.  I think of it as “product” or “integration.” 
  • The plus (+) means the sketch is going to handle both things, but I can solve them independently. They combine by plugging together in a known way. I think of this like "and", “orthogonal” or “modular.”
  • The not symbol (¬) is the opposite of the dot (•). It mean’s I’m explicitly leaving something out in order not to deal with it yet. This is like choosing orthogonality for now although ultimately I’ll need to integrate more later.

The statement above says I’m going to figure out how to integrate the mixed pool (2) with a new single button (“one button”) to creating different types of project from one place. That new button is going to let me add more ceremony (5) by linking to a new form with more real estate. But I’m not going to think about how that space in the new, more ceremonious flow, accommodates the third type and start/end dates yet (1 • 4).

Instead of writing in “one button”, I could have defined a system for that and numbered it 6. Then the statement would be purely symbolic: (2 • 6) + 5 ¬ (1 • 4). But I just thought of it as I was going, so why bother slowing down. This is just for me.

Now that I had a defined concept of what to sketch, I sketched it:

IMG_1332.PNG


(The Ts, Ps, and HQ in the left-hand sketch indicate Teams, Projects, and HQ mixed together in one pool.)

The “ceremony” is the new dedicated screen (on the right) for creating a project of different possible types. Note the orthogonality (indicated by +). There are lots of ways to design this that don’t impact the way we mix types together into one pool and offer one button to trigger the new flow on the left.

Now I felt I knew where I was. I had a place to start adding in the third type and options for start/end dates. So I took a swing at (5 • 1 • 4), which would be a plug replacement for (5 ¬ (1 • 4)).

IMG_1332.PNG


There are probably dozens of other ways to represent this. The point isn’t to find the perfect way or the One True Way. The point is just to get some handle on what I’m doing so I know where I am, understand how the parts in my head fit together, and feel confident about where to go next.

I might throw everything away later, or realize I missed something critical at the very beginning.  But when I feel too much in a fog, or my thoughts are too tangled, I like having tools I can reach for to map out and compress what I know and where I stand.