Skip to Content Skip to Sub-Pages

"The prize is always worth the rocky ride."

Emily Sailers

Atara Bio

One of our clients at Roher/Sprague Partners is a bioetechnology company that works with creating Off‑the‑Shelf, Allogeneic T‑Cell Immunotherapies.

New Website for 2020

In 2019, we worked with a number of other vendors to build a new website for Atara Bio. It started with the head of communications wanting to update the design, remove the stock art, and make the site more mobile friendly. He also wanted to change investor platforms to Equisolve as Atara was unhappy with the previous investor site platform. Since the investor site was on a propietary platform while the public site was on a Wordpress based platform, the design and navigation often conflicted. For example, menu changes would not sync to all sections.

Equisolve started with a design of the new public site and investor site. Once that was almost ready, I took over with a few minor changes to improve the mobile site usability before we started building the new Wordpress theme and templates code. We hired some developers to help with the coding under my direction.

The new site makes use of a lot of new photography done by Atara during 2019. Since Atara is on the west coast in California, I was not able to do the photography, but provided composoition direction for the Atara team that was involved with the shooting.

The public site has a lot of links to the Equisolve investor site where stock info and press releases are pulled from JSON feeds. We also added an automatic display of the latest Atara Bio twitter posts. We intended to do the same with LinkedIn posts, but LinkedIn's policy changes caused that to be impossible in the end.

 

The original hamburger menu design for the mobile site was unacceptable for a smartphone user interface in this day, so I created a bottom-edge menu navigaton bar. The advantages here are that users can actually reach the navigation menu with one hand while holding a phone, and the navigation menu is much more obvious since it's spelled out in plain english as opposed to a cryptic icon that no one understands.

I also had to sneak in some modern CSS tweaks to for the mobile site design.  First of all, the navigation bottom bar uses the backdrop filter attribute to cause a transparent acrylic-style blurry effect that shows the colors of the layers below as you scroll. Secondly, I added support for the prefers-color-scheme media query which allows the bottom navigation bar to alter itself based on the theme color preference of the user's browser. 

Atarabio.com running on iPhone.

For example, if you use an iPhone with the light-mode theme, the navigation bar will match the color and transparency effects of the Safari web browser. If you switch to a dark-mode theme, again, the websites navigation bar will match accordingly.

Atarabio.com on Kai OS

Of course, I'm big on graceful degredation in my website designs, so all of those new backdrop filter and color scheme CSS features have fall-backs... AND, I even added CSS support for emerging market KaiOS smartphones. In the medical fields, Internet Explorer still has a significant amount of market share as well, so we were sure to make the site functional there as well, though obviously it's a bit nicer on newer web browsers.

Updates

Throughout post launch, I also directed site updates such as integrating a job search that interfaces with ICIMS as well as an info request form and plenty of other content updates.

Extranet

We also did some design work in partnership with Atara's sharepoint customization firm to develop Atara's new "AtaraNet" extranet site. We can't show that publicly though.

Social

We've been creating lots of featured graphics for Atara's Twitter and LinkedIn accounts to promote different news and events. Most were static images, but a number were video animations created in Adobe AfterEffects.