YEAR

2018

ROLE

Kleiner Perkins Design Fellow
Product Design
UX and UI Design

Helix DNA

What I worked on this summer as a Kleiner Perkins Product Design Fellow at Helix DNA, a Silicon Valley DNA company dedicated to making DNA learning accessible and actionable for everyone.

context

I picked up branding and graphic design classes at Art Center in high school, and remember being completely enamored by how designers were using digital and physical mediums to create innovative modes of communication. A few years later, when I came face to face with obstacles in the current hospital system, I was shocked. There seemed to be a disconnect between the possibilities that inspired me and the solutions being used in industry norms. With modern technology, I could order food or even toilet paper at the press of a button, but couldn’t access important medical scans without an outdated disc reader. It was a flaw in a system where the user experience should have mattered most.

What's a Kleiner Perkins fellow?

I applied to be a Kleiner Perkins fellow to expand my knowledge of design in the health space. The Kleiner Perkins fellowship is a three-month summer opportunity in Silicon Valley in which selected fellows develop their technical or design skills and are mentored by an executive within a KP portfolio company. Once accepted as a potential fellow, Kleiner Perkins delivers his/her application to its portfolio companies. From there, interested companies have the option to contact desirable applicants. Applicants then interview with the company(s) and only when s/he are given an offer are they a KP fellow. The KP fellowship was named the #2 internship in the US by Vault.com.

I landed a design internship at Helix DNA and connected with new leaders in the health-tech space who envisioned a more accessible health care system. As a fellow, I had the opportunity to meet peers and industry trailblazers who were equally interested in designing products that catered to patients and the people who cared for them.

AT HELIX DNA

At Helix DNA, I was brought on to work through three primary tasks: a concept for a Helix DNA API, graphic design elements for the company's Careers page, and a standardized product digital display for the Helix DNA marketplace.

Concept for helix dna api

THE PROBLEM

Helix DNA primarily functions through partnerships with outside companies, such as National Geographic and the Mayo Clinic. This strengthens the company's credibility as well as makes it as a collaborative provider of DNA technology. However, by nature, the relationship can often become confusing as partners navigate how to onboard and develop with Helix. What does a partner need to prepare? What should it understand to ship with Helix technology? How is communication with Helix maintained throughout the process?

On the Helix end, partner managers had a difficult time gauging their client's understanding as they prepared to create apps within the Helix system. Their biggest fret was that the night before a client's deadline to ship, they'd find that multiple tasks had not been completed.

A TEMPORARY SOLUTION

As a temporary solution, partner managers created a dense digital ReadMe.io document outlining important information and directions. However, the content was all over the place and difficult to navigate as it hopped from link to link to link. It also did not provide a transparent way for partners to communicate where they were in the process, making meetings primarily about retroactively updating the opposite party as opposed to proactively addressing next steps.

A LONG-TERM SOLUTION

To combat these points of friction, Helix's team of product managers envisioned a Helix API that would organize the onboarding information and be a transparent platform for partner managers and partners to communicate. I worked primarily with product management intern Fiona Tang to design a successful concept around these goals. She and I first storyboarded potential use cases for the API from two principal perspectives: a partner engineer (primarily interested in the Helix language and code necessary to build a DNA app) and a partner developer (primarily interested in managerial information).

IDEATION

We made the ideal team. Fiona had spent two weeks before I had been brought on understanding partner relationships and the available documents. I was then tasked in translating those relationships and information into a user-friendly flow. The main challenge we saw was creating a platform that could juggle multiple departments: marketing, legal, development, partner, etc. Each was important to a successful product.

MAPPING WEB ARCHITECTURE

user flow

After reviewing all the ins and outs of Helix-partner relationships, we mapped a portal according to our two principal perspectives. Ideally, the portal would assist partners and developers by providing them information organized in two primary categories: documents and tools. These categories encompassed the gamut of information in the ReadMe.io and allowed for entrance pages that could introduce other capabilities when available.

DESIGN RESEARCH

In designing the platform, I researched what existing API platforms were popular and effective. By doing this, I could build a tool that would ultimately be unique to the Helix family but familiar to the landscape. Top contenders were the Uber API and the Stripe API. Reviews and online discussion remarked on their organization and engaging use of split windows for dual, correlative information.

Building off of these organic user reviews, Fiona and I began to arrange our requirements into UI features. We knew we wanted the categories to be placed on the left in its own menu bar, and be easily navigable however deep a user were to be in the layers of content. The design would also have to scalable for future, new information.

iteration 1.

The first iteration provided the following key architectural features:

• A clean, white aesthetic following the Helix DNA style guidelines
• A menu bar at the top with all Helix offerings
• A dropdown toggle between developer and engineer in the left side menu bar
• A left side menu bar with collapsible folders containing documents
• Navigational breadcrumbs in the subheader
• A section scroll on the right side within documents that snaps to where the user is reading
• An interactive task list that would communicate milestones between partners and Helix partner managers

user FEEDBACK

We presented this iteration to the Helix design team, partner managers, and engineering managers. We received high praise for the hi-fidelity prototype we were able to build in two weeks time. Partner managers were excited to see the ReadMe.io information organized into an accessible and appealing platform. The information was intuitively navigable and clearly digestible. They were also impressed that the product aesthetically felt well within the Helix product family.

However, we received pushback from one of the engineer managers. He expressed that the design didn't feel like an engineering API. Although it successfully catered towards partners, it didn't completely appeal to the sort of interfaces engineers were accustomed to.

We also learned that the multiple nav bars were confusing. What would go in the top section? How is "Docs" different from the collapsed folders? Is code "Docs" as well? How would the user know to toggle between partner and engineer viewports?

iteration 2.

The second iteration provided the following key architectural features and changes:

• A darker aesthetic still abiding by the Helix DNA style guidelines, but appealing to an edgier engineer audience. A white reading space was maintained for clarity and accessibility concerns
• A condensed left side menu bar, getting rid of the top nav
• Left side menu bar now has a Home page for holistic updates and directions
• Navigational breadcrumbs integrated into the left side menu bar
• Kept the section scroll on the right side within documents that snaps to where the user is reading
• Kept theinteractive task list that would communicate milestones between partners and Helix partner managers
• A survey at the bottom of the page
indicating helpfulness from the user

user FEEDBACK

We presented this second iteration to the Helix design team, partner managers, and engineering managers. The engineering managers were happily surprised and thoroughly satisfied with the aesthetic modifications, remarking that it "felt more like a portal we're used to."

We presented this concept to the entire Helix DNA company at the end of the summer and were met with positive feedback. Employees across teams approached us with questions of scope. They saw our concept as a possible solution to many of their key problems as well.

CONCLUSion

Because it catered to multiple stakeholders and managed a wealth of content, this project presented aesthetic and architectural challenges that positively grew my experience with user experience and interface design. It taught me to be even more sensitive to user preferences and to be thorough in mapping platform entrances and exits.

It also gave me the opportunity to execute information presentation. So much of health-tech has to do with the clear presentation of complex ideas and directions, and I felt that designing this tool gave me practice. Industry norms of medical histories and health-tech tools are muddled and not user friendly. I know this is just one API in an internet world, but I would love for developers to continue partnering with Helix DNA and looking for ways to bridge the gap between medical care and people care.

design elements for the company's Careers page

THE TASK

Pretty self-explanatory one here! I was tasked with creating icons for Helix DNA's Careers page.

EXISTING STYLE guide

To begin, the design team acquainted me with the existing Helix DNA icon style guide. I noticed the minimalistic, simple aesthetic that occasionally drew from Helix's brand colors. Because Helix is in its early stage of brand identity, it was important that I created icons that supported its progress.

PROCESS

The web product manager envisioned icons that would add in a similar style to what already existed explaining "How it works." There were particular do's and don'ts: stay away from too human of silhouettes, stick to simplified illustrations, flat without being completely two-dimensional, etc. I drew from existing internet icons that users would easily recognize and translate. After a couple of meetings with the design team and a quick turnaround of three days, the icons were installed into the Careers page.

ADDITIONAL ICONOGRAPHY

After the Careers Page icons were warmly met, I was asked to make additional icons, including this one of "sleep" for MySleepInsights. Seeing the new icons juxtaposed with existing ones affirmed my design decisions.

CONCLUSION

It was really fun to flex a purely illustrative muscle in my design tool kit. I was proud to see the icons installed and functioning, especially blending in with the existing Helix identity.

standardized product digital display for the Helix marketplace

THE PROBLEM

As a young startup, Helix grew its marketplace quick and thus without pattern. Partner-led products meant that its product presentation was often dependent on client-provided imagery, ranging from lifestyle to integrated. However, with growing credibility and a wider range of offerings, product and web managers wanted to see the Helix marketplace become more consistent and standardized.

THE SOLUTION

As my final task at Helix, I was asked to create a viable product card to organize the marketplace. This standardized product card would clearly present the partnership's offerings through imagery, include the title, and engage the user. Most importantly, it would tidy how the marketplace looked overall.

PROCESS AND ITERATIONS

I first researched industry norms for product cards. How were other DNA companies (Color, 23andMe, AncestryDNA, etc.) presenting their offerings? What patterns did they follow? What information did they emphasize?

I then went on to have a little fun. How did retail sites present clothing? Burger joints? What about e-commerce spaces such as Amazon? Technology spaces such as Apple? How could these differences spice up what health-tech products look like?

These questions combined to inspire some initial iterations. They provided the options for colorful and modern product imagery paired with user-friendly digestible information. I then presented four  options to the design team and product/web managers.

STYLE 1. Color Cards correlating to Categories

Each card color correlates to a different Helix category: yellow for ancestry, blue for wellness, pink for health, and green for entertainment. These colors are taken from the Helix DNA logo, giving it a secondary meaning.

STYLE 2. White Cards with Color Category Badges

To avoid the "candy store" look that may clash with Helix's minimalistic brand style, this option uses the same thinking as Style 1. but concentrates the categorical colors into a badge. These badges would also include respective icons relating to their category.

STYLE 3. Color Cards with Partner Logos

These cards would draw from partner logos to create color cards. Partner logo would be included alongside product imagery.

STYLE 4. White Cards with Partner Logos

These cards would focus on partner logos alongside product imagery.

DESIGN TEAM FEEDBACK

These concepts were met with high enthusiasm from the design team and web manager. It was good to see some organization! There were long discussions concerning appeal and partner requests. It was ultimately decided that although the color cards were more engaging and appealing, going the route of logos would satisfy partners and simplify designers' task of adding to the collection in the long run.

We went with Style 4, and I got to working on communicating specs.

PRODUCT CARD SPECS

CONCLUSION

Due to the nature of a 3-month internship, I left before I could be a part of the next web shipment and see this concept installed. However, before I concluded, I made sure that all of my assets clearly explained how a designer would implement this design and what rules to follow for new partners. I organized existing partner content into the new system and handed it off to the web manager.

This project challenged me to trace internet patterns and follow them to create something unique yet functional to the Helix marketplace. It asked for creativity in a relatively small gamut, and I am proud of the results and positive feedback received.

Thanks for reading!

Whew! That was a long one. All these projects were each fulfilling in their own way, but my favorite part of working at Helix by far was organizing the end-of-summer party. Every summer, Helix DNA lets the cohort of interns lead one of their monthly company bonding events, called ZAPP. Each cohort is allowed to decide a theme. I came up with "InsideLands," a pun off of the popular Bay Area music festival "OutsideLands," and we ran with it! We had a bracelet beading station, a flower crown weaving station, Sprinkles cupcakes, a "whose favorite song is it" trivia guest starring each intern's mentor, VIP lanyards, and more.



The event was a success! Our intern group had a really fun time channeling our creativity into music festival puns, and employees got the reference immediately. It inspired chats about musical preferences and some fun shares of music festival memories. InsideLands holds a personal significance for me since the event serendipitously fell on my birthday.

If you'd like to learn more about my time at Helix or about what it was like to be a Kleiner-Perkins fellow, feel free to reach out and email me. I'm always available to mentor and share about my experience.

Everywhere

@caretoshar

I'm always up for a cup of coffee.

caretoshar@gmail.com
LinkedIn
Instagram