Clockwise Rebrand

Meaningful work requires time for focus, but actually finding that time can be a real challenge — especially when your week is packed with meetings. That’s where Clockwise, a schedule-obsessed, AI-powered app comes in. They listen to your preferences — like what time you take your kids to school or how long you need for lunch — and use machine-learning to give you a schedule that, well, works.

getclockwise.com

Timeline Kick off — 4/10 Guidelines — 7/1 Launch — 11/1 Scope Pretty much everything except video

Clockwise Rebrand

Meaningful work requires time for focus, but actually finding that time can be a real challenge — especially when your week is packed with meetings. That’s where Clockwise, a schedule-obsessed, AI-powered app comes in. They listen to your preferences — like what time you take your kids to school or how long you need for lunch — and use machine-learning to give you a schedule that, well, works.

getclockwise.com

Timeline Kick off — 4/10 Guidelines — 7/1 Launch — 11/1 Scope Pretty much everything except video

Clockwise Rebrand

Meaningful work requires time for focus, but actually finding that time can be a real challenge — especially when your week is packed with meetings. That’s where Clockwise, a schedule-obsessed, AI-powered app comes in. They listen to your preferences — like what time you take your kids to school or how long you need for lunch — and use machine-learning to give you a schedule that, well, works.

getclockwise.com

Timeline Kick off — 4/10 Guidelines — 7/1 Launch — 11/1 Scope Pretty much everything except video

👀 Read Case Study →
👀 Read Case Study →
👀 Read Case Study →

Clockwise
Fran — VP of Marketing
Charles — Head of Design
Matt — CEO
Gary — CTO

External
Character — agency

Meaningful work requires time for focus, but actually finding that time can be a real challenge — especially when your week is packed with meetings.  That’s where Clockwise, a schedule-obsessed, AI-powered app comes in. They listen to your preferences — like what time you take your kids to school or how long you need for lunch — and use machine-learning to give you a schedule that, well, works.

Context

Problem

Since it launched in 2016, Clockwise evolved significantly as a product and as a company. Originally a chrome extension that augments Google Calendar, it exploded into a full set of features, a standalone app, and a blog with a dedicated following. On the flip side, their brand identity had fractured: too many colors, an illustration system that was reliant on one person, an outdated logo, and positioning that wasn’t telling the full story of what they’re capable of.

Solution

Clockwise partnered with Character, an San Francisco-based design studio, to deliver three core assets: updated positioning, a new verbal identity and a refreshed visual identity. I joined the company a few months before the visual identity kicked off, and was responsible for leading the design process.

Context

Problem

Since it launched in 2016, Clockwise evolved significantly as a product and as a company. Originally a chrome extension that augments Google Calendar, it exploded into a full set of features, a standalone app, and a blog with a dedicated following. On the flip side, their brand identity had fractured: too many colors, an illustration system that was reliant on one person, an outdated logo, and positioning that wasn’t telling the full story of what they’re capable of.

Solution

Clockwise partnered with Character, an San Francisco-based design studio, to deliver three core assets: updated positioning, a new verbal identity and a refreshed visual identity. I joined the company a few months before the visual identity kicked off, and was responsible for leading the design process.

Our timeline was aggressive: finished guidelines by July, launch mid-November, with just 1 brand design lead (me), and the following deliverables:

Scalable identity

Redesign site

Reskin product

Lightweight launch

Scalable identity

Redesign site

Reskin product

Lightweight launch

Scalable identity

Redesign site

Reskin product

Lightweight launch

Along with the Head of Design, we started by creating a strategy document to orient stakeholders on what’s to come. This included: measurements for success, what progress has been made so far, our strategy (including our plan for how we’ll work with Character), risk, launch plan and next steps.

Along with the Head of Design, we started by creating a strategy document to orient stakeholders on what’s to come. This included: measurements for success, what progress has been made so far, our strategy (including our plan for how we’ll work with Character), risk, launch plan and next steps.

Along with the Head of Design, we started by creating a strategy document to orient stakeholders on what’s to come. This included: measurements for success, what progress has been made so far, our strategy (including our plan for how we’ll work with Character), risk, launch plan and next steps.

I then created a user journey map of all product surfaces, a sitemap and visual snapshot of our entire marketing (logged out) site. I used both of these to interview both the Head of Product and CMO to understand their appetite for change and to set expectations given our timeline. We huddle in a Figjam, discussing the context of each surface (say, onboarding) until we were aligned. This was not only directionally helpful for how much to engage on a given surface (say, redesign onboarding but reskin pricing), but also gave stakeholders a sense for the scale of work ahead of us.

