Brody MacLean

#design

2021 Redesign: Work in Progress

If you are not embarrassed by the first version of your product, you've launched too late.
— Reid Hoffman

I pushed the WIP version of Brody.com v10 last Friday with the focus on having the basics migrated across and built out plus the slight pressure of building in public to urge me to progress things along.

Below are the outstanding tasks I'll be chipping away at over the next month or 2.*

The Gap by Ira Glass

This video is something I revisit over and over and throught I'd drop it into the feed as I use my site more for a space to post things I'm interested in.

2021 Redesign: Objectives

Another year, another redesign of Brody.com to give me the chance to iterate upon the design, improve my front-end skillz and try out a shiny new tool or two.

I thought I'd jot down the objectives & principles for the 2021 redesign to use as the guiding stars when designing and developing.

My space of the internet

My aim is to create a space to post videos, quotes, links, images and also longer blog posts, which I never seem to get around to finishing 😬. I'm thinking something like a Tumblog, tagged to filter down by type & topic.

Alongside the posts, I'd like to create a timeline library of the TV shows, movies, courses, books & video games I complete with a basic rating system similarly filterable by type to see just the latest movies I've watched, for example. Currently, I use the Letterboxd API for this exact thing on my about page but with the mixed content, I think it might be cleaner to do that manually for this section.

Ease to post

The friction of jumping onto my laptop, launching iTerm, changing directory, opening the directory in VS Code, firing up Gridsome, creating a new file, futzing with the front matter, previewing, pushing code to Github — you get the gist. It's a whole effort to post and now that I want to post more short-form content, the current workflow to post is too cumbersome.

Uber Design: 77 Things

Uber Design: 77 Things
77 Things About Uber Design

Alongside the 2018 rebrand, Uber published "77 Things", a book written by Uber's Head of Design, Michael Gough, with 77 design principles for those who design at Uber.

The design of the book was inspired directly by its content.


77 Things

01. Great design happens in the open.

We say you have “24 hours to post", because when your work is in the open it invites collaboration, and everyone benefits. Consider it design by osmosis. Your work gets better when everyone can share their perspective and learn yours. Design can and should reach far beyond the design studio to every part of the company, from the C-suite to people deep in the field.

02. Really great design happens out in the world.

Being open and collaborative means including our customers early and often. Design starts with real-world inspiration. Learn what others think—then adjust, refine, and apply what you’ve learned.

Meeting Warm Up Games

Meeting Warm Up Games

Recently, I've been running a game of Pictionary, before our designer catch-up meetings, to break the ice and get the creative juices flowing.

You only need a few things to run one yourself, with both local and remote team members alike.

Ingredients

Nice to have

  • iPad with Apple Pencil & corresponding Whiteboard app

Recipe

  1. Pick team members of 2 at random.
  2. Share & display the whiteboard using the screen sharing/meeting app.
  3. Get team member ready, with canvas centered.
  4. Hit Generate on the whiteboard generator & privately show drawer the word/phrase.
  5. Start the 1-minute timer.
  6. Record the time remaining, when guesser correctly guesses. This is their score.
  7. Repeat for each team of 2.
  8. Highest score wins. 🏆

Enjoy! 👍

Warm-up Sketch

Warm-up Sketch

Full Stack Anxiety

I stumbled across this talk & it spoke to me and the conflicting priorities rolling round in my head.

Joel perfectly defines an anxiety common to Product Designers, but also outlines a simple way to prioritize what to learn and work on out of all the opportunities.

I’m a designer, so I should probably learn responsive patterns, methods for remote user testing, Sketch, motion graphics, Framer, keep up to date with current design trends, and a million other things.

I’m a developer, so I should probably learn SVG animations, Node or React or Ember, BEM principles, new web inspector features, Vim or at least better Sublime workflows, and a million other things.

I’m also a human being, so I can’t possibly learn all these things. I have to choose.

So… what do I choose? Full Stack Anxiety is that creeping doubt, when you just don’t know what the right choice is. Do I grow as a designer or do I grow as a developer? As a manager, a teacher, a business-person?

1. Ask yourself

“What kind of work do I want to do in the future?” And, when approaching a new skill ask, “What am I becoming by learning this?” If that skill doesn’t help you become the person you want to be, then it may not be worth your attention.

Cloudbees Design Principles

As part of my job at Cloudbees, I have been working on creating our Design System. I began with a foundational element, the design principles, which defines the design direction going forward and helps convey our core beliefs to stakeholders.

“Design principles are the guiding light for any software application. They define and communicate the key characteristics of the product to a wide variety of stakeholders including clients, colleagues, and team members. Design principles articulate the fundamental goals that all decisions can be measured against and thereby keep the pieces of a project moving toward an integrated whole.”
— Luke Wroblewski, Product Director at Google

What are good design principles?

A good set of design principles, on the other hand, does the following:

  1. Helps resolve practical and real-world questions around specific design decisions.
  2. Applies to an entire class of design decisions, both things we can think of today, as well as questions that will pop up in the future.
  3. Imparts a human-oriented sense of “why?” that is easy for everybody — including non-designers — to understand.
  4. Has a point of view and a sense of prioritization that a rational person could disagree with.
  5. Is generally paired with illustrative examples that show how the principle applies to specific decisions.”

— Julie Zhuo, VP of Design at Facebook

The $300 Million Button

The $300 Million Button

source: The $300 Million Button

The form, intended to make shopping easier, turned out to only help a small percentage of the customers who encountered it. (Even many of those customers weren’t helped, since it took just as much effort to update any incorrect information, such as changed addresses or new credit cards.) Instead, the form just prevented sales — a lot of sales.

Sometimes all you need is a little text change to save your business a lot of money. Jared Spool once helped a "major ecommerce site" (very possibly Best Buy) with their checkout process. The company ended up changing the text of a submit button and making the company an additional $300 million in one year.

Similarly, in 2008, 37signals changed how they labelled charges on credit card statements and reduced chargebacks by 30%.

All tags →