Tag: sketch

Categories
Portfolio

JupyterLab File System Research

Sketch of the 'ceilings and bridges' problem - users are trapped below ceilings, and must construct bridges to external file systems.

We’re currently wrapping up the spring quarter, and this seemed like an opportune moment to pause, catch my breath, and go back over some of the work that we’ve done so far.

And I will, first, pause to say that my use of ‘we’ there is very deliberate. I am part of a wonderful team of designers and researchers, working on the file system in JupyterLab:

And myself, in a design role.

After years of being a developer, my first serious involvement in the world of open-source is as a designer. How about that?

So, what have we done so far?

Slide from a heuristic evaluation of JupyterLab, highlighting that the top-level directory is not visible in the file browser.

Heuristic Evaluation

We began with a heuristic evaluation of JupyterLab, going through the process of setting up and using the file browser, and identifying key pain points.

We used Nielsen’s ten heuristics, and assigned a severity rating, from low to high, to problems. And, not to be all negative, we also highlighted some key strengths.

Download PDF
Read on GitHub

Why do a heuristic evaluation?

A heuristic evaluation is a great starting point. It’s a low-cost way to go through an entire interface and identify usability problems, and it’s quick, too.

Working asynchronously, have each of your panel members — and, in this case, the panel consisted of the five of us on the design team — individually go through the interface, making a note of any usability issues they see. Once everyone is done, combine the lists, merging similar/identical items.

Research shows that this technique works, even if the people doing the evaluation aren’t subject matter experts.

Competitive Analysis

Next, we identified several competitors to JupyterLab, direct and indirect, and some influencers — products that aren’t competing with JupyterLab, but could offer some design inspiration.

Download PDF
Read on GitHub

Why do a competitive analysis?

In short, because it’s really helpful to know what your competition is up to. Are there features they have that your users need? That’s a problem. Do you have something cool that your competitors don’t come close to? That’s a marketing opportunity.

It’s a chance to see what the state of the art is, and what market niches are un-filled. (Like, for example, the lack of good sharing features I highlighted in my last competitive analysis.)

Wireframe of a filtering UI in a file browser.

Sketches & Wireframes

While the research team continues with interviews and surveys, Emily and I started in on sketches and wireframes of the new file browser.

See on GitHub

Why sketch/wireframe?

Because it’s too early to be pushing pixels.

Design is an iterative process: research feeds design feeds research feeds design. The initial research gave us our starting point; now, we make sketches, wireframes, and low-fidelity prototypes. The research team will take those and test them. What they learn will feed the next set of prototypes, and the cycle continues.

Especially early on in the process, you want to go low-fidelity; not only because it’s easier, but because it looks easier. If you make something pixel-perfect and beautiful, it looks like a finished project; the people testing it feel bad for pointing out what’s wrong with it, and stay silent, and those flaws work their way into the final product. Nobody’s happy.

What’s next?

We’ve got some more research deliverables that we’re in the process of wrapping up, which I will (eventually) post about here. And then, prototyping and testing!

Categories
Portfolio

Uninvited Redesign: Calibre

As a recent assignment for one of my design classes, we were told to find a website whose design we didn’t like, build a moodboard for a new version of the site, and then create a high-fidelity prototype of the new version of the page we’d called out.

For my uninvited redesign, I selected Calibre’s homepage; I love what Calibre stands for, but I haven’t used it in years, because… well, I’ll just drop in my analysis portion here:

It could use some love, is the short form of it. (After I built that and submitted, I realized I’d forgotten to turn off my content blockers for the screenshot; the unaltered version of the site looks the same, but also features ads along the side, which explains that awkward hanging line in the latter screenshot.)

Next up, build a mood board. This was pretty fun to do – I basically just wandered around, not only the internet, but a nearby library, and my own bookshelves, looking for inspiration. Here’s the result:

I couldn’t not pick Baskerville, c’mon.

The final part of the assignment was to put together our own redesign, using what we’d put together in the mood board. I almost sat down with Sublime and coded it in HTML, because that’s what I do in my day job, and it’d be easy, but made myself use Sketch instead – what better way to learn than by practicing?

That’s the end, right?

Well, no, if you looked at the featured image on this post, you already know I did a bit more. The extra credit portion of the assignment was to do a redesign of a different part of the brand; I opted to do a quick take on “Calibre, if it was designed for macOS”. (For reference, Calibre was designed for/using Qt, which means it looks somewhat out of place… basically everywhere.)

(I would like to clarify – I’m throwing a lot of shade at Calibre here, but I really do respect what it is, does, and stands for. DRM-free ebooks are a very good thing. Support your authors.)

This last bit was, in no small part, just an excuse to play around with the Sketch resources that Apple provides. They’re neat!

