Blog

Website Design and Development for Bluestar Genomics

Website Design and Development for Bluestar Genomics

Project Summary

Bluestar Genomics approached PINT to help implement its brand vision and communicate the immense benefits of its proprietary technology through a new website. The three main goals of the project included creating a strong web presence, attracting talent – lifelong learners with a passion and growth mindset – and spreading awareness of its technology.

To start, PINT conducted interviews with Bluestar Genomics stakeholders to understand the value of Bluestar’s technology for patients, the healthcare system, and potential collaborators.

As a result, PINT architected forward-thinking wireframes and user experience, as well as created a compelling visual design. After designs were finalized, PINT developed the Bluestar Genomics website using progressive web app technology to ensure the website has a solid, robust foundation that provides an optimal user experience for end users.

Client Overview

Bluestar Genomics was founded out of a Stanford laboratory based on proprietary, next-generation, and precision epigenomic medicine. Bluestar Genomics takes a big data approach to obtain comprehensive disease information about patients with a non-invasive sample.

Bluestar Genomics is reinventing liquid biopsy through epigenomics with an aim to escape the limitations of sequence alone and provide new disease and clinical information to solve broader healthcare needs. Bluestar Genomics’ technology can unlock cell/tissue specificity, biological activity, disease biomarkers, drug development, health monitoring, non-invasive sampling, and systems biology.

Client: Bluestar Genomics
Location: San Francisco, CA and San Diego, CA
Industry: Epigenomic Medicine
PINT Services: Systems Integration, UX/UI, Information architecture, design, image research, front-end development, quality assuranceTechnology: Progressive Web App technology, Workable API, Fluid Interactive Library, HTML/CSS, JavaScript

The newly launched Bluestar Genomics website

Challenge

Bluestar Genomics seeks to push the frontier of knowledge in the following areas of study: cancer, cardiovascular, endocrine, immunology, neurology, pharmaceuticals, and respiratory.

In order to do so, Bluestar Genomics needed to create a strong web presence that communicated its technology’s robust capabilities and opportunities to change the world.

Solution

Together, PINT and Bluestar Genomics worked to create forward-thinking information architecture, user experience design, and visual design.

1. Information Architecture/User Experience Design

In the user experience (UX) phase of the project, PINT designers worked with key stakeholders at Bluestar Genomics to translate key portions desired on the website into wireframes. Wireframes are essentially page blueprints and are the initial visual specifications of the website design.
The focus in this phase was:

  • Mapping out key content and functionality on specific pages and across user flows to support our key use cases
  • Visualizing the content as it will be laid out on the website to accurately communicate the platform’s value
  • Ensuring that user actions are clear and supported by the right content
  • Thoroughly understanding, and reaching consensus on website specifications before moving into visual design and implementation
Bluestar Genomics homepage wireframe

In the wireframes, PINT prioritized the About Us and Technology section as those were key messages the website wanted to convey to visitors. The wireframes conveyed Bluestar Genomics’ brand vision by approaching the website from a minimalistic standpoint. By subtracting what does not immediately convey the immense benefits of its proprietary technology, what was left was a simple, cleanly designed website ready for a splash of color and interaction.

Through a minimalistic, modern website, Bluestar Genomics also hopes to communicate to lifelong learners that Bluestar Genomics is an exciting company to work at.

2. Visual Design

Once the wireframes were finalized, the visual design phase of the project could begin. In this phase, PINT designers worked with key stakeholders at Bluestar Genomics to establish and implement its brand vision into design composites.

The focus in this phase was:

  • Establishing brand colors and the main interactive visual that users will land on when reaching the homepage
  • Refining visual imagery for key areas of focus for technology, industry, and office locations
  • Thoroughly understanding, and reaching consensus on website interactions and animations before moving into implementation
The Bluestar Genomics website

The branded colors of Bluestar Genomics, blue, orange, and green, are meant to represent science, health, and innovation. In the final design composites, PINT tied in the Bluestar Genomics’ branded colors, in addition to perfecting the interactive background.

Through the interactive background, Bluestar Genomics and PINT hoped to convey the novelty and creativity of the proprietary precision epigenomic medicine of Bluestar Genomics. In addition, the blue colored background was meant to tie in the “liquid biopsy” technology. Bluestar uses a cell-free DNA approach to next generation sequencing within a blood sample.

3. Website Development

Once the design for the Bluestar Genomics website was finalized, the implementation phase of the project could begin. PINT project managers worked with key stakeholders at Bluestar Genomics to establish timelines, milestones, and coordinate the delivery and launch of the Bluestar Genomics website.

During implementation, PINT used progressive web app technology to ensure a robust foundation for future web development was built.

The focus in this phase was:

  • Develop the base website as soon as possible
  • Prioritize features and functionality accordingly
  • Perform quality assurance and work with Bluestar Genomics stakeholders to establish a minimum viable website
  • Launch the website in time for a key date for Bluestar Genomics stakeholders

Once the beta website was delivered, Bluestar performed user acceptance testing (UAT) and refined the website to a launch-ready state.

Results

Since launching in July 2018, Bluestar Genomics has directed over 150 visitors to its application website, have received applications for current job openings, and have been able to showcase the new website to employees and investors.

“We’re pleased with PINT’s work and we’re excited to spread our message and build our team with the help of our new website. PINT did a great job translating our brand and vision into the new website.” – Caitlyn Krebs, Chief Business Officer

The number of sessions has increased 3x since the launch compared to the placeholder, ‘Coming Soon’ landing page. In addition, new users are browsing the website from the U.S. and all over the world.

The Bluestar Genomics website has great Lighthouse scores, which is used to measure a site’s adherence to Progressive Web App, Performance, Accessibility, Best Practices, and SEO standards.

Bluestar Genomics Lighthouse Score

The Bluestar Genomics website loads in about two seconds and has offline capabilities.  

If your company’s website isn’t telling the story you need it to tell, fill out the form below. PINT can help your web presence reflect your company.

Related Articles

A person with short hair in a hoodie facing away in a computer chair at a desk with a view through two large windows with the lingering remains of light after a sunset. The desk has a lamp that is off and some papers. The edges of a keyboard and a computer monitor showing past the sides of the person in the chair. Case Studies

5 Key Findings from a Recent Client Usability Study

Introduction Good usability within a website means that the user is able to use the interface to complete her/his tasks quickly and successfully. It is...

EDCO Logo and motto: "We'll Take Care of it!" with cartoon image of waste collection employee in uniform and cityscape background Case Studies

EDCO App Design and Development

Introduction Remember back in 2007 when Steve Jobs told us that iPhones didn’t need a bunch of apps?  No?  You’re forgiven if it’s been lost...

A person using their phone in a grey hipster sweatshirt with their thumb in a hole in the sleeve. Case Studies

N.A.M.I. San Diego App Development

Project Summary  Since 2020, PINT has helped N.A.M.I. rearchitect and continuously improve its mobile applications oscER, oscER jr. and alfrEDU. The apps were initially rearchitected...