Product design

Polarr

reinforcing creativity

Polarr is a 'smart' creative photography startup exploring the edge of expression for OEMs and passionate photographers.

Branding/Identity Experience Product UX Design

Specs

IN A NUTSHELL

Context

Experience Designer working cross-functionally with product, marketing and enterprise to connect brand promise with brand perception. | Polarr | Spring 2019 - Spring 2020

Role

Reporting directly to the CEO/CTO, I tackled Polarr's branding refresh, conducted exploratory/comparitive research and prototyping for future products, re-invograted marketing strategy, ux and presentation, and designed new visual modalities consistent with the brand for their newest product 'Aura'.

Tools

Photoshop, Illustrator, AfterEffects, Figma, Notion, & Webflow

Branding & Product

Refreshed an over-arching brand identity and experience to cover the various creative dimensions, personalities and products of Polarr. Additionally, led adoption of the new system in crafting 'Aura', its logo, GTM strategy, and designed the marketplace MVP portion of the first iteration.

Marketing

I designed/conducted quant./qual. research on Polarr's user base, conducted A/B graphic testing on app. store listings, re-designed social channels, and concepted campaigns.

Enterprise

I led market/ux research for a prospective product, prototyped new website visions, and created an illustration schema for AI modules.

Overview

Branding

Challenge

Polarr is an ever-evolving spirit in the creative photography industry. It was daunting and energizing to create a visual framework sensitive to growth while still being recognizable and faithful to the company's values. The greatest challenge, due to startup nature, was developing/refining each parcel of the brand in tandem with the day-to-day design needs.

Approach

Five years after first exploring Polarr's early-stage branding/identity, I picked up where previous iterations left off: a logo, an inconsistent primary hue, and a brutalist font (Nimbus) that did not perform well internationally. We first conducted a comprehensive demographic and sentiment user study. We then held a design workshop to flesh out a new foundational vision for evolving the brand to align with our developed mission and community devotion. Along the way, we defined our purpose, vision, values, promise, voice, and personality. We soon translated these into color, typography, and grids. After this, I fleshed out the rest of the brand: logos, logotype, pattern, design guides, semantics, components, etc.

Business objective(s)

Ensure that brand promise = brand perception.

Create an entire brand system beyond logo and type.

Establish brand consistency across products and platforms.

Impact

With renewed vigor and a focus on branding for growth, we re-evaluated each user engagement channel. Some platforms were sunset, sites decommissioned, social accounts redesigned, and products given complete and visually consistent facelifts. Through the process, I also created new protocols for cross-disciplinary and remote collaboration. Most notably, we were better prepared to design a new portfolio product (Aura) under the umbrella brand.

Color Palette

Neons & Pastels

About

The first visual identity we tackled was color, a favorite feature among users. We knew we needed a full rainbow of hues based on current product needs in 24fps and PPE. We first defined our primary aqua neon. I then used the CIE L*a*b* colorspace to calibrate a full dynamic range. After this, I tuned each hue to ensure visual distinction and accessibility. Finally, I created shades/tints and color harmonies, cheekily pairing neons with pastels.

Usage

Sea sparkle is Polarr's primary color. Color, is used sparingly to differentiate content and provide info hierarchy (particularly CTAs). Peach macaron functions as a primary complement while Ruby red serves as the error hue. The full catalog of color is used depending on design needs particular to context (light mode/dark mode/ornamental).

Accessibility

Neons were designed to meet WCAG standards (AAA). In addition, we created primary color variants for aqua and orange in light mode.

Look & Feel

Cosmopolitan, Diverse, & Vibrant

sea sparkle

peach macaron

lime popsicle

violet crown

golden lemonade

ruby red

strawberry moon

elvis blue

fuchsia bouquet

Neon & Pastel Complementary Pairings

Handcraft

Logotype

Design Logic

From the initial wordmark the 'p', 'o', 'l', 'a', and 'r' forms were defined with the simple logic of restricting curvature to circle partitions and one straight line. After defining the star grid, I expanded the design logic to accommodate the rest of the alphabet and numerals. Using the grid, I first formed as much of a letter as possible from arcs cut on the grid, after this, I could slide partitions and articulate the shape with linearity. With this rule-based system, I extrapolated the Chinese wordmark as well.

