Pique

Product Design, Branding
Timeline:
Sept. 2019 - Present

Pique is a software platform that will redefine the way graphic designers collaborate with co-workers and clients.

WorkAboutContact
WorkAboutContact
Pique
pique
Pique logo in white

Collaboration

Design together, even when you're apart

Pique is the first graphic design software built from the ground up for collaboration.

  • Live design
  • Built-in chat
  • Persistent comments

Organization

Keep everyone on the same page

Pique’s organizational features ensure you’ll never spend another minute searching for that file from last month.

  • Smart libraries
  • Live items
  • File management

Inspiration

Boards for human beings

Pique's mood boards go above and beyonds the Pique’s mood boards go above and beyond the capabilities of current tools. Find inspiration, experiment, and present ideas - all in one place.

  • Freeform layout
  • Multimedia support
  • Connections

Creation

Work how you want to

Pique is the first graphic design software built form the ground up for collaboration.

  • Platform agnostic
  • Vector and raster support
  • Plugins and integrations

Want to know more about Pique?

For legal reasons, Pique isn't ready to be shown publicly yet. If you're a potential employer (or friend), hit me up and I'll be happy to share the link with you.

Warning - Process

The content past this banner is process-related. If you're not a potential employer or design nerd, you might find this stuff dry. Proceed with caution. Click below if you wanna skip to the results.

Project Overview

The Goal

Long story short - to help graphic designers collborate better with clients and coworkers.

The Process

This project began with a couple months of pure research - interviewing designers, conducting product landscape audits, and finding the opportunities for innovation. This was followed by a great deal of ideation and user validation. Next, I built a design system, created prototypes, and designed a brand.

The Result

Pique currently exists as an interactive prototype in mobile, web, and plugin form. A second iteration, based on user feedback, is under development now.

Talking to designers

I interviewed a bunch of people who work remotely to figure out what issues they face. I was primarily interested in what barriers they face in communicating with clients and coworkers.

The key quote

I gained a lot of great insights from talking to these people, but one stood out to me in particular, and served as the launching off point for the project:

"If everyone was in the same room, you could get a day's worth of remote work done in five minutes"

- Dan S.

What makes remote design so inefficient?

I distilled all my findings down to three key issues:

Lost In Translation

It’s very difficult to communicate visual and formal ideas through an email paragraph. Designers and clients need the ability to communicate easily in a visual way. Additionally, clients often don’t have the design literacy to communicate the great ideas they have in their head.

Response Time

We’ve all found ourself playing email tag at some point. It’s just part of the game - but it doesn’t have to be. Instant messaging and video calls rectify this issue somewhat, but nothing beats face-to-face response time.

File Management

Anyone who’s had a peek at a designer’s work folder will understand. Even the most zenlike organizers will find themselves overrun with versions and variations. Constant exporting of files for review only compounds this issue.

Breakthrough: "The Peek"

That moment when you ask someone to come over and take a quick peek at what you're working on. This is a core aspect of what make real-life collaboration so efficient. This is sorely missing from remote collaboration.

Create a system that enables designers to collaborate with co-workers and clients like they're together in real life.

The opportunity:

Developing Personas

I made a couple personas to help guide my design decisions. Since this system isn't just for designers, I needed to take into account the people they'd be working with as well.

Envisioning a new experience

With my issues and personas defined, I visualized the current experience, and how it could be improved.

"What If's"

With a broad vision in mind, I began thinking of features that could alleviate the problems I had discovered. I started off broad before refining the details.

Digging deeper

Before working out the details of these ideas, I needed a rock-solid understanding of the graphic design process.

Planning the build

Sketching out a sitemap before jumping onto the computer

Wireframing

Sketching and building quick wireframes in Figma

Testing

Testing the first interactive prototype with real graphic designers

Atomic Design

Once I had a solid idea of what the application would consist of, I began building a design system. Basing my system on Brad Frost's Atomic Design framework helped me keep things consistent and iterate rapidly.

Brand attributes

Pique had to be more than just a design system - I wanted it to be a true brand.

Product Attributes

Scalable
Visual
Efficient

Brand Attributes

Sociable
Futuristic
Hard-working

Brand Values

Collaboration
Productivity
Creativity

Geometric system

To ensure Pique was visually cohesive, I create a geometric system around which the logo and other visual assets are based.

Type

Just like the brand itself, Pique's type is friendly and fun but not afraid to roll up its sleeves. All-Round Gothic was chosen for headings due to its similarity to the bespoke logo. Poppins fills in for the rest, adding a lot of versatility.

All-Round Gothic

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

a b c d e f g h i j k l m n o p q r s t u v w x y z

1 2 3 4 5 6 7 8 9 0 ! @ # $ % ^ & * ( ) + =

Poppins

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

a b c d e f g h i j k l m n o p q r s t u v w x y z

1 2 3 4 5 6 7 8 9 0 ! @ # $ % ^ & * ( ) + =

Color

Pique's palette represents passion through its warmth, sociability through its vibrance, and flexibility through its breadth.

Iris

#4B40E6

Draplorange

#FE6A3C

Go Green

#19A964

Light Coral

#FC8084

Sun Yellow

#FFB20E

Sky blue

#03A9F4

Imagery

Pique's imagery is vibrant and eclectic in style, meant to hint at the limitless creative opportunities it represents.

work how you want to

Pique logo in white

bring it all, together

Pique logo in white