GSOC App Product: Cobalt Robotics

Cobalt Robotics is a security service powered by robots and human Robot Specialists working together. It’s a new way of using robots and a dramatically new way of doing security.

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.

Always attuned to risk and vulnerability, it is critical that our enterprise security customers are able to monitor the robot, seeing what it sees through its multiple cameras.

Also, providing the ability to remotely experience Cobalt’s patrols—in real time—is a powerful way to demonstrate the value of the service.

No actual customer locations are shown in these comps.

Working closely with our Head of Product, Head of Commercialization, 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 the appropriate 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.

We learned about the kinds of information they were used to seeing, management’s backgrounds (often in military and law enforcement), and what features we could offer users highly trained in security, but not in robotics.

Personas: C-suite Executive, SOC Manager, Security Guard/SOC operator

Beyond the essential functions, we also began to get a sense of the aesthetics that would reflect Cobalt’s white glove service, communicate credibility, and earn the trust of an industry that has no patience for flashy startups.

The results are an intuitive tool that delivers increasingly meaningful features as our customer base expands.

Proposed event modals.

Favly, Inc. Product

Favly is a social referral app that relies on personal referrals from users’ own networks, rather than star ratings and reviews.

When I stepped in, the iOS app was already underway but:

  • Design decisions had been made outside of native iOS standards, draining development resources.
  • Without Android and web platforms it was not meeting MVP requirements.
  • Email and mobile notification features had yet to be developed.

Along with founders, the key stakeholder was the marketing director. I collaborated with him on strategy, and led a senior and junior designer. I coordinated directly with the dev team to drive the project forward with the least possible friction.

Our iOS version of the app was far enough along that we could use it as a user-testable prototype, with the plan to leapfrog improvements between the two mobile platforms based on user feedback.


Notifications

Tight on resources, I designed a simple base email template and commandeered wall space to map and track all 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 for:

  • Helpfulness to users
  • Beauty
  • Brand cohesiveness
  • Attracting more users

iOS

For iOS, I worked with the senior designer to iterate UX and UI improvements, as well as promised features, steering the product away from its initial ultra-customized interface and catering more to iOS-native design.

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.

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

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.

TOK Media: Digital Product Design

TOK Media produces live discussion, networked polls, and content platforms that publishers can embed into their existing websites. The concept was well developed, but needed the UI to accommodate its next round of feature updates. Also, to give it the credibility that would help sell it to publishers, it needed a more polished look and feel.

As project lead, I worked with the founder and lead developer. In addition to their detailed notes and numerous meetings, I researched existing paid content models and participated in the TOK platform to understand the product and user behavior.

I wireframed interactions for the multi-platform experience, produced many, many interactive prototypes, and then nailed down visual details with Photoshop.

One of the more interesting challenges was finding a way for poll users to scale the number of voters they could view. The example below shows the two most extreme views—as few as a dozen voters and as many as 1,216 voters (color-grouped by their vote).

eCommerce: ModelMayhem Shop

The ModelMayhem Shop taps a range of commerce partnerships, offering products that are relevant to the industry, as well as specifically to the MM community. These include:

  1. Simple affiliate-style partnerships, such as an MM-branded Nextag feed
  2. Comp cards and headshots, for which I designed a variety of templates, as well as the interface for product customization and order/transaction flow.

I’ve done extensive UI/UX work for features throughout the ModelMayhem website, including a completely new subsite, Modelmayhem EDU. Contact me for project details.

Headshots style browser

ModelMayhem shop website and interaction design (headshots browser)

Comp card style browser

ModelMayhem shop website and interaction design

Transaction flow: enter cc info

ModelMayhem shop website and interaction design (transaction sample)

Marketplace placeholder

ModelMayhem shop website and interaction design (Marketplace placeholder)