Standardizing Helix's Online Marketplace

2018 | Kleiner Perkins Design Fellow

Helix DNA is a Silicon Valley DNA company dedicated to making DNA learning accessible and actionable for everyone. During my Kleiner Perkins Design Fellowship, I joined their Product Design team and one of the projects I took on involved creating a standardized display to organize their product 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.

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.