Cases
Carebook
Intro
Carebook is a healthcare platform, from march 2018 to march 2019, my contribution there had several challenges to solve. From trying to tight together several functionalities and ideas in one single app; to create app modular components with flexible branding.
After a few months and once the healthcare platform was more established we wanted to add pharmaceutical functionalities, like loyalty points, managing pharmacies and prescriptions.
Friendly reminder: all the designs are intellectual property of Carebook.
The challenge
The exciting process of redesigning of what would be a design language: consistent, modular, scalable, branded, flexible, accessible.
Consistent, we harmonize every element on the design. Palettes, shades, mobile and web font styles, effects, etc.
Modular, using constant validation with the developers-teams we build the design-components using the Atomic-design approach.
Scalable, these first main blocks or “Atoms” will serve on the next months and years to grow the company, brand and several apps.
Branded, we had as a goal to fashion a recognizable brand, BUT easy to white-label at some point with other partner brands.
Flexible, this new design language should let us express the brand on an extensive umbrella of assets. Not just apps, but pitch presentations, posters, paraphernalia, more.
Accessible, we researched, selected a couple of typefaces, found and choose the one that would be optimize to render on devices. At the same time we put a lot of effort choosing good contrast on call-to-actions buttons and text for people with any kind of vision capability.
As a result of these first efforts we had a solid beginning with reusing and harmonizing previous components under a unify design language.
The first white-label release became the Be-Well Rexall App.
Results
The UX of the platform
We need to organize the different functions in a logical information architecture. We decided to adopt a main menu at the bottom that could be scaled from 2 to 5 sections with time. A dashboard, a notification section and personal section with settings and anything linked to the user.
This approach gave us flexibility and easier native iOS and Android interpretation.
Sample of the hierarchy of the atomic components
After several rounds of research, workshops our first ideas become prototypes we could test. We tested function, accessibility and how the brand and different components started to take shape.
Find a pharmacy
Find a Pharmacy – Wireframes
We designed, prototyped and User-tested it then built it – Prototype
Add a prescription
Functions like add a prescription started to get benefits of our design system, reusing components and user-flows from our design system.
Low res wireframes – Your prescriptions
We started to gain momentum and speed from previous accomplishments. How an empty state look like? a user flow first screen? the lists?, root sections? hands-on screens (we used the dark scheme), versus informational lay-back screens? … And many more building blocks of our design.
The Design System – UI
Since early in the process with the developers we started a constant exercise of creating the components, the building block we can optimize in time and reuse for several future functions in the apps.
Due to the exclusive nature of the devices, the UI required one library for each OS/device: Android, iOS, and web.
Tools like Sketch, Invision and Zeplin allowed us to accelerate the documentation of the System, for developers, and for the onboarding of a new designer and future collaborators.
The components of the Design system follow the Atomic design approach. Atoms make molecules, that make organisms, that make templates, that make final screens.
Small sample of the Design system on the Sketch file
Adaptive UI
An adaptive user interface mean components that adapts, that is changes, its layout and elements to the needs of the user or context.
We needed to design and code this adaptive UI because of the nature of the screens, the width of the columns will change or sometime the content inside the components will. Without forgetting Android that has to support multiple resolutions and screen sizes.
Proven benefits
It eliminates the duplication of time worrying about colours, font-sizes, shades, spaces, icons, or any UI decision while creating new user-journeys.
It gave developers completely control to sandbox ideas, prototype and deliver.
Adopting a partner branding
Since inception the platform had to adapt fast and dynamically to a new brand. This new brand was being created in at the same time in parallel by an agency.
Meaning, we had to “skin” the new brand almost at the end of the development of the first platform delivery. This is where the Design system excel one more time.
Given the right time, we white-label our apps, reducing the transition a 90% of the first time for designer and developers. It was as smooth as just changing the assets: logos, palettes, and fonts.
This app is live, take a look!
Your health score wheel. Aimed to valued youtr health globally.
As part of the company we had so much fun creating new pieces according to the new refresh brand language and transmitting the spirit of Carebook.
In that sense we stretched the reach of the Design system to the branding. The new assets where from slide presentations, gear, posters, to many more.
Branding and Marketing
Reflection
I feel lucky I got the chance to partner with a talented team led by the very innovative, nimble VPs and CEO. I was pretty amazed about the proactivity and agility of the company. As a result we got : speedy design, test, and deliveries.
It allowed me to stretch most of my designer-muscles in one single company, almost like never before. From UX/UI, branding, user testing, to motion UI.
What worked was: we had constant communication, double checking we had common understanding on global business rules and design decisions. So our different apps could hold consistency across the platform and brands.