Categories
Portfolio

Sketching

Sketch of a toaster, plugged in to the wall.

As I’m sure I’ve mentioned, I’m currently working on a master’s in design. (I’m not sorry for talking about it a lot, I’m excited!)

In the first week, we spent a lot of time sketching. Which is… not something I’ve done a whole lot of, in the past; a bit here and there, especially while I was planning out Fluidics, and I do some at work on occasion, but never as much as we did in that first class.

One of the things that our professors mentioned was that it’s something that takes practice. Which, duh, except I hadn’t really thought about it like that. I’d done the thing that so annoys me when people do it with music: "oh, I’m just not talented at that."

That’s wrong. It’s not that I’m not talented; it’s that I’ve never practiced. So I made a resolution of sorts: I’m doing a degree in design, sketching is an important skill in design, so I’m going to practice this skill. I added it to my habit tracker, and off I went.

Since then, I’ve been trying to do a sketch every day. Mostly sticking with pencils (or rather, ‘pencils’; most of these were done in Moleskine Flow – it’s a pretty good app for this, and I’m quite enjoying the Apple Pencil), a bit of pen here and there. And sketching whatever catches my eye – there’s a good deal of the random items around my house, and a small collection of light fixtures in the various Starbucks’ I’ve found myself in over the past month or so.

It’s been fun. And, looking back over my sketches to put this post together, I think I’m improving. So, hey, practice: it works!

Sketch of two light fixtures. The fixture on the left is ceiling-mounted and has three hanging can lights. On the right is a lamp.
Sketch of salt and pepper grinders, sitting in front of an arched candle holder.
Sketch of a charred stump, still smoking.
Sketch of a cabinet with glass-fronted doors. On top of the cabinet is a plant, vines spilling out of the pot to mostly cover the mounted horns of a deer(?)
Sketch of a rectangular wooden planter. A few succulents are growing in the planter.
Sketch of an electric kettle with the lid open.
Sketch of a cushioned chair with a pillow on it.
Sketch of a teapot being used as a planter. A plant is growing out of the teapot, with a vine draping behind the spout.
Sketch of a pitcher in a matching bowl.
Sketches of four different hanging light fixtures.
Sketch of a decorative planter. The planter is a statue of a wagon, being pulled by a snail; some small plants are growing in the bed of the wagon.
Sketch of a toaster, plugged in to the wall.
Categories
Portfolio

“Add a feature”

In my Design and Prototyping class, we recently did an assignment called "Add a Feature". We were supposed to take an app or site we frequently use, find a competitor or two, and identify a feature that the competitor has. We would then sketch our take on that feature, if it were added to the original app, and wireframe it in Sketch.

As my original app, I chose Things. I’ve been a user, and fan, for years. I have also, however, tried OmniFocus, and know there’s a feature there that I would love to have in Things: sequential tasks.

The basic idea of sequential tasks is that you can set a project, or a group of tasks, to operate in parallel – the normal way, where you can see all the incomplete tasks – or in sequence. When they’re in sequence, you can only see the next incomplete task, not all of them.

Which would be very helpful to me, at the moment – I’m taking classes, and a lot of what’s going into Things at the moment is "do this reading, watch these lectures, then do this assignment." Except, of that sentence fragment, things doesn’t support the word ‘then’, so I see the whole list all at once. I’d rather only see the reading, then only see the lectures, then only see the assignment. Perfect candidate for the assignment.

So, first thing’s first: sketch it.

I kicked around a couple different ideas, but pretty quickly arrived at the conclusion that it should be integrated into Things’ ‘When’ menu.

The ‘When’ menu in Things. After opening it, you can either click to select an item, or begin typing, and use their natural language parser to choose a date.

The other question was how to display these in the list. The point, of course, was that sequential items wouldn’t show up in the ‘Anytime’ list, but they do still need to be visible in some circumstances – namely, when you click through to the project itself, future items still show up.

In the ‘Anytime’ list, that third item wouldn’t appear; you could find it either in ‘Upcoming,’ which is sorted by date, or within the containing project – which is where I took this screenshot.

I actually tried a couple variations – it’s at this point that, were I working for Cultured Code, I’d say “we should build both versions and do some testing to see which is better.” I’m not, though, so I just wireframed them both and turned in the result.

I’m fairly happy with the way I integrated it. Clicking, tapping, or typing “After” pulls up a second menu, where you can search for the item you want to attach to. Instead of thinking about it in terms of the project, the mental model is just “after x, I’ll do y.”

All told, I really enjoyed this exercise – it was the first wireframing I’ve ever done in Sketch, and it was neat to think about integrating a feature into something I use all the time. (And, hey, Cultured Code, if you’re reading this: feel free to use this idea, because I’d love to have the feature.)