GSOC App Product: Cobalt Robotics

These images reflect the ongoing iterative development of the Cobalt SOC (Security Operations Center)—a key facet of the security services product the company offers.

Cobalt’s customers manage security programs in indoor environments including office workplaces, manufacturing and warehouses, shopping centers and cultural centers. Beyond the benefits of a patrolling robot and on-call personal presence via its tablet screen, our customers want to see through the multiple “eyes” of the robots in their fleet.

No customer locations are shown in these comps.

Through conversations with our Head of Product, sales reps, and customers, we developed the Cobalt SOC App. With it, customers can remotely monitor incidents as they are happening at any time during the robot’s patrol hours. If an unusual or critical incident requires immediate action, the app delivers video surveillance and other important data directly to top decision-makers.

Wireframes were begun on paper. Shown here are some next-stage (but still early) concepts.

In addition to hearing the concerns and frustrations of security professionals, we also dove deeply into industry norms by interviewing security managers, undergoing guard card training, and visiting our customer’s security operations centers. The results are an intuitive tool that delivers increasingly meaningful features as our customer base expands.

Proposed event modals.

Sales Collateral: Cobalt Robotics

Sales Collateral for Cobalt Robotics

Our marketing team collaborated to evaluate the sales journey, define objectives, and then refine messaging that produced a cohesive set of materials for print and digital use by both marketing and sales teams.

By conducting interviews with Cobalt customers, engineers and account managers, we composed stories that were both technically informative and emotionally captivating.

Service robots, and cobots (robots that work closely with people) in particular, are so new that a huge part of the work is educating our audience. Every marketing project is an opportunity to collect more feedback, and for the brand to evolve along with our customers.

Isometric illustration: the Cobalt Robot

Brand Evolution: Cobalt Robotics

When I began working at Cobalt, we had a very basic visual identity framework: a logo, colors, a typeface, and an initial brand book by the original designers. By the time I had created our first cohesive set of Brand Guidelines, a couple of colors had shifted, an additional typeface was added, and I had refined the essential elements of our company story.

I did these things carefully, methodically. I left in things that I did not necessarily agree with and only changed them after I had spent time with stakeholders and had applied the provided assets to real projects. Only then did I determine exactly what needed to change, and why.

Brand Discovery

Before attempting to direct the brand (i.e. make any major decisions about the existing assets and guidelines), I explored the company archives for relevant notes, interviewed leadership, and led a discovery exercise for the founding team (12 or 13 people, including leadership, at the time).

As part of my research,
I focused on better understanding our product and service, as well as the security industry we were targeting. I balanced those learnings with studies on the challenges of cultural acceptance for robotics.

In meetings with leadership,
I presented images and phrases pulled from assets in use, or that reflected conversations and notes about the company’s goals and vision, or that I believed would elevate the current conversations. I made notes based on their feedback, adjusted my presentation, and interviewed them again.

The discovery exercise for the entire team
began a week or two ahead of a planned internal Town Hall, with a request to everyone for five words that they felt described our identity as a company.

When we met, I had written everyone’s words on index cards. If multiple people chose the same word, each mention counted for another card.

I spread the cards out on a table and invited everyone to organize them in a way that made sense to them. Some gathered same or similar cards together, others created groups and hierarchies.

While participants interacted with the cards, I noted not only what they did with the cards, but also how they responded—to words they had not expected, to repeated words, and to contradictory words (for example, how to reconcile ‘scrappy’ with ‘elegant’? and ‘driven’ with ‘soft’?). There was surprise, delight, and some really good conversation as participants discussed the meanings and priorities of each other’s choices.

I had gathered an abundance of insights; Patterns were beginning to emerge.
I kept asking questions and strewing provocations in smaller ways, but it was time distill my learnings so far.

Documentation

Documentation is not only an essential practice for guiding future projects, but also an elegant and powerful tool I use to process big questions. I begin by creating the loose framework of a proposed story: it’s a first draft, and the aim is to jump start the distilling process.

Knowing, for example, that part of discovering our brand is to understand where we come from and where we aim to go, I create blank pages in a “book” with titles that start out as “The Why” and “Vision”. Onto those pages I dump snippets of what I know so far. 

The snippets can be moved to different sections. The titles will certainly change. But by simply beginning to tell our story, I unearth patterns, expose gaps and raise important, clarifying questions.

Having populated the pages of the first Guidelines draft, I went about the day to day of utilizing our visual identity assets to create sales and marketing materials, develop the UI for our online operations centers, and provide our customers with the tools to help introduce Cobalt to their employees and guests.

Now I had context, I had an understanding of our company and product, and I had started to develop informed empathy for our target markets.

Brand Evolution

Colors

The original visual identity designers had provided a palette of primary and secondary colors. As I learned more about our market, our messaging and our internal vision, it became clear we were playing things too cool. Our neutral gray and our icy pink were not helping us introduce ourselves to a cautious industry, skeptical of Bay Area startups and high tech promises.

We needed to dial things to warmer hues, differentiating ourselves not only from the perceived Silicon Valley Disrupter bubble, but also from “enforcer” wannabees and Hollywood’s robot stereotypes. To that end, we also moved the middle secondary blue to a primary role.

Initial colors

Evolved colors

Typeface

The typeface specified in the initial brand book was beautiful, but its high per-seat price would be costly for our flat organizational hierarchy and its numerous content producers. Also, its body copy weight was not going to perform well in text-heavy whitepapers and case studies. I opted to keep it for print headings and subheadings, but chose a complementary free font with a slightly higher x-height to use for body copy and online communications.

Our Story

In order to introduce Cobalt to the media and external vendors, I broke our company story into three parts:

  1. The Facts (describing our product/service)
  2. The Story (our “why” and our values)
  3. The Intent (our vision)

By now, much of what is included on those pages is increasingly public knowledge. That said, it is more valuable than ever to present these ideas as a somewhat formal narrative.

On the pages that follow that narrative, the story becomes increasingly abstracted—from words to images, and then to the essential colors and forms of our visual identity.

The rest is pretty standard: color values, photography rules, a section on brand voice, etc.

Going forward

Cobalt has evolved and the market has continued to mature as its exposure to robotics increases. We have expanded the types of customers we serve to include malls, warehouses, and stadiums. Most importantly, we are fulfilling more than the basic security guard role (“observe and report”), and demonstrating value in roles such as mobile kiosk, remote concierge, remote evacuation assistance, and on-call hazard monitor.

We’ve already begun testing messaging to reflect these changes, and it’s time to also address them in a new edition of our Brand Guidelines.

Favly, Inc. Product

Favly, Inc. is the maker of a new social referral app. When I began the project, the iOS app was well underway. In addition to visual identity and brand development, the product needed to be pushed to Android and web platforms, and its notifications features needed to be organized, designed and implemented.

For more details about my identity and brand design work for this company, see Favly, Inc. Brand.

Android

In contrast to the approach that had been taken for the iOS version of the app, we chose to design for as Android-native an experience as possible, closely following material design and material.io guidelines and best practices, so that we could focus development resources on improving current features and introducing promised new ones.

Web

Of the three platforms, we tackled the web app last. I pushed to balance consistency to the mobile app experience with the opportunity to offer features that would take full advantage of the platform.

iOS

Although I had been focusing on Android and web platforms, updates to the iOS version of the app meant that I was involved there, as well. We iterated UX and UI improvements, as well as promised features, steering the product away from its initial ultra-customized interface and catering more to native.

Notifications

Tight on resources, I designed a simple base template and commandeered wall space to map and track the email notifications. The marketing director and I co-planned, co-wrote, and co-strategized every piece with the intent to maximize the potential of these touchpoints.

Exhibit Design: DSI International

DSI International is a pioneering diagnostics technology company that serves clients including Boeing, Lockheed Martin and NASA. Their products are necessarily complex, tailored for trained engineering professionals, but a conference booth has seconds to attract attendees with a strong message and fresh visuals.

I studied the products and then distilled their essential value to users with my hard-hitting copy and visuals. They responded very positively to both, and decided on the design shown here (the runner up is below).

Exhibit design by Penina S Finger

Runner-up booth design:

Favly, Inc. Brand

When I began at Favly, makers of a new social referral app, there was already a first-round website, a nearly-complete iOS version of the app, and a logo. While there was a rough styleguide, the logo and its uses had evolved since it was created. All resources were now focused on the iOS launch.

For more details about my product design work for this company, see Favly, Inc. Product.

Brand Discovery

To create a system, a coherent visual identity, and to begin delivering materials that would best serve our goals, I began with a brand discovery process, and spoke with each founder to get a feel for their vision. The resulting document—The Favly Story—was not only a valuable resource for myself and new hires, but was added to the fundraising arsenal.

Brand Discovery Document for Favly, Inc. created by Penina S. Finger

Styleguide

Once I had confirmation from management that The Favly Story reflected the company’s principles and vision, I began the first draft of the styleguide. This was a more conventional document, but I used excerpts from the Story to reinforce the reasoning behind various style rules, such as the use of gradients and copy tone.

Multi-platform Design

With the beginnings of a system in place, my design team revisited the company’s marketing materials and landing pages, as well as the product itself. In print, on the web and in mobile app environments, we generated visuals that are a dynamic balance of consistency and vitality.

Other fundraising support included a deep overhaul of the slide presentation to reflect the app’s core ideas with greater clarity and professionalism.

Email design and notification strategy

One of my most challenging projects was working closely with the Director of Marketing, the planning and implementation of about fifty emails. Most of these were critical moving parts of the product, and an indispensable step in earning new users to grow our traction. Tight on resources, I designed a simple base template and commandeered wall space to map and track the emails. We co-planned, co-wrote, and co-strategized every piece with the intent to maximize the potential of these touchpoints.

Fashion Takeaway/Calling Cards

Tight deadline, small (but beautiful) collection of photos (by Kevin Weinstein). What could we pull together for a showing—in six days—and really make the most of Staci’s outstanding attention to detail?

Design for print for Staci Koondel, by Penina

Instead of trying to squeeze it all onto one card, we decided to create a set of three. Interested buyers could take a favorite, or more.

Design for print for Staci Koondel, by Penina

For speed, it was going to have to be a digital press. We’re thankful for E&T Graphics Los Angeles, who had it printed, beautifully trimmed, and ready for pickup in a day.

Design for print for Staci Koondel, by Penina

Community Identity

No surprise (to me) that our corner of the world was among those designated by Mayor Eric Garcetti to be a Los Angeles Great Street.

As a member of the Pico Great Street Collaborative and the PGSC Urban Design Committee, I’m drawing from the neighborhood’s diverse social and architectural identity and contributing design input to facets including signage, infographics and grant applications.

My strategy has been to first lock on to the existing Great Streets visual identity, and then gradually evolve that toward reflecting Pico’s unique qualities. This allows the initiative to leverage public recognition as support and funding are developed, and more importantly, to listen carefully: it’s both our pride and our challenge to be one of Los Angeles’ most culturally and racially diverse communities.

The infographic below was adapted for use as a poster in participating shops, as an online outreach tool, and as a supporting document in grant applications.

Infographic by Penina S. Finger

Because this is a volunteer project, I am delivering assets as the need arises, rather than as a pre-packaged system. All the better to allow a complex identity and its future vision to be discovered, defined and redefined over time.

Schematic neighborhood map illustration by Penina S Finger

Surface Design: Home Decor

surface design - pillow pattern range

Wide and experimental pattern range for interior design client, Christel Ferguson.

I developed patterns, exploring a variety of styles that ranged from hand-drawn and loose to traditional and quite rigid. We explored trend colors as well as Christel’s own particular tastes, and researched fabrication options that included both hand-embroidered and the latest print-on-demand technologies.

Geometric Sea
Geometric Sea Pattern by Penina S Finger

Simple Floral
Simple Foral pattern motif by Penina S Finger

Long Ivy & Stripe
Long Ivy and Stripe pattern for home decor by Penina S Finger