Usage

The logotype must be kerned optically and used solely for product names/wordmarks (including beta versions) and in some cases ad taglines.

Look & Feel

Geometric, Minimal, & Quirky

Generators

Pattern

About

Carrying the circular logic through, I prototyped pattern generators to explore the use of color, stroke, and fill to create dynamic articulations. Marketing needed a quick turnaround on simple yet attractive assets, so I coded a fast and easy tool that would always be brand consistent.

Look & Feel

Responsive & Bold

Live Generator Prototypes

Dark mode: Randomized Neon

Light mode: Stroked Neon

Polar mode: Black & White

Light mode: Sparse Neon

Personality

Typography

About

Through user research, we found there was a stark dissonance between brand perception and intention. Nimbus, a brutalist san-serif, was being used liberally, creating a cold and rigid effect. Thus, we strove to imbue charm through a floral display serif, friendly sans-serif, and accessible fine-print sans-serif.

Families

GT Super by Grilli Type

Gilroy by Randomir Tinkov

Forma by Nebiolo and revivers DJR/Roger Black

Look & Feel

Sincere & Fresh

Overview

Product: Aura

Challenge

Developing Aura was a constant moving target. Although we knew filters were our focus based on emergent user behavior (posting/selling filter creations on social), it was unclear what kind of application we were building. From a standalone marketplace to a social community we conducted branding sprints and research for each pivot of value propositions.

Approach

Through each iteration of brand and product experience, I sought to first understand what our creators needed to feel included, motivated, and inspired in Aura. I then ventured to maximize the expression of key design elements that excited them the most, such as real-time filter preview, QR code export, and their profile pages.

Goal(s)

Make our 'filter' as recognizable as an image.

Respect filter creators' desire to convey emotion.

Design a effervescent brand to support the community.

Impact

After ~6 months of brand-focused iteration for Aura, I successfully found a product with over 80% positive reaction, created a new iconic form for a 'filter', and redesigned filter exports/QR codes for aesthetic recognizability.

Branding

Aura Identity

About

Aura is a lifestyle brand yet a creative application crossing the digital/physical boundary blending into creators' everyday lives. It is an atmosphere of visual fashion that expresses their unique vibes and visions. Aura is for the visually hungry, emotive, youthful, and growing digital native with its celebration of authenticity.

Process

FFor naming, I iteratively launched three surveys on our existing user base (~10,000 respondents) to whittle down the sentiment and demographics of the future community, 'Aura' won by a landslide.

Tagline

Flourish

Slogan

Be Unreal

Rapid Prototyping

MVP Discovery

About

Tasked with translating our first wireframes of the 'Aura' filter marketplace. Using Figma and Illustrator, in one week, I set the stage for branding-driven design translation; including the distinction in browsing AI curated lists vs. community, filter preview, export, and structure.

Value Propositions

Access to a universe of filters.

Camaraderie through like-minded communities.

Ease to grow in crafting aesthetics.

Special Note

This prototype is pared down, due to iteration and product pivot from a standalone app. to its integration into Polarr's existing product 24fps.

Form Finding

Designing the 'Filter'

