Brand Design and Development. Crafting a health tech brand.
ROLE
Front-End Engineer
COMPANY
Joany Inc.
I joined Joany in the May of 2016 to work on their brand and product as a Front-End and Design intern. I worked with two brilliant cofounders, Christine Carillo and Helen Lee, with a mission to make healthcare more human.
It was critical for us to keep the product clean and simple. The more the user had to think about something, the less likely they were to trust Joany. For starters, our brand needed a fresh breath of air.
Below are screenshots from the Joany style guide.
Typography
It was important for the product team to align on what design actually means at Joany. The product is an element of the brand. This is represented in many ways, from the colors and visuals to the tone and feeling that a product represents.
Our previous page used over 5 variations of font families. It was kind of a hot little mess. We narrowed down our fonts to only two variations of the same family. Graphik Bold and Graphik Regular.
Colors
The previous style featured over 7 grays and inconsistent references to various versions of black. We took a look at what's being used out there and everyone in health is using blue.
We used to feature blue in our palette of colors, but we didn't want to be synonymous to health care companies. We also established one sole version of black and the handful of grays that we were to use.
Buttons
Buttons were previously either in orange or blue. The call to actions were never clear. We had blue and orange buttons that would be the CTAs and at times, we needed one that was an alternative, which we couldn’t do with either since we used both as primary buttons. Hover effects were also inconsistent. Some would have shadow, some would show you an outline and the background would turn white. Some would just change the background color.
What we ended up doing is standardizing the primary button to be the red button. The secondary button wasn’t used as much. For hover, we ended up going with subtle box shadow for all buttons. The disabeled buttons, in a product that serves up a lot of input forms, that a section or page doesn't have enough information to be submitted for the next step.
UI Elements
Rounded borders was a brand new element for our theme. We wanted to keep the user's focus, especially when presenting information that traditionally confuses those not necessarily versed in the world of healthcare, so we established cards, they kept the focus on where we wanted the focus to be, they also helped stand out from the off-white background.
WORK
PERSONAL PROJECTS
Also, I enjoy riding my bike around town, going on local hikes, playing with my dog, and occupying coffee shops to work on perosnal projects and learn new tech.