I then created a user journey map of all product surfaces, a sitemap and visual snapshot of our entire marketing (logged out) site. I used both of these to interview both the Head of Product and CMO to understand their appetite for change and to set expectations given our timeline. We huddle in a Figjam, discussing the context of each surface (say, onboarding) until we were aligned. This was not only directionally helpful for how much to engage on a given surface (say, redesign onboarding but reskin pricing), but also gave stakeholders a sense for the scale of work ahead of us.

I then created a user journey map of all product surfaces, a sitemap and visual snapshot of our entire marketing (logged out) site. I used both of these to interview both the Head of Product and CMO to understand their appetite for change and to set expectations given our timeline. We huddle in a Figjam, discussing the context of each surface (say, onboarding) until we were aligned. This was not only directionally helpful for how much to engage on a given surface (say, redesign onboarding but reskin pricing), but also gave stakeholders a sense for the scale of work ahead of us.

Additionally, I went on a "listening tour" across the org to ask stakeholders in Sales, CS, Support, and others to understand their design needs. I took notes to understand who I'd work with when the time came.

Additionally, I went on a "listening tour" across the org to ask stakeholders in Sales, CS, Support, and others to understand their design needs. I took notes to understand who I'd work with when the time came.

Additionally, I went on a "listening tour" across the org to ask stakeholders in Sales, CS, Support, and others to understand their design needs. I took notes to understand who I'd work with when the time came.

After stakeholder buy-in on the strategy memo and wrapping up the research phase, I translated everything to an exhaustive Asana board with just over a hundred tasks, including stakeholders across the org, such as Customer Success, Sales, Content Marketing, Support, Product, People Ops and more.

After stakeholder buy-in on the strategy memo and wrapping up the research phase, I translated everything to an exhaustive Asana board with just over a hundred tasks, including stakeholders across the org, such as Customer Success, Sales, Content Marketing, Support, Product, People Ops and more.

After stakeholder buy-in on the strategy memo and wrapping up the research phase, I translated everything to an exhaustive Asana board with just over a hundred tasks, including stakeholders across the org, such as Customer Success, Sales, Content Marketing, Support, Product, People Ops and more.

A week after, we kicked of the visual identity or "VID" with Character. They started with a lightweight competitor audit, and a group exercise to understand the team's expectations.

A week after, we kicked of the visual identity or "VID" with Character. They started with a lightweight competitor audit, and a group exercise to understand the team's expectations.

During the meeting, it became evident that there was a range of opinions within the team. Some wanted this to be more playful, while others serious. I recognized this as a potential obstacle in evaluating the design work, so I quickly facilitated a session to align.

During the meeting, it became evident that there was a range of opinions within the team. Some wanted this to be more playful, while others serious. I recognized this as a potential obstacle in evaluating the design work, so I quickly facilitated a session to align.

During the meeting, it became evident that there was a range of opinions within the team. Some wanted this to be more playful, while others serious. I recognized this as a potential obstacle in evaluating the design work, so I quickly facilitated a session to align.

Round 1

Territories

Character ingested our preferences and came back with the next step in the process: creative territories. These were moodboards mixed with brand story concepts that the visual identity could eventually anchor to.

Concept first

The concept of "synchronicity"stood out as a clear favorite because Clockwise works best at scale — a change to one person’s calendar (say, moving a meeting) has a ripple effect across the entire team. We referred to this concept as “amplified time”, but conceptually it has the same ethos:

Round 1

Territories

Character ingested our preferences and came back with the next step in the process: creative territories. These were moodboards mixed with brand story concepts that the visual identity could eventually anchor to.

Concept first

The concept of "synchronicity"stood out as a clear favorite because Clockwise works best at scale — a change to one person’s calendar (say, moving a meeting) has a ripple effect across the entire team. We referred to this concept as “amplified time”, but conceptually it has the same ethos:

When two things happen at exactly the same time, no matter where they are, they happen together. That’s what Clockwise brings to every workday—connectivity through synchronicity. By perfectly aligning priorities and schedules at the collective level, workplaces transform into communities.

When two things happen at exactly the same time, no matter where they are, they happen together. That’s what Clockwise brings to every workday—connectivity through synchronicity. By perfectly aligning priorities and schedules at the collective level, workplaces transform into communities.

