Procrastinating the design of a new website (Miro & Adobe XD)

The Stats

Feelings

• Before: Good
• During: Bad
• After: -

Time

• Expected: a week
• Actual: two weeks and counting…

Imposter Syndrome Check: Positive

The Background

It’s something we all gotta do, but so often can’t stand doing it.

When you get a new idea, or you’re starting a new project, you just want to get your teeth into it. You want to get your ideas into code as soon as humanly possible and find out a) are your ideas realistic and b) does your skill level match your imagination. You could, of course, dive head first into it. And that’s fine for a small tester project — some kind of Frankenstein-style HelloWorldToDoListFlashcardWeather app. But if you want to avoid inevitable, project-halting obstacles and, more importantly, if you want to make something impactful that will last, you’ve got to do it properly from the get-go.

My next big build is a directory website (think Yellow Pages online) for a community I’m a part of. If I were building it alone, honestly, I’d probably skip the prior planning phase. Here I am talking about how important it is to plan thoroughly, when in reality I’m just as lazy and haphazard as anyone else. However, there are multiple stakeholders in this website, so avoid the planning I can not.

I’m using Miro to plot out the app architecture and Adobe XD to do UI designs. I’m a fan of them both: Miro because of its interactive and versatile nature — in person I like using whiteboards for this purpose, but remotely Miro is the next best thing — and Adobe XD has all the image and component editing tools I need (seriously, why does it get such a bad rep?).

The Feeling

You know in school when you had an assignment — a relatively big one — and you kept telling yourself you’d do it later and that you were waiting for ideas, but then neither later nor ideas ever really came, and you ended up doing it in a rushed frenzy the weekend before it was due?

I always thought I’d grow out of that at some point. I still think I’ll grow out of that at some point, but some point hasn’t arrived yet. I guess the overarching feeling is one of immaturity and disappointment that I struggle to motivate myself for something that’s relatively simple: it doesn’t take months of training to arrange a flow chart while it does take months to be able to code a website. So why do I put off the easy one but not the other, more difficult task?

Has some point even arrived for most other people? Doubtful. We know it’s insane and unreasonable to work this way. And yet…

When I was in high school, dad stuck this comic on my door. I’ve since learned that he’s a procrastinating hypocrite, too.

The Solution

Oh boy, if I had a solution to all my procrastination struggles then I’d be living pretty right now.

I guess the solution is just to suck it up and get on with it?

Miro and XD do make it much, much easier, to their credit. If you haven’t heard of it, it’s essentially a virtual digital whiteboard (as previously mentioned). Except imagine a whiteboard with a bazillion other functions, too. I use it to show how data will flow, separating views/components/elements (like a well-behaved React programmer), how the user will progress through the app, and to brainstorm with my co-creators on finer details. Miro reckons that it can be used for wireframing and a whole host of other uses, but really whiteboard-style operations are what it’s best at.

If you do want to do a tasty bit of wireframing, I recommend XD. Now, that’s (apparently) pretty controversial. Much like in the world of coding, there are holy wars in the world of UX design, too. I’ve run into many UXers who swear on their pet turtle’s lives that Figma and Sketch are infinitely better, and that Adobe XD is the fourth horseman of the apocalypse. I honestly don’t see what they get so worked up about. But, then, I also don’t get upset about React vs Angular, spaces vs tabs, or functional vs object-oriented…

Fact is, if you wanna break into some simple UX designs pretty quickly, Adobe XD has everything you need. I got into it about a year back with this youtube tutorial. Since then, I’ve made designs for clients, bosses, family, and fellow students. When dealing with anyone that’s not a coder, UX design skills are vital. They don’t speak code; that’s all they know.

But even more than that, I’ve found it to be vital for my own sanity. The images in your head will change, I promise you. You will forget/omit/overlook certain on-screen elements, I promise you. Get it all on a page, and sleep easier at night.

Top: Preliminary homepage UI design for Connectory, made in XD / Bottom: How the whole damn thing works, mapped out on a Miro board.

I guess writing is a partial solution. The very act of writing this article has been a meditative exercise that’s help me figure out where my priorities lie and how best to act on them. But, the very act of writing this article is an exercise in procrastination. Better get back to it…