While designing the marketplace MVP, it became very clear to me that a 'filter' needed to appear distinctly different from a photo or creator. In designing the filter, being the total focus of the application and love of our prospective community, I wanted to create a logical and iconic shape. Using the conventional forms for a profile and photo, it was a simple 'form follows function' design deduction. What emerged is a lemon-drop/eye. The form works well articulated (flower shape) with multiple filters (as if in a 'pack), connotes the visual, and led ultimately to the logo, increasing recognizability and reinforcing the purpose of 'Aura'.

Photo

Profile

Filter

Aura Logo

Narrative Logo Design

After prototyping the marketplace MVP, we finally found a name adored by 'Aura' future users. Because the form was so striking, we immediately knew the 'filter' lemon-drop form would be a great starting place for creating the logo. After multiple explorations and critiques of permuting, coloring, and twisting the shape, I extrapolated a narrative and key design logic for the launch logo that represented the spirit of 'Aura'. We hoped it would reinforce the agnostic feature of a filter, build rapport and recognizability, and inspire the future growth and global perspective of crowd-sourced/inspired aesthetics.

Aura Logo R&D

Logo Design

About

After numerous expansive rounds of iteration, including those for earlier tentative names, the re-mixed filter logo concept emerged. Though there were many striking variations of filter-focused logos, this dual-sided re-mixed version, ultimately, was perfected for the Beta release. We gravitated toward the optical movement this form evoked through articulation and gradation of hue. This version of the logo we felt portrayed connotations in name and spirit.

Design Process

Using the filter-form as a springboard I extrapolated as many different concepts as possible. Holding branding critiques once a week, I first identified the concept, then perfected the side 'cuts', gradation, color, and finally wordmark placement.

Look & Feel

Emanating, Urban, & Adventurous

Aura Logo R&D

Visual Research

About

Once we saw how impactful the filter lemon-drop form was in the MVP UI, I was tasked with developing a logo based on it. First I gathered visual research (a few shown here), to explore the connotations and denotations the form might have when a creator encounters it. The best logos are often simple yet layered with complexity, the more you look the more you see. In this way, I was able to extrapolate how I could use the filter to inspire different perspectives.

Connotation(s)

Auras, vibes, cosmos, framing, vision, lenses & filters

Takeaways

In considering the name 'Aura', filter form, the connotation of "polar", and visual research (what others might think when seeing or hearing about the product), I immediately knew I wanted to explore movement to encourage the feeling of something static as emanating along with concepts of framing, filtering and or mixing.

Aura Logo R&D

Design Research

About

From internal surveys, I synthesized the look/feel the company wanted to achieve with 'Aura' aesthetically (radical yet pragmatic). I then set out to find logos that felt apropos to our genre as well as exuding the 'radically pragmatic' sensibility. After visiting the MOCO Banksy exhibit in Amsterdam, how I should treat the filter form in logo generation became clear. I wanted to situate the logo smack in the middle of homage to photography and contemporary logo form.

Takeaways

The most iconic logos of quintessential style brands expressed more passion and complexity than minimalism at the start. With this insight in mind, we wanted to attract the 'rebel' adopter, and as the community grew, calibrate the logo to firmly represent the brand and evolving community sentiment.

Aura Logo R&D

Early Form Studies

Approach

After multiple rounds of exploration with the filter form, I and the team (through critique sessions) had finally settled on the slide variation as being the most provocative. From here, I created over 500 iterations to explore just how we wanted to articulate the basic concept, how many cuts? How would the sides be partitioned? Are they even in their negative space or cut by the golden ratio? I also took this opportunity to explore wordmark placement as well as basic color concepts.

Takeaways

Although we were attracted to the first and last style of sliding filters, we ultimately chose the dual-sided sliced variation for its ability to inspire a turning kind of optical illusion with the eye. From this point, I moved on to experiment and perfect the spacing, strokes, and color.

The tilted symmetry of the logo worked better with a stacked variation of the wordmark.

Aura Logo R&D

Color Variant Studies

About

In exploring the usage of color for the Aura app. icon, I had two primary goals, to appeal to the target audience's visual taste and celebrate the brand. With this in mind, I researched fashion trends, music, and filter styles popular with our gen-z creators. At the same time, we conducted an aesthetic research study to identify colors/cultural values shared amongst our users. I then iterated on color combinations using brand colors and trendy pairings. Finally, I led brand critiques to help stakeholders make an informed decision on a color variant.

Takeaways

After over ~1000 iterations, 3 workshops, 2 research studies, and 100 home screen tests, we favored the duotone teal/magenta variation. Not only did it have an atypical flair but it aligned with our users' favorite colors (strongly leaning to red and blue shift filters).

How impactful color pairings are on the overall tone of the application at first glance. Ultimately we wanted to keep it open for the color icon to change seasonally and/or be personalized by the user.

Aura Logo

Resolution/Scaling Adaptation

Taking cues from SoundCloud's handling of a stroke logo at scale (reducing the number of strokes to maintain the same visual effect), I created eight scaled versions of the logo for each notable context (Android, iPhone, Browser, App. Store, favicon, and swag). In most contexts, the 4-stroke variation is used, while 3-stroke is reserved for tiny depictions and the 5-stroke for >256 pixels.

Favicon

Application Icon

Large Format / Swag

Special Note

Icons are shown here in relative scale for ease of comparison.

Overview

Marketing

Challenge

Maintaining consistency in integrating the new brand intro marketing was the most complex part of the process. For each endeavor, branding was interpreted, iterated upon, and implemented on each channel. From completely revamping photography guidelines on Instagram to user research copy composing, we slowly built up a visual and semantic voice.

Approach

We prioritized real-time outreach efforts as the springboard for interpreting the brand application within marketing, Beta for 'Aura', the new help page, new Instagram, and, last but not least, the new QR code exports that would soon grace our users' externals social accounts. Each project followed the typical pattern of exploration, rapid iteration, design critique, and implementation/launch.

Goal(s)

Create consistency across all external-facing channels.

Promote 'Aura' and encourage recognizability.

Improve brand perception through each engagement.

Impact

We created a consistent visual language and style guide for our social photographic presence, launched our new support page, revived the company blog and careers page, vastly improved the QR code export, and most importantly, identified our intended and passionate target audience.

Social Advertisement

Aura Beta Teaser

About

The most exciting insight we garnered from speaking with our filter creators was their desire to not just recreate a look, but rather to insert themselves into a scene by expressing 'how it made them feel'. Emotion and empathy are at the heart of their color creations. For our beta social ad, I wanted to connect with this desire, to be emotive and authentic. Using connotations of familiar icons and concepts I explored our brand logo through a series of emotions to capture the vibe and most promising value proposition of aura, to be authentic in feeling.

Look & Feel

Youthful, Inclusive & Emotive

Target Audience

Fandom-focused filter creators; females between the ages of 16-25.

Music Credit

SCSC - Memoir by inextremis

Cross-Platform Signup

Aura Beta Splash

About

To generate buzz and recruit users for beta testing, I designed, developed, and deployed a cross-platform splash experience that tied into Typeform. I constructed and composed copy for the multi-tiered survey and designed all visuals to reflect the 'Aura' sub-brand. Using colored swooshes behind the logo created a sense of emanating movement while complementing the logo, inviting the user into this world of bedazzling flourishment.

Look & Feel

Experimental, Mysterious & Etherial

Target Audience

iPhone-users familiar with filters and engaging in fandom between the ages of 16-30.

Implementation

Webflow, Typeform, Adobe After Effects/Illustrator, and Sublime

Early Interactive Prototype

Aura Beta Splash

Overview

Enterprise

Challenge

The enterprise team, the brains of Polarr, was gaining traction with OEM's. Initially hired as the head of platform user research, there was incredible ground to cover in investigating the potential of reach for our CV modules. Though the project was furloughed, I had the opportunity to explore AI/CV/CNN applications in industry/academia and redesign module illustrations and site mockups (pre-rebrand).

Approach

In creating the new enterprise website concepts and module illustrations, I designed based on user/marketing research insights and the pre-re-brand guide (toting minimalism and hyper-realism). Principally, we focused on communicating the complex as visually as possible.

Goal(s)

Maximize understanding of our most prominent AI modules.

Improve conversion rate for CV developers.

Create visual language for motion-based communication.

Impact

Module illustrations and mockups (interactive photo) were very well received, albeit postponed in implementation. Additionally, research for the new platform was promising and created a new catalog of early adopters, applications, and market fit for later development.

Polarr AI Redesign

Vision Platform

About

As head of vision platform user research, rethinking the polarr.ai website was my first design challenge. Informed by new comparative/user research with computer vision (CV) aficionados I approached the redesign with intention. I had two criteria for improvement, to improve messaging (where the current sight was confusing or losing interest), and move the needle forward on the future of the CV platform to engage with a wider audience in industry and education.

Concept

Bring to life the effectiveness of Polarr's CV modules provocatively and interactively while tipping ones' hat to the nostalgia and timelessness of photography.

Look & Feel

Interactive, Picturesque, & Bold

Illustration

AI Modules

About

AI module illustrations are designed with motion in mind to give the user quick and high-level understanding, from the starter image to the resulting artifact. In a one day sprint, I formulated how the brand applied to illustration and created a generalized motif for showing original, action, and inference in displaying these complex narratives.

Illustration legend

Original — Teal

Result — Fuchsia

Process — Neon