When two things happen at exactly the same time, no matter where they are, they happen together. That’s what Clockwise brings to every workday—connectivity through synchronicity. By perfectly aligning priorities and schedules at the collective level, workplaces transform into communities.

When people hear AI, they often associate it with automation (and that with scary robots), but Clockwise uses AI to assist you, not replace you. This idea of “assistive tech” was pivotal building block in the early days of Clockwise. In fact, Google’s assistant emoji — a green sparkle — was used to represent a Clockwise-enabled meeting. Eventually the sparkle developed into a sort of shorthand for what Clockwise gave you: time to focus. In other words, the “sparkle” became a spark, a leaping off point for the potential to do amazing work.

When people hear AI, they often associate it with automation (and that with scary robots), but Clockwise uses AI to assist you, not replace you. This idea of “assistive tech” was pivotal building block in the early days of Clockwise. In fact, Google’s assistant emoji — a green sparkle — was used to represent a Clockwise-enabled meeting. Eventually the sparkle developed into a sort of shorthand for what Clockwise gave you: time to focus. In other words, the “sparkle” became a spark, a leaping off point for the potential to do amazing work.

When people hear AI, they often associate it with automation (and that with scary robots), but Clockwise uses AI to assist you, not replace you. This idea of “assistive tech” was pivotal building block in the early days of Clockwise. In fact, Google’s assistant emoji — a green sparkle — was used to represent a Clockwise-enabled meeting. Eventually the sparkle developed into a sort of shorthand for what Clockwise gave you: time to focus. In other words, the “sparkle” became a spark, a leaping off point for the potential to do amazing work.

In comparison, the previous Clockwise logo was quite literal. It featured a clock face with hands designed to resemble a checkmark, aiming to convey the idea of productivity. However, this design gave off the vibe of a to-do list app and seemed somewhat generic, as if it could be found just about anywhere.

In comparison, the previous Clockwise logo was quite literal. It featured a clock face with hands designed to resemble a checkmark, aiming to convey the idea of productivity. However, this design gave off the vibe of a to-do list app and seemed somewhat generic, as if it could be found just about anywhere.

In comparison, the previous Clockwise logo was quite literal. It featured a clock face with hands designed to resemble a checkmark, aiming to convey the idea of productivity. However, this design gave off the vibe of a to-do list app and seemed somewhat generic, as if it could be found just about anywhere.

During the early phases of the logo developed, we were informed that Character was getting bought out, and was dealing with staff changes. As a result, our team was juggling multiple responsibilities and projects. While we understood these unique challenges, we felt it was crucial to maintain the depth and diversity of options for our brand. So we made the decision to bring that aspect of the project in-house for a more focused approach.

During the early phases of the logo developed, we were informed that Character was getting bought out, and was dealing with staff changes. As a result, our team was juggling multiple responsibilities and projects. While we understood these unique challenges, we felt it was crucial to maintain the depth and diversity of options for our brand. So we made the decision to bring that aspect of the project in-house for a more focused approach.

During the early phases of the logo developed, we were informed that Character was getting bought out, and was dealing with staff changes. As a result, our team was juggling multiple responsibilities and projects. While we understood these unique challenges, we felt it was crucial to maintain the depth and diversity of options for our brand. So we made the decision to bring that aspect of the project in-house for a more focused approach.

Drawing from the history and equity of the sparkle, while also interested in diverging into new territory, I produced hundreds of logo variations, often working closely with our Head of Design and CMO to fine-tune the concepts.

Drawing from the history and equity of the sparkle, while also interested in diverging into new territory, I produced hundreds of logo variations, often working closely with our Head of Design and CMO to fine-tune the concepts.

Drawing from the history and equity of the sparkle, while also interested in diverging into new territory, I produced hundreds of logo variations, often working closely with our Head of Design and CMO to fine-tune the concepts.

As we refined the shape, we referred to our brand story (synchronicity), and looked at pulling apart the shape into 1 shape, repeated 4 times. The idea that one thing could be amplified across multiple places.

As we refined the shape, we referred to our brand story (synchronicity), and looked at pulling apart the shape into 1 shape, repeated 4 times. The idea that one thing could be amplified across multiple places.

As we refined the shape, we referred to our brand story (synchronicity), and looked at pulling apart the shape into 1 shape, repeated 4 times. The idea that one thing could be amplified across multiple places.

Once we landed on the final lock-up, we worked with the amazingly-talented-and-all-around-rad-human Stina Wahlen to produce an animated lock-up and a few different loading states for product.

Once we landed on the final lock-up, we worked with the amazingly-talented-and-all-around-rad-human Stina Wahlen to produce an animated lock-up and a few different loading states for product.

Once we landed on the final lock-up, we worked with the amazingly-talented-and-all-around-rad-human Stina Wahlen to produce an animated lock-up and a few different loading states for product.

To round out the rest of the identity, we started with color. The current system had been intentionally named with a wonky convention to force the team to update it - but never did. This lead to a system with way too many colors with a lot of overlap.

To round out the rest of the identity, we started with color. The current system had been intentionally named with a wonky convention to force the team to update it - but never did. This lead to a system with way too many colors with a lot of overlap.

To round out the rest of the identity, we started with color. The current system had been intentionally named with a wonky convention to force the team to update it - but never did. This lead to a system with way too many colors with a lot of overlap.

Nature is often associated with calm and focus, which is a big part of what Clockwise delivers. Adding to it a dark green and a vibrant lime for the occasional pop completed the mix.

Nature is often associated with calm and focus, which is a big part of what Clockwise delivers. Adding to it a dark green and a vibrant lime for the occasional pop completed the mix.

Nature is often associated with calm and focus, which is a big part of what Clockwise delivers. Adding to it a dark green and a vibrant lime for the occasional pop completed the mix.

The brand colors informed the product design color system which maintained the same vibrancy — while meeting accessibility and usability guidelines. Additionally, a new color naming system was used to allow for easier additions (for example, dark mode in the future).

The brand colors informed the product design color system which maintained the same vibrancy — while meeting accessibility and usability guidelines. Additionally, a new color naming system was used to allow for easier additions (for example, dark mode in the future).

The brand colors informed the product design color system which maintained the same vibrancy — while meeting accessibility and usability guidelines. Additionally, a new color naming system was used to allow for easier additions (for example, dark mode in the future).

Photography played a new role for Clockwise as the previous identity was so reliant on an illustrator. Though seldom used, the use of warm, authentic images of people focusing broke up the brand from feeling too digital.

Photography played a new role for Clockwise as the previous identity was so reliant on an illustrator. Though seldom used, the use of warm, authentic images of people focusing broke up the brand from feeling too digital.

Photography played a new role for Clockwise as the previous identity was so reliant on an illustrator. Though seldom used, the use of warm, authentic images of people focusing broke up the brand from feeling too digital.

Clockwise leaned on Emojis to give the brand personality, using it across marketing and product. While fun, it’s a device that is used almost everywhere — particularly for startups. Additionally, the execution of emojis can be ultra complex (soup) or wildly simple (thumbs up), which makes consistency impossible.

Clockwise leaned on Emojis to give the brand personality, using it across marketing and product. While fun, it’s a device that is used almost everywhere — particularly for startups. Additionally, the execution of emojis can be ultra complex (soup) or wildly simple (thumbs up), which makes consistency impossible.

Clockwise leaned on Emojis to give the brand personality, using it across marketing and product. While fun, it’s a device that is used almost everywhere — particularly for startups. Additionally, the execution of emojis can be ultra complex (soup) or wildly simple (thumbs up), which makes consistency impossible.

After an exhaustive study of off-the-shelf icon systems, both free and paid, Phosphor was chosen for it’s breadth (4,000 icons), up-to-date changelog and, best of all, a Figma plugin. This (left), along with Material icons (right), rounded out the iconography.

After an exhaustive study of off-the-shelf icon systems, both free and paid, Phosphor was chosen for it’s breadth (4,000 icons), up-to-date changelog and, best of all, a Figma plugin. This (left), along with Material icons (right), rounded out the iconography.

After an exhaustive study of off-the-shelf icon systems, both free and paid, Phosphor was chosen for it’s breadth (4,000 icons), up-to-date changelog and, best of all, a Figma plugin. This (left), along with Material icons (right), rounded out the iconography.

To complete the system, the humble calendar event card was abstracted in order to create a reusable framework that flexs depending on the content and context.

To complete the system, the humble calendar event card was abstracted in order to create a reusable framework that flexs depending on the content and context.

To complete the system, the humble calendar event card was abstracted in order to create a reusable framework that flexs depending on the content and context.