Code

A New Website for Health Innovation / Kaiser Permanente

Written by Pete Wright

Urban Influence recently worked with the Innovation Studio over at Kaiser Permanente to design and develop a whole new website.

In the end they got a custom WordPress theme that is editable from the admin. They are able to edit the content of every section and organize every page in whatever order they want. This gives them completely different pages for each project while keeping the same look and feel as the rest of the website.

About Health Innovation / Kaiser Permanente

The Innovation Studio is a small team of consultants, graphic designers, and data scientists. They design, build, test and implement new ideas, experiences, products, and services while primarily focusing on virtual care, big data analytics, and social networks. The team wanted something reflective of their innovative thinking, so we worked with their in-house illustrator to come up with a lot of the hand drawn goodness you see throughout the website.

Kaiser Permanente 404

See what I’m talking about with those hand drawn images?

The Home Page

This page was definitely the most fun to work on coming from a developer point of view (the SVG animations on every mast were pretty fun too). The entire section is built using flexbox with a couple of different transitions on hover. The first transition is flex-grow. The flex-grow transition is bumping up from all the sections being equal to that one section being triple width as the other. The next transition is little delay on opacity for the overlay.

See the Pen Flexbox Flex-Grow Mast by Thomas Vaeth (@thomasvaeth) on CodePen.

The Website

Make sure to check out the rest of the website over at Health Innovation / Kaiser Permanente.

Kaiser Permanente Projects