Elevating Helix Brand with  Enhanced Interactive Experiences

Read the Case Study

Context

Timeline
9 weeks, launched on September 13, 2023
Contributors
Sony Maharjan (Designer)
Jason Herring (Design Director)
Matt Glaser (Engineer, Founder)
Mia Sommese (Project Manager)
Amanda Tusing (Senior Engineer)
Conrad Seto (Engineer)
Responsibilities
Strategy
Concept development
Design system
UX/UI
Web Accessibility
Helix.com serves as a repository of data and information in the biotech sector, specializing in population genomics and viral surveillance.
Helix partnered with Aleph in 2023, seeking a solution to their fragmented and tough to use publishing content technology. Aleph team helped Helix to shape a new visual presence around their existing identity, and to deliver a content platform to meet a diverse set of requirements with enterprise-level confidence.

Impact

Key Objectives
Boost user engagement to foster partnerships, drive conversions and leads, update CMS
User Needs
Content clarity and better user experience for digesting educational content and resources for Helix B2B audience
Initiative Ideas
Brand elevation, content clarity with enhanced interactive web experiences and Sanity CMS integration

On September 13, 2023, we successfully launched the Helix website featuring a strengthened brand identity and enriched interactive content tailored specifically for Helix's B2B audience. Also, built a platform to update their publishing processes and manage years of old content efficiently.

Following the launch (between Sep 14 and Dec 4), we observed a notable 12% increase in average engagement time.

Introduction + Review documents + Opportunities (Week 1)
Getting to Know Helix
The research phase for Helix.com was one week sprint. We conducted several discovery workshops with the Helix teams and engaged in asynchronous collaboration through shared documents. This allowed us to identify opportunities and outline all necessary content components and features required for a comprehensive system for Helix.com.
The shared documents included details about the target audience, brand guidelines, and the elements of the brand that we were and weren't allowed to update. *Images above show only a small part of documents Helix shared, due to confidentiality reasons.
We documented asynchronous content audit questions and held discussions to clarify each page's purpose, its impact on the audience/user, evaluate its current performance. Also, envision the ideal outcome with unlimited resources since this was 9 weeks sprint project.
*More documentation coming soon
The old Helix Site map shared by Helix team.
Visual Conceptual Development (Week 2 - 4)
The Four Building Blocks of DNA Inspires Helix's Uniqueness
Helix mission is to empower every person to improve their life with DNA, and after reviewing the helix brand documents we learned the significance of four DNA blocks and the relationship with Helix's offerings and uniqueness.

How might we explore the primary forms at the center of the Helix brand through patterns and human connections?
We hit the ground running with diverse visual approaches using the four shapes for brand elements, including colors and typefaces.
Initial explorations involved forms, patterns, humanistic images, and typography strategically combined to convey the powerful Helix brand.
The exploration also included crafting the home page layout with core design elements and establishing a set of core components outlined during our initial meetings.
Some early explorations of various core components for the Helix.com homepage. Although these directions weren't approved by the client, they aided us in reaching the final designs after multiple iterations.
After initially receiving approval from the Helix marketing and product teams, our presented different visual directions faced pushback upon review by Helix's C-level. We then refined the designs based on feedback, ultimately arriving at the approved final design.
The final approved design was based on the concept of positioning Helix as a leading technology company driving transformation within the healthcare ecosystem
Search & Filter (Week 5-8)
Making Resource Hub Prominent & Intuitive
In the previous design, all resources were buried under the Company link, making them difficult to find. To enhance visibility and accessibility, we ensured that resources could be accessed from multiple pathways.
* More documentation coming soon.
The comparison between the old and new site maps highlights the update made in the global navigation for improved discoverability of resources.
The visual map gave us clarity where many of the same elements are found and their connections within the 'categories' and 'types' of resources.
The global nav before and after the design updates.
Resource Hub with Search and Filter feature provides users to easily locate various types of documents tailored to their needs through 'categories' and 'types' .
Design System and Front-End Engineering handoff (Week 9)
Cornerstone Pages & Leveraging Patterns to Build Modular Designs
Expanding on the direction set by the approved homepage designs, we presented one cornerstone page per week for feedback and approval by Helix. The cornerstone pages included the components with search filter, infographics, embedded videos and blog contents.

The Aleph engineers built out modular page views and components for use within a CMS platform (Sanity), and demonstrated progress with weekly releases. We worked closely with the engineers to ensure that requirements are clearly defined and that we have what we need to move on towards a successful launch.

* More prototyping process coming soon.
The design process picked up speed as we find repeatable patterns and components from earlier design approvals and feedback. The engineers built modular components for efficient workflow within a CMS platform.  

At times the client raised concerns about our brand uplift, leading to pushbacks. During a pivotal discovery design sprint, we addressed the question, "What could potentially cause this project to fail?" The client mentioned that disapproval from C-level executives could be a significant obstacle. To mitigate this risk, we proactively involved the C-level executive of Helix in a broader design review, a step we should have insisted on earlier in the approval process.

The second challenge arose when Helix's in-house product team made design system changes close to the launch date, while we were aligning with their system. This highlighted the dynamic nature of a product team's design system, prompting the realization that a distinct system should have been established for the marketing website. However, a positive outcome was Aleph's provision of a new CMS, enabling clients to adapt content and design elements more flexibly as circumstances evolve.

ContextImpactDISCOVERYDESIGNDEVELOPMENTRetrospect