CORE Website Redesign

CORE Website Redesign

 
computer mock up2.png
 

Redesign of CORE website, PTSD training for non VA-therapists

 

CHALLENGE 

Create an engaging and informative website to train non-VA therapist in PTSD therapy methods.  

PROJECT

Redesign the current PTSD training website for training non-VA therapist. 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.   

SOLUTION

I worked with a Creative Director, developer, and copy editor to restructure the content of the website, redesign the user flows, and create interactive learning tools. The final site had five training modules. 

Visit the site


UX and Content Audit

The clients wanted an updated visual design and better navigation for the website. They had also conducted user interviews which informed many of their ideas for the redesign. The Art Director focused on new logos, color, and visual design, while I reviewed the current site architecture and site content. From the audit, I concluded that the text needed to be updated, content reorganized within sections, and dashboard system required to be developed to help the user navigate the site. 

Original site. Entering the webcourse looks simple and clean but the user has no way to understand what will be in each learning module.

Original site. Entering the webcourse looks simple and clean but the user has no way to understand what will be in each learning module.

Origintal site. From the beginning I knew we could not have a page count of ‘1 of 33’, which would be daunting for any user to get through the material.

Origintal site. From the beginning I knew we could not have a page count of ‘1 of 33’, which would be daunting for any user to get through the material.


User Stories and Information Architecture

I started by scraping all the text from the website and collaborating with the client we reorganized the content and clearly defined four learning topics, and then I created a site map to guide the team. A copywriter joined the team to edit the text as well as develop more engaging content. Taking the clients requirements, I developed user stories, and that would direct the content design of the site and new features.

Untitled.png
 
user stories.png
 

Wireframes and Modularization of Content

Designing the dashboard and the content pages were the critical achieving most of the user's needs. We wanted the user to feel like they owned their training based on their knowledge gaps and that the website supported all the ways they would want to learn. For example, the dashboard did not just reflect the progress of each learning module, but the users could access the summaries, videos, and worksheets for each topic.

Early sketch of dashboard. Working out how graphics and accordion menus could be used to show information. Making sure user stories match with interactions on dashboard.

Early sketch of dashboard. Working out how graphics and accordion menus could be used to show information. Making sure user stories match with interactions on dashboard.

Wireframe of possible dashboard, playing with designs of creating content that the user could easily scan but also deep dive to a specific concept.

Early wireframe of main learning page. Working out the ideas for notes and comments as well as interaction for marking that a section is complete.

Early wireframe of main learning page. Working out the ideas for notes and comments as well as interaction for marking that a section is complete.

Wireframe of main learning pages. We wanted to have sidebar, that user could skip around and also see what content would in each training.


Final Designs

For the final design, the creative director and I flushed out the wireframes, and I also created cartoon graphics. The user could control how deep they wanted to go into the content with a few clicks on the main dashboard. The creative director owned all of the visual design, and she developed a color scheme consistent across each training which and further organized the information. We accomplished our goal of a user being able to get to a specific topic very quickly and not have to click through pages endlessly.

Main learning page with the different topics.

Main learning page with the different topics.

The user’s dashboard for one of the topics.

Main learning back with sidebar displaying the users location as well as completed learning modules.

Main learning back with sidebar displaying the users location as well as completed learning modules.

I also created over 90 fun cartoon drawings to visualize certain concepts.

I also created over 90 fun cartoon drawings to visualize certain concepts.


Results

The website launched in the fall of 2017. Please visit https://core-exchange.org/ to view the site. Please use these credentials to login: Email Address: guest@example.org Password: coreaccess  This helps keep the data clean.  

 

Team

Creative Director: Katie Bernacchi, Punctum Design

UX Designer and Illustrator:  Courtney Beyer

Website Engineer: Mike Smith, Punctum Design

Copy Editor: Jennifer Kindred