A fintech startup was initiating its offerings with employee family leave management, helping U.S. companies navigate complex legal and financial details that shift over time and vary from state to state. I led design for the self-help leave planner that employees could use to privately explore and determine leave options, and then submit them to HR when ready.
The challenge
What did employees need to know?
What might they want to know?
How would we remove the burdens of navigating a maze of leave options offered by employers, insurance companies and government and at the same time respect the intelligence of inquisitive and capable working people. Too little info could feel patronizing. Too much info could be overwhelming to expectant parents.
The work
I began with an introductory meeting with the founders and engineering team. It was important to understand their unique workflow and handoff expectations. Next came an audit of the existing wireframes and prototype, and immersing myself in founders’ user research.
As the project progressed, I initiated additional UX interviews to iteratively test and advance ideas and solutions. Wireframing was only needed in places where I made major changes to existing interactions. Because I was also establishing overall look and feel, the prototype was completely restyled and interactions updated while I simultaneously began scaffolding a design system.
In writing copy for the leave planner experience, we needed to strike a similar balance, somewhere between calming and authoritative. To that end, I led an accelerated voice and tone workshop with the founders to lay the foundation. I then documented our insights and applied them to the in-app copy.
Untangling complexity
The most interesting piece of this product design puzzle was the core planner tool. Expectant parents face very different leave options for pre-birth, post-birth (the time immediately following a child’s arrival), and bonding leave. This is where companies and states can vary the most widely, and where families need the most support (and privacy) to fine tune their plans.
We provided three widgets for each leave phase, each dedicated to its unique leave options. Choices users made were reflected in real time in a timeline window just below the widgets. They could review the timeline, and then go back and make adjustments as often as they wished, all privately, until they were ready to submit their plan to their employer.
Wrap-up
With base structure for the design system and a working prototype, the deliverables also included assets, interaction patterns, and other documentation for engineering, as well as clear direction for a junior designer.
Because the prototype was also being used as a sales demo tool, I centralized all copy that would mention the prospective company name as Figma components on a separate page. This saved hours of picking through the prototype copy to customize the demo ahead of a presentation.
An on-demand shipping company approached us for an upcoming meeting where they’d be pitching out-of-the-box experiential campaigns to a world class customer. They had the ideas, but lacked the polish.
Our solution was to go simple and bold, combining brand elements like typeface and color, rather than going with an always-awkward pairing of company logos.
With such a primary palette, as well as the client’s spunky concepts, it made sense to develop simple, upbeat illustrations to buoy the vibe. I created a set of abstract packages for subtle effect on the title pages, which the client loved.
As with most pitch decks, a lot of the text had to be redacted to protect the client’s privacy.
The isometric maze gift blanket began as a weekend personal project. The idea was sparked while I was developing our illustration approach for security case studies. The calm isometric look was a combination of professional and approachable that reflected the brand we were building.
As I developed the first round of illustrations, the idea of Cobalt’s iconic robot roaming the halls of an isometric maze continued to nag at me. Finally, one Sunday morning, I sat down with a cup of coffee and worked out the seamlessly repeating pattern.
The look was simple, but striking, enhanced by the electric blue that traveled along the tops of the walls.
I dropped in a robot, and it looked great… but there was so much blue it was oppressive. Solution: an occasional planter with a poof of flowers in bright complementary colors relieved the monotony.
When the time came to discuss a holiday gift for the company, I was excited to share a few ideas that involved the maze pattern, and the concept was received with enthusiasm. Super soft sherpa blankets were produced with the Society6 print-on-demand system, and were a hit with the Cobalt team. It was a delight and an honor to give a little of my time toward what became a heartfelt gift to the entire company.
I developed the logo, identity treatments, and packaging for this project.
Frankie Paige is one of the most sought after skincare professionals in the entertainment industry, with studios in Beverly Hills and Hollywood, California. Her treatments are trusted by many of the most photographed faces in the world.
Frankie’s original 3-step system has seen tremendous success, and a new product, specifically formulated to treat acne, got an incredible reception during the test phase.
Because the new product targets a younger age group, they wanted to give the packaging a fresher look. At the same time, it was important to keep the crisp overall feeling that would reflect the rigorous lab research and clinical testing at the core of their products.
Above: the launched Global Security Operations Center (GSOC) app.
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.
How Cobalt’s security service works
The ask
When the robot begins a patrol (step 1), Cobalt’s team of remote Specialists monitors it via a video feed and control panel.
Customers quickly let us know they needed something similar.
The work
Based on research the Head of Product and I conducted—sometimes together and sometimes individually—I designed the app for four key priorities: 1. urgent situations, 2. fast decision-making, 3. easy spacial orientation (i.e. where am I and what am I looking at?), and 4. function first (while maintaining our clean aesthetic).
In addition to interviews with security managers on-site and at our offices, I also dove deeply into industry norms by undergoing security guard certification and visiting working 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.
Wireframes were begun on paper. Shown here are some next-stage (but still early) concepts.
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.
Customers can now 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, customers can view video surveillance in real time to make better high-impact decisions.
Also, providing the ability to remotely experience Cobalt’s patrols is a powerful way to demonstrate the value of the service.
No actual customer locations are shown in these examples.
Proposed event modals.
My role
Research into workflow, backgrounds, worries and aspirations of the GSOC’s intended users.
Design of wireframes, and proposed app layouts, features and user flows.
Worked with engineering to clarify and determine technical requirements and security restrictions.
Created prototypes to review, finalize and test for usability and flow.
Designed and delivered final app layouts and visual assets.
Created illustrations of the robot, as well as nonstandard icons.
Documented any elements that furthered the evolution of Cobalt’s brand.
I underwent basic guard card certification at a training facility as part of my research. Scored top marks!
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.
Since the company’s launch:
We’ve learned more about how to educate customers about Cobalt’s services.
We’ve introduced many new and improved features.
The sales journey is much better understood, but very long, requiring continuous touchpoints that evolve along with the relationship.
Our sales team provided us with a deep dive into the sales journey so that we could identify needed collateral to introduce our service, detail our features, and answer common questions—all in a visually cohesive set of materials.
By conducting interviews with engineers, account managers, and existing Cobalt customers, I worked with the head of product and the marketing team to compose 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.
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.
When I began at Cobalt, we had a very basic visual identity framework: a beautiful logo, colors, a typeface, and an initial brand book by the original designers. We didn’t have enough to hand to media or outside agencies, nor did we have the visual vocabulary we needed to take our next steps with the product, like improving the robot’s UI and building an operations center app for our customers.
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: I used the existing guide and materials, studied early documentation, spent time interviewing stakeholders, and applied the provided assets to my first few 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 to 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:
The Facts (describing our product/service)
The Story (our “why” and our values)
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 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 underway:
Brand look and feel were established, but not systematized.
Design decisions didn’t conform to native iOS standards, draining development resources.
Without Android and web platforms it was not meeting MVP requirements.
Email and mobile notification features were needed.
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.
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).
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.
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.
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.
