CORE Illustrations

CORE Illustrations

character8.png

Process of using and drawing illustrations for visual enhancement of the CORE website.

 

CHALLENGE 

The website needs visually exciting content that is inclusive, within budget and is informative.   

PROJECT

After researching stock photography, quoting a photoshoot, we decided that illustrations would be the best solution for adding visual content to the website. Our clients were a part of a mental health organization focused on improving treatment methods for PTSD in veteran populations.  

SOLUTION

I developed a consistent illustration style and characters to add to the website. In total over 90 illustrations are on the site adding to the learning experience.

Visit the site


Research and Creating Illustration Rules
 

illustration moodboard.png

We looked at a lot of other websites to get ideas about how to incorporate illustrations into the site. We also got ideas about the style we wanted to create. What we decided was that if we drew less-human-like characters, we would avoid the issue of needing to represent every type of person. We wanted to create illustrations that were friendly, helpful, had emotions, but were gender, race, and age neutral. We also realized we needed to make the illustrations simple so that we could quickly create multiple illustrations just by tweaking a few components. 


Sketches and the Illustration process

I first started with sketches and the creative director gave me feedback, and then we showed the client our idea. They loved the sample drawings, and we just kept creating. My process was to come up with as many ideas as possible to illustrate the topics. I would sketch on my iPad, bring the designs into AI, do a little cleaning and then add to our “base” illustration characters. The creative director and I worked closely, and she was great at giving feedback pushing my drawings. It was a solid team effort to produce the best possible designs. In total, the website has over 90 illustrations! 
 

 
IMG_3344.JPG
IMG_3343.JPG
IMG_3340.JPG

Early sketches

veggies.png
character9.png

Final designs for CORE website. 

 
characters3.png
character 10.png

Final designs with examples of nestled with text. Using illustrations can more fully illustrate the concepts then photos. 

original bTA.png

Before (left) and After (right)  designs. How we transformed boring chart and used illustration and interaction to use illustrations to visually reflect the information in the text. 


Case Study Illustrations

For one of the training topics, we wanted to illustrate case study. We decided that more people-like illustrations would convey the content the best. For the people-like illustrations, we worked closely with the client to pick appropriate skin tones and genders for the drawings. Having the drawings digital enabled us to make many samples for the clients to review. We wanted to be extremely cognizant and represent as many people as possible. We also know we are not perfect, and if the client does give feedback, we can quickly change colors and drawings as needed. Not so easy if we did a photoshoot. 

 
joe2.png
case study image 2.png

A final illustration for the case study section (left). Integration of therapy method called Chain Analysis with illustrations of of the event to more fulling explain the situation and break up the long text block.


Results

Website launched in fall of 2017.please visit https://core-exchange.org/  Please use the below login credentials. This helps keep the data clean.  Email Address: guest@example.org Password: coreaccess

I worked with an amazing web design studio, Punctum Design http://punctumdesign.com/

adding visual enhancement to the website. 

Our clients were a part of a mental health organization focused on improving treatment methods for PTSD in veteran populations. We were tasked with redesigning their PTSD training website for non-VA therapists.  

 

Team

Creative Director: Katie Bernacchi

UX Designer and Illustrator:  Courtney Beyer

Website Engineer: Mike Smith

Copy Editor: Jennifer Kindred