About Continue Med
I have been hired by a new company that aims to create an online and mobile-app based medical educational service, with video courses and interactive learning exercises across a variety of subjects. Because they are a new company, they want me to establish the visual identity that will serve as the basis for all their products and components. To do so, I will be creating a brand style guide to define this identity. After establishing the Style guide I then will begin building a set of components for future web development.
The Challenge
-
Evaluate the identity needs and design principles of a client
-
Explore and ideate on design foundations
-
Create a typographic identity
-
Create a robust color palette
-
Understand and create useful design tokens
-
Explore written tone of voice
-
Consider states and interaction
-
Consider accessibility
-
Design for contexts and variations
-
Design for user interactivity
Trying to build a working system without any resources or past references.
Brand Identity
Design System Components
Personal Challeneges
Logo
I'm going to be honest, the logo was never a part of the initial project plan. As stated above, I struggled on how to curate a branding system without any context. In my past graphic design courses we started projects from the beginning. Create a logo, choose colors, sketch out design etc. But for this client project i was working backwards. I was to create an entire design system for a new company. I needed to anchor myself onto something in order to get the job done. So i created a logo for the brand. "CM" for Continue Med. The company I was building the brand system for was a continuing education medical sight. I bought the naming idea to the board members and they all agreed to move forward. Inspired by heart beat EKG.
Discovery
During the entire branding system I was very uncomfortable. I needed some inspiration and to really dig deep into competitors branding. I dug through medical websites to understand branding systems, read articles and found some inspiration photos on Pinterest. After all the research I could see the light at the end of the tunnel. I had a direction that I wanted to embark on. I also did some research on what platform i should use to build out the brand system. I aspired to use Adobe XD, and in previous classes i used Sketch but because of my computer limitations (i had a 2011 Macbook air...yeah) I didn't have enough hardware space to store the programs. My only option left was to use Figma and I'm glad I did. Figma has taught me a lot about prototyping so in the end I was happy to learn on this platform with this project.
Part 1: The Brand Style Guide
"Hey I'm Dr. Spence , the founder and the face of the Continue Med brand. Our target audience is the age demographic form 25–35 yrs that want to have an engaging learning experience. We want to tailor your educational experience to your needs and give you a platform you are familiar with. Social media is everywhere so why not learn through that lens too."
Meet Dr Spence
Brand Colors
I discovered through research that a lot of medical branding has blue color palettes. I wanted to shy away from the stigma and go for something more bright like Orange, purple, yellow-green and turquoise. From there I set the foundation for the Type color, feedback notification colors and the Background color options on all branding channels.
Typographic System
It took many rounds for me to land on to Qanelas Bold Font for the Typographic system. Im still learning the importance of web fonts at this time so in the very near future I will be updating this section and my components once I learn a little more. I went with Qanelas because of its boldness of course. I wanted a font that would pop. I wanted a social media type interface so i needed a font that will stand out from everything around it. Roboto was chosen as my complimentary font. Here are some of the rules used for said fonts.
-
Use for Hearers H1, H2, H3, H4. (Uppercase ONLY.)
-
Use on Buttons (Uppercase ONLY)
-
The thin font option use for time stamps.
-
Use this for body copy on regular weight.
Qanelas Bold Font
Roboto Font
Image Guidelines
Continue Med brand identity is inspired by social media platforms. Being inspired by instagram Continue Med wants to have the following image guidelines:
-
Use action shots of people using medical equipment or space. (check Card components for example on course cards.)
-
Use images of Medical spaces with people occupying the space.
-
Use stock or professional photos of medical models. (best used for image cutout aesthetic)
-
Always use a Moody blue hued filter on photos.
_pn.png)
_pn.png)
Design Tokens
On each website page there will be thin border lines only on the bottom and right of the page. Solid colors for class sub sections. Ombre border for home pages. Bolded buttons and navigation bars. The color options will be:
-White website background color
-Black for buttons and Top navigation bar.
-Purple used on footer navigation bars.
Decorative Elements
Decorative elements use Brand color palette for background geometric shapes (circles and triangles) on cut out pictures only.
_pn.png)
_pn.png)
_pn.png)
_pn.png)
Tone Of Voice
Continue Med will have big bold headers to capture attention. In copy Continue Med uses “We” because Continue Med believes it is a team effort to help its students accomplish their certificate goals. All copies should be encouraging and confident that the student will learn and finish a program.
Part 2: Design System Components
Components
Now that the client has a visual identity, they wanted to move ahead with building out their service. To do so, they asked to begin building a set of components that they can use in their web and app products, with the ultimate goal of enhancing the style guide I previously created.
For the Button components I designated the brands colors black, purple and white for the button states depending on the background colors. Red will be used for the warning state. I designed for all possible button states in each possible color way based on the brand standards.
Buttons
_pn.png)
Navigation
All navigation options were designed to be responsive. I created desktop navigation designs that could handle up to eight links. For the mobile/tablet mockups I created a secondary navigation for listing more comprehensive lists of links. It includes two levels of hierarchy so that there are links and sub-links.
_pn.png)
_pn.png)
Cards
During the entire project I primarily worked in Figma and didn't sketch much. But when it came to designing cards I though it was best to make a few sketches so that I can get the brand identity down on paper before creating component mock ups. I created Course topic cards, and individual course lesson cards to be used in any variation. The cards are also designed to be responsive.
Draft 1
Draft 2
_p.png)
_p.png)
Quiz Interface (Mid Fidelity)
As an extra component I created a quiz interface. At this point in the project I was struggling to give all the components a cohesive design. I also was a bit burnt out from creating and thinking about components for weeks on end. I need something fun and with permission looked into future component plans. I did some research on quiz interfaces and mocked up a possible solution that fit the Brand standards to be reviewed by the board.
_p.png)
Course Progression Tracker
Each course will include multiple lessons and achievements toward completion. I design a course progress tracker to allow students to easily see how far along they are and how much remains. This design is flexible enough to handle courses of different lengths. On the mobile view you would only see 3 tiers at a time until you finish the end of the course.
_p.png)
Brand Mock Up
To make sure that my components would be compatible for future use I created a Brand standard mock up for future web developers. Though I only created a few components. The mock up and the components standards should set the tone for future add ons and brand identity.
Reflections
This was one of the hardest projects I have ever worked on. Working backwards was not something I was used to. I had to dig deeper to find solutions for the brand's identity. Creating the brand standards was a bit easier since it had the normal design process behind it. But creating the design components without fully testing the brand identity made me unsettled. I know that this is a part of visual design and I love creating components and mock ups but I would hope that in the future this I'll be a team effort and not a one man show. I am happy with what I did accomplish for Continue Med and would want to expand on this project some more in the near future.
More Cases
Beverage Package branding