Background

In April 2020, I joined Macro as their first employee. As the founding designer at a B2B SaaS startup, I generated design solutions that are practical, scalable, and intentional.

In short, Macro was a tool for people to design and deploy custom operational processes without writing code. With digital tools becoming more and more sophisticated, we believed employees should now be able to create custom software to solve their problems.

In early 2010s, tooling for designers were underrepresented. We didn't have a Figma or Sketch to visualize our ideas. In early 2020s, this is the case for Operations teams. Ops teams need a way to build and run their operational processes but there currently isn't a single tool that enable teams to do so in a simple, personal, and comprehensive way.

Macro reimagines checklists as the means to create, assign, track, and automate processes involving people and software. I was responsible for designing the foundation of Macro.

Logo and Brand

Designing the Macro logo was something I was super excited about. I went through a number of iterations to explore different concepts while synthesizing the co-founder's vision. I consider logos to be something deeply personal to founders, so I started my process by learning what Macro meant to them. Their story and the thought they had put into the company was referred throughout my process. Each column below reflects an idea and each iteration informed the next design.


As Paul Rand once said, “The principal role of a logo is to identify, and simplicity is its means… Its effectiveness depends on distinctiveness, visibility, adaptability, memorability, universality, and timelessness.” This belief was stored in the back of my mind to assess whether the design has reached a certain threshold of quality.

Concept

The logo stands for what Macro—the company, product and team—aspires to become, not what it is today. The aspiration was to become an accessible pro tool that offers a more humane way for people to work with technology. In essence, we wanted people to focus on work that requires empathy.

With respect to this ideology, I believed the logo should look and feel modern, robust, and familiar. I believed these were qualities that reflected what an "accessible pro tool" would have. At last Avante Garde was used for the logotype, which is also used for the corporate logo of Adidas and is one of the main typefaces in Sony’s corporate marketing programs. The modernist typeface that is already used in various places helped convey a sense of boldness, progression, and profession.


The term macro is a programming concept that is like an algorithm or a set of actions that people can use or run multiple times. A macro helps automate repeating tasks by recording or storing input sequences like mouse strokes or keyboard presses. Once this input is stored, it makes up a macro which is open to any possible changes.

I intended the 'O' to reflect this concept while making it the visual element of recognition that gives the logotype a unique characteristic. The 'O' is also a parenthesis.

Design System

As rough product concepts began to take shape, it was vital for Macro to implement a design system that helped the team design and build features quickly. This was for my own sanity as the sole designer, but also to enable the engineering team to efficiently ship features while refining the UX/UI as we learn more about the product.

Challenge

As an early-stage B2B software, Macro was committed to designing and building the product in a scalable and flexible way. This meant that the components had to be reusable in various screens to reduce engineering effort while saving space for future features. As the one designing this system, I always considered these two points while foreseeing how the product will evolve over time.

Foundation

I meticulously handpicked the color palette according to my own taste. Design is not art, but it’s also not science. I do my best to preserve my craft in opportunities like these. The main considerations I made when choosing each hue was contrast for accessibility purposes, how they fit inside different components, and what they will convey within the product.

Heebo was the initial typeface when I first designed the UI, but after implementation, I found the typeface to be difficult to read in font-size: 12; font-weight: 500. This lead me to convince the team to switch the typeface to Inter, which was designed to be legible and readable in font-size: 11. With Heebo being a more condensed typeface, the product felt strict and rigid while Inter’s width and roundness brought a more gentle feel to the interface. Its variety in font-weight helped me create better contrast and hierarchy within the design system.

Iconography

I wish I had a cool visual concept for the icons in Macro v1. My only goal at the time was to design and maintain an icon system that look and feel like a single family. I intended the icons to blend in with the UI components to present a cohesive interface. This was done by designing all the icons in outline form, maintaining the same thickness, and having a border-radius that matched the components' style. First time designing an icon family - I like to do and learn.

UI Components

Below are some of the components I designed to shape the product.


Product Design

There are tools out there that help you automate workflows (e.g. Zapier), but not all work can be fully automated. Most work still requires human involvement, yet companies today don’t have a solution for work that feel mechanical and repetitive, but can’t be automated because they require human involvement. Macro believes this solution take the form of a checklist, as checklists have been traditionally used to document and go through repeatable tasks.

Challenge

The product development process began with an iterative cycle of designing and prototyping different product concepts with the CEO and the engineer. As we continued to mock up our ideas and understand how to deliver value, we began to converge ideas and build the product by following the design system I had established.

The interesting thing about Macro was that it aimed to serve a horizontal market with different pieces working together to make up an entire system. Each product intertwined with one another, thus needed to be stitched together to become a tool that supports a wide range of use cases.

Checklist editing experience

The opinion with Macro was that people should build checklists as a way to represent their workflow. Using this checklist template, users can distribute and run repetitive workflows to reduce human error. A Macro checklist consists of a variety of task types (e.g. Gmail, forms, file upload) that users can configure to bring commonly used apps and tasks into a single checklist that employees can execute.

It was key for us to design an Editor that enabled users to easily represent their workflows while exposing customization features to convey the power of a Macro checklist. I studied and borrowed from various editors such as Notion, Coda, Zapier, and Typeform to deliver what I believed to be the most intuitive user experience.


After receiving user feedback for the Editor, I began to speculate the assumptions we made with the two-pane layout. This was informed by the fact that many users missed or misunderstood the automation and variables feature (two prominent features in Macro) and also wished to bundle a set of tasks based on its stage in the process. This lead me to believe that users should edit their checklists in a single-pane document since the existing paradigm was not effectively promoting what makes a Macro checklist powerful. I proposed a single-pane Editor that addressed these problems, but was not built due to various factors. I'm happy to walk through the proposal over a call. 😎

Designing the Inbox

The Inbox was one of the biggest design challenges during my time at Macro. This was because Macro supported two types of task assignments: a single task and a checklist run (or a distributed checklist). The underlying tension was the difference in user experience for a manager vs. a member. A member could be assigned a set of tasks inside a checklist, but a manager or a team lead might be responsible for completing the checklist itself.

With these constraints, it was necessary for the UI to clearly communicate this difference while allowing users to easily view the work they are responsible for. The Inbox is a place where members come to see what they need to worry about, so it had to be designed in a way that required minimum thinking for members to make sense of their work.


The solution here was ultimately to bundle all the tasks inside its respected checklist run and only show members the tasks they are responsible for. We created a section at the top of the Inbox to show single tasks that are not part of a checklist template. For these independent tasks, users can view and complete them without having to leave their Inbox.

Landing Page

After spending one year to design and build the product, we successfully launched Macro in March 2021 for public beta. I designed the landing page with the Macro brand in mind, and built the entire site on Webflow.

Design Direction

Below is the moodboard I created when I had just started working at Macro. This was to establish a design direction that aligned with how I wanted Macro to be portrayed to the public. Some of the key principles were to be liberating, light, and quiet, while seeking opportunities to inject delight.

Outcome

We received #1 product of the day on Product Hunt with ~5000 unique visits to the landing page, which lead to ~900 sign ups. Based on the conversations we had with early adopters, their appreciation for the design of the website and the UI was the main reason they were motivated to sign up and try out the product. 😁

Website

usemacro.com