How we design
Beliefs
Edutainment-first
Our contribution to society—our art—is edutainment. The act of making things that help people grow through enjoyment. If a design is “cool looking” but doesn’t facilitate learning while also being enjoyable for them, it’s not edutainment, it's not our art, and it's not for us. Everything we produce should live at that intersection: things that help people "grow through fun," however they define fun or enjoyment
Design presents, and yields to, words and art
Design’s job is to facilitate people. They’re trying to go somewhere or do something, and design helps make that possible. Such is the importance of design, and the gift of good design. For instance, relaxing and reading are both activities that can happen in chairs… but each function is better suited to a different type of chair. In each case, the chair’s job isn’t to say “Look at me!” (itself), it’s to say “Look at this!” (an invitation to relax, or to read).
When people remark on good design, what they’re usually describing is the experience it will facilitate (and how effective it will be at that). When people remark on bad design, what they’re usually describing is merely the way it looks (and how it may fail at that experience). A well-designed cup holds the right amount of liquid, is easy to fill and pour from, and is comfortable to drink from. A badly designed cup prioritizes its appearance over its function, holding the wrong amount of liquid, or being less comfortable to hold or drink.
That’s not to say good design is boring, though. Good design can facilitate art and words. If a user needs those things to have the experience they’re looking for, then it’s design’s (and the designer's) job to facilitate those things.
Design orchestrates the right words and pictures to ensure users get the best experience they possibly can. For instance, it helps the words they need to read be read and presents pictures to assist in comprehension and immersion, while helping our edutainment-first goals shine through. Good design is able to take these things and present them to the user. Bad design will do none of that. It will try to be the centre of attention, resulting in words being more challenging to read, images being meaningless decoration, and losing sight of its goal. We do good design.
Comfy but with personality
Our work should feel comfortable and familiar to the people it’s for. Modern, legible, and recognizable within their world. That's not an excuse for generic or soulless. Rather, it's a call to meet them where they are, before we take them somewhere else.
“Comfy” means familiar UI patterns, readable typography, sensible spacing, and avoiding things that make users stop and think “wait, how does this work?” “Personality” means warmth, intentional quirks, visual decisions that feel thoughtful and delightful, rather than templated. Our goal is not to impress other designers. Our goal is to make the right people feel at ease, curious, and engaged, and as though they're going to enjoy using this (however they define "enjoy").
Less but better
We favor fewer elements, executed with more care, over many elements executed poorly. We can do a lot with a little, if those few pieces are excellent.
The details matter: consistent spacing and padding. Restrained, intentional color use. Typographic hierarchy that feels calm and obvious. Repetition of patterns so users can relax into the experience. If we're going to include something in the page, it needs a darn good reason for being there, beyond "it looks nice" or "I saw a competitor do it". If it doesn’t serve the experience, it doesn’t belong.
Not for everyone
Our work is not designed to please everyone. It is designed for the defined target audience, and people one degree removed from them. If a design decision improves clarity, comfort, or enjoyment for the intended audience but might confuse or alienate others, that's totally okay, and often desirable. Trying to make work that pleases everyone usually results in work that excites no one.
Process
Sketch
The first step is to see it. Sketches let us see the work and secure approval from a partner, before we go through the process of actually making it. This is useful for obvious reasons: we can design confidently, without anxiety about whether it'll get shot down, and without rushing to show something substantial for feedback. When things are shared in low-fidelity like this, people tend not to judge it on the details, because there are no details yet! It focuses everyone on the shape of the work, the placement of things, and maybe some screenshots that accompany the sketch to infer the kind of visual polish we'll be going for, if needed or appropriate. Photograph a piece of paper, draw in Photoshop/CSP/Krita, or a mixture of the two. Totally up to you. The important thing is that we can show how it'll look, before we make it, so we can make it confidently and calmly.
Sanity check
At this stage, design and development review the progress to ensure we're in scope. We change the shape of the work if not, then proceed with the production process.
LowFi
With an approved sketch, we can start assembling the LowFi. The LowFi is a "wireframe", where we have either grey boxes and un-styled text in the places everything goes to infer form, or scaffold the page using existing patterned/approved materials, or a mixture of the two. We're not layering in colors and polish yet, we're making sure everything fits where it goes, and still feels good as things move from sketchy lines to real digital form. We don't tend to secure partner feedback at this stage, since there's nothing for them to really give feedback on.
MedFi
MedFi is the near-final, unfinished version of the design. Art isn't done, spacing etc. isn't dialed in, but if you lean back and squint your eyes, it basically looks like the finished piece. This is a stage we do share with partners for feedback, with the note that it is medium-fidelity, not high-fidelity, it's ahead of polishing graphics or dialing in the details, so they can sign off on the page coming together as they'd like. The disclaimer is important, so that nobody conflates MedFi materials with HiFi materials.
HiFi
HiFi is the final version of the design. Art is done, spacing is correct, color palettes are defined and properly used, viewports are all defined, components are orderly. Once this is approved, there should be no further tweaks to make in order to progress over to the handover stage.
Handover
With HiFi approved, at this stage we get things ready for development to take over. Everything is uploaded and annotated in Zeplin, with swatches and styles clearly defined for orderly reuse. Any user interactions are written up, in terms of how they're supposed to function, such as color changes, delays or transitions. Developers should then have everything they need to confidently build the design, with the final result properly representing the vision behind the design.
Tools
What we use, and why we use them.
Figma
For composition, design, and application of copy and artwork into those compositions.
All design materials end up here.
Photoshop or Photopea
General purpose raster image editing. Used for producing raster graphics, and also for sketching if you prefer to sketch digitally.
Clip Studio Paint
When working with line-art-heavy artwork files, they tend to be exported as png, but the working files will likely be .clip, thanks to CSP's wonderful vector brush system.
Zeplin
Handover tool for hooking up developers with everything they need to implement designs accurately. Colors, components, type styles and spacing are all referenced by developers in here. Usually, we don't rely on Zeplin's image relay, preferring to cut webp images (shared in a Docs&Files folder in the corresponding project) using Ezgif for better loading images per image.
Ezgif
When we need to cut webp images, be they static or animated, Ezgif is a really convenient way of doing that. For static images, it has a png-to-webp converter. For animated images (eg assembling individual frames exported from Harmony) it has a webp maker.
Principle
For quick mocks of how micro-animations might work, when visuals are needed beyond words alone, Principle is a really handy way of doing that. Figma artboards can be imported directly into Principle, and animated quickly to visualize how we'd like things to behave.
Getting inspiration
How to source it, and what to do with it.
Know the goal
Before looking at any references, get clear on who this is for. What feels “comfy” to them. What they’re trying to learn, do, or understand. Where the fun is meant to come from, for them. What words and visuals the design must present or elevate. If you can’t yet articulate the intersection of audience, comfort, learning, and fun, you’re not ready to look for inspiration yet.
Explore inspiration
Look for fragments, not finished solutions. Use our sources repository, product screenshots, layouts often used in an industry or parallel industries, even apps or experiences you've personally enjoyed if there's something relatable.
You are not looking for full layouts to copy, or a "style" to mimic. We don't do that. You are looking for spacing patterns, familiar tone or rhythm, and for "material" that works for the target audience already. This can be helpful in understanding what the target user is familiar with, and what stands out in that space as quality, so we have an understanding of how our audience might currently define "great". This is not a place to hide, this is a mood board upon which we will exercise our edutainment superpowers.
Artboard
Pull the fragments you’ve found into a single artboard. This is not a mood board just for aesthetics, it's a thinking surface. Seeing references side-by-side helps you notice common threads, avoid unconsciously mimicking a source, and make more intentional decisions.
Write it out
Before sketching, write a short paragraph describing what the experience should feel like. What the user should understand, do, and feel. What role the design is playing (guide, stage, container, amplifier). Writing clarifies intent and prevents drifting into vague “inspiration mode", or being led by what others are doing.
Sketch it out
Sketch ways to represent the intersection you’re aiming for. These sketches don't need to be pretty. They don't need to be complete. They exist to help you think and move forward, and to secure early feedback from peers and even the partner once they're suitably fleshed out and approved internally. They may also serve as useful references later when refining the work or explaining decisions to others.
Technical checks
Things we always do.
Check the handover
Before handing work over, ensure assets are accessible in Zeplin as expected. Verify that colours, spacing, and type styles are defined clearly. Manually export and supply any images that Zeplin does not handle correctly. Developers should never need to guess or recreate design decisions.
Check the brief at every stage
Sometimes a good idea can become a bad idea, if it loses sight of the goal it’s trying to achieve, and for whom. So checking the goal in each stage helps prevent that from happening, or from a misdirection from carrying on too long through the process.
Artist vs paintbrush
Know, going into a design, whether you’re being the artist or the paintbrush. When you’re the artist, you’re conceiving the solution. When you’re the paintbrush, you’re expressing a prescribed solution. Neither is right or wrong, good or bad. Just know which one you are in this specific design, contributing fully within those parameters.
Pride-check
When the work is done, are you truly proud of the work we’ve done? Truly? If it shipped like this today, which parts would haunt you, or make you think “hm, maybe that part there shouldn’t feature in the team portfolio”, or lower the perceived quality of the whole design or experience? If able, raise these areas as concerns before the work ships. We should be proud of the work we do.
Collaborate with those working one degree from you
If you’re designing a webpage, you’re 1 degree from the developer who builds it, 1 degree from the copywriter, 1 degree from the artists creating the graphics, and 1 degree from the person leading the project. This means you should liaise with those people, ensuring you have everything you need from them, and they have everything they need from you. Be the collaborator you wish everyone else was: be clear and thorough in your communication, prompt and proactive in your responses, and go the extra mile to make things buttery-smooth when they deal with you. Design is on you to be the best it can be, so go get what you need, and go give them what they need, so the finished result can be as great as it can be.
Technical no-gos
Things we never do.
Don’t skip steps
Some of the steps may feel superfluous sometimes, but the work is better when we stick to them. So stick to them.
Don’t ship to partners without peer-review
We’re only human: sometimes a second pair of eyes can be invaluable in spotting things you became blind to due to exposure to the work. Have someone peer-review it, to where they put their name to the deliverable’s quality too. Two sets of eyes committed to the work are better than one.
Don’t assume others know what you’re thinking
Design should feel obvious, but it feels most obvious to the designer. What happens when I click that? What happens when that opens up? Obvious to you, in your mind’s eye, intuiting each user interaction. Not obvious to others, unless it’s either visualized or written up. So at a minimum, visualize it or write it up. Ideally, do both. Leave no space for assumptions.
Don’t miss deadlines
If we have deadlines, do not miss them. That means proactive communication around your work to ensure you have everything you need in good time, managing your schedule to comfortably meet the deadlines even if multiple rounds of revisions show up, and over-communicating about how things are going on your side of things, so that everybody can see movement and not worry about whether or not you dropped the ball. If a deadline is under threat, communicate it as early as possible—as soon as you suspect it may be. That gives the team time to assess what to do about that: let a partner know if there is one, cut scope to make it fit, increase support on the project so there are more hands working on it, or simply resolve to push through and find the time to make it work if the scope nor the budget can shift, and there is no one else who can jump in to support.
Don’t work in chaos
The design process can be messy at times. But a craftsman always leaves his desk in order. Your Figma artboards should be clearly labelled and neatly organized, so that anyone who uses them can easily find what they’re looking for. Photoshop layers should be grouped and named for easy reuse in the future. Any requests you made should have a follow-up scheduled so you don’t forget (either make a to-do for yourself for that, or snooze an email notification about it, whatever works best for you) so nothing slips through the cracks. Stay organized, so you (or worse, others) don’t have to work in chaos.