UX PROJECTS

HCTS
Short Stacks

client

My role

UX/Visual Designer
Graphic/Motion/Brand Designer
Director/Producer/Editor of Lecture Videos

Project

Health Communication Training Series (HCTS)

Health Communication Training Series

A series of  asynchronous, device responsive, online courses created to enhance the communication skills of health care providers

target audience

  • Public health professionals
  • Healthcare professionals seeking continuing educations options
  • Pre-medical students
Angel Gonzales Persona. She's a 23 year old pre-med student who is actively having a difficult time finding courses that won't take up too much of her time as she finishes up her last year as a pre-med student. She'd prefer to earn credit for these courses, as well as gain insight that isn't readily available anywhere else.
David Cooper persona. He is a medical internest who is looking for a promotion at his practice. His family is growing, so he'd like to provide more for them. He's hoping that taking courses in health communication will help boost his resume, as well as help him increase trust between himself and his patients.

Problem

Our team of two was given the task to create a series of easy to navigate, asynchronous courses using available, University of Texas-approved, tools: Canvas, H5P, and Panopto. Canvas is used by many institutions for online education, but can be confusing if the user is unfamiliar with its interface. As many of our learners aren’t in a school setting that would implement these tools regularly, I was tasked to create a navigation system that would make the experience of learning each course as seamless as possible. I also had to be mindful that the learners should not be able to advance in the course before completing each module in sequential order. The branding and aesthetics were my responsibility, as well.

Project Goal

The purpose of the Health Communication Training Series is to meet the demand of health communication training to healthcare professionals, that of which is very high. Our learners are incredibly busy, so the interface and content should make learning easy, enjoyable, and responsive. If they need to work on their phone or tablet during their lunch break, our courses should make that possible by implementing responsive design.

Image of young woman with dark, long brown hair, studying HCTS courses on her laptop at a coffee shop.

approach

Standard Canvas Layout

Redesign for HCTS

On the left you can see what a typical Canvas course looks like, and how students have to navigate through the course. It can feel a bit unpolished, and the flow is a bit cumbersome.

On the right you can see a typical HCTS course. I designed a clean, easy to navigate, and responsive interface that allows the user to work on the course without getting confused about their progress. I also created CSS and images that enhanced the look and feel of each course.

Performance indicators

Our performance indicators are currently based on the qualtrics survey responses our learners submit after completing the course. Currently, our average satisfaction rating is 4.85 out of 5.

Quote from  a learner who took the Pain, Opioids, and Hard Coversations course: "What I like the most about this course was the examples provided to reinforce the information that was taught. They helped me understand and remember the information!"
Quote from  a learner who took the 
Health Literacy and Clear Health Communication course: "I loved how interactive the modules were and the course instructor was engaging and taught the information in a way that was easy to understand."
Quote from  a learner who took the 
Mental Health, Stigma and Communication course: "I liked the different methods of interaction the course utilized. The course was presented in a straightforward manner and easy to learn."

solution

My solution for navigation was simple. I made sure the modules would not unlock until all of the module activities were completed. This prevents the students from trying to take the final course quizzes before they learned the materials. I also made sure as many of the elements of each module was included on their respective pages, so  the learners wouldn’t have to bounce back and forth between a module list to see what they should expect to work on.

A user task flow diagram showing the basic user flow in an HCTS course.

Key takeaways

As noted before, our average satisfaction rating for our courses is 4.85 out of 5. We have also created a buzz within the patient-provider community, partnering with organizations such as the Texas Epidemic Public Health Institute (TEPHI) and the Society for Health Communication (SHC). One of our courses has also been featured on the Center for Disease Control and Prevention’s Website (CDC). We have recently assigned someone to market these courses on social media broaden our audience.

free courses

HCTS has three free courses that can be reviewed at no expense. If you’re interested in what HCTS is doing, please click on one of the courses below. You can also visit hcts.uthealthcommtraining.org if you’d like to see other subjects available in our series.

An image displaying Dr. Ashani Johnson-Turbes with her course title, "Equity Science, Health Equity, and Big Data."

Equity Science, Health Equity, and Big Data

Welcome to the Mental Health, Stigma and Communication Course! This self-paced course is a part of the Health Communication Training Series and aims to highlight the importance of communicating effectively about mental health. It comprises video content and interactive activities to assess your understanding of the course content.

An image displaying Dr. Mike Mackert with his course title, "Pandemic Preparedness Communication"

Pandemic Preparedness Communication

The Texas Epidemic Public Health Institute (TEPHI) Pandemic Preparedness Communication course will cover the fundamental aspects of pandemic preparedness at an organizational level. In this course, you will go over the preparedness plans to put in place before a pandemic, discuss best practices for communication during a pandemic and finally, discuss how to synthesize lessons learned after a pandemic. As the learner of this course, you will have the opportunity to analyze this information and reflect on how it applies to your unique situation.

An image displaying Dr. Heather Voorhees with her course title, "Mental Health, Stigma, anc Communication."

Mental Health, Stigma, and Communication

Welcome to the Mental Health, Stigma and Communication Course! This self-paced course is a part of the Health Communication Training Series and aims to highlight the importance of communicating effectively about mental health. It comprises video content and interactive activities to assess your understanding of the course content.

A wireframe showing the user flow. Made in figma for shortstacks.

Client

Patrons of the dog park/bar, Yard Bar

My Role

UX/Visual Designer

Project

Short Stacks App

An app prototype for patrons of Yard Bar. Users will be able to check if their friends will visit the park on a daily basis, as well as post what time the user intends to visit the establishment.

Target Audience

  • Dog owners who love to bring their dogs everywhere
  • Patrons over 21 years old
  • People who want to be surrounded by friends while their dogs get much needed socialization and exercise
  • Professionals who make impromptu visits to the dog park when their work schedule allows it
A persona for Short Stacks. Jane Daniels is a 68-year-old retiree who takes her two dogs everywhere.
She especially loves Yard Bar because she's met an array of friends who love their dogs as much as she does. Her goal is to stay as social and as busy as possible now that she isn't working. She enjoys meeting up with friends at the park, but she also dislikes group texts. She'd prefer to see a list of when her friends plan to show up.
A personal for short stacks. Devon Baker is a 32-year-old graphic deisgner who loves to visit hisfriends at Yard Bar during hislunch hour. However, sometimes his breaks aren't as predictable as he'd like. He would like a way to check on the time his friends plan to visit the park as he's leaving so he knows what to expect.

Problem

Many people who regularly visit Yard Bar build groups of friends that they enjoy hanging out with.

Project goal

The purpose of the Short Stacks app is to coordinate hang-outs between Yard Bar patrons, their friends, and their fur friends.The purpose of the Short Stacks app is to coordinate hang-outs between Yard Bar patrons, their friends, and their fur friends.

Approach and Solution

I essentially designed a simplified Twitter Feed for the Pets. All the user needed to do was enter when they planned to visit and when they planned to leave. Once they posted it, all their friends would be able to see the timeframe they intended to visit the park that day. The friends could also comment on their post to encourage visits at a different time.

All of the posts would reset at midnight so the only times posted were relevant for that day. This will ensure that the user doesn't accidentally use someone's time from a previous or future day when they look up when their friends will arrive at the park.

Loading Page for Short Stacks App.
Log In Page for Short Stacks App
Profile Page for Short Stacks App
Friend Page for Short Stack App
The page where you enter what time you will go to Yard Bar on the Short Stacks App.
An example of what a comment on a post in the short stacks app would look like.
An example of what the newsfeed would look like on the short stacks app.
The screen where you can search for friends.
A black and white image of 5 irish dancers holding hands and dancing in a line on a stage in front of a curtain. Their backs are facing the audience. The only male dancer is in the center.

Client

The northern lights celtic dancers logo. It is a celtic knot with a purple, pink, blue and bright green gradient, resembling the northern lights. Underneath the knot, it says Northern Lights Celtic Dancers.

My Role

UX/Visual Designer
Graphic/Motion/Brand Designer
Director/Producer/Editor of Lecture Videos

Project

The website for the dance studio Northern Lights Celtic Dancers needed an overhaul.

Target Audience

  • Public health professionals
  • Healthcare professionals seeking continuing educations options
  • Pre-medical students
Angel Gonzales Persona. She's a 23 year old pre-med student who is actively having a difficult time finding courses that won't take up too much of her time as she finishes up her last year as a pre-med student. She'd prefer to earn credit for these courses, as well as gain insight that isn't readily available anywhere else.
David Cooper persona. He is a medical internest who is looking for a promotion at his practice. His family is growing, so he'd like to provide more for them. He's hoping that taking courses in health communication will help boost his resume, as well as help him increase trust between himself and his patients.

Problem

Our team of two was given the task to create a series of easy to navigate, asynchronous courses using available, University of Texas-approved, tools: Canvas, H5P, and Panopto. Canvas is used by many institutions for online education, but can be confusing if the user is unfamiliar with its interface. As many of our learners aren’t in a school setting that would implement these tools regularly, I was tasked to create a navigation system that would make the experience of learning each course as seamless as possible. I also had to be mindful that the learners should not be able to advance in the course before completing each module in sequential order. The branding and aesthetics were my responsibility, as well.

Project Goal

The purpose of the Health Communication Training Series is to meet the demand of health communication training to healthcare professionals, that of which is very high. Our learners are incredibly busy, so the interface and content should make learning easy, enjoyable, and responsive. If they need to work on their phone or tablet during their lunch break, our courses should make that possible by implementing responsive design.

Image of young woman with dark, long brown hair, studying HCTS courses on her laptop at a coffee shop.

Approach

Standard Canvas Layout

Redesign for HCTS

On the left you can see what a typical Canvas course looks like, and how students have to navigate through the course. It can feel a bit unpolished, and the flow is a bit cumbersome.

On the right you can see a typical HCTS course. I designed a clean, easy to navigate, and responsive interface that allows the user to work on the course without getting confused about their progress. I also created CSS and images that enhanced the look and feel of each course.

Performance Indicators

Our performance indicators are currently based on the qualtrics survey responses our learners submit after completing the course. Currently, our average satisfaction rating is 4.85 out of 5.

Quote from  a learner who took the Pain, Opioids, and Hard Coversations course: "What I like the most about this course was the examples provided to reinforce the information that was taught. They helped me understand and remember the information!"
Quote from  a learner who took the 
Health Literacy and Clear Health Communication course: "I loved how interactive the modules were and the course instructor was engaging and taught the information in a way that was easy to understand."
Quote from  a learner who took the 
Mental Health, Stigma and Communication course: "I liked the different methods of interaction the course utilized. The course was presented in a straightforward manner and easy to learn."

Solution

My solution for navigation was simple. I made sure the modules would not unlock until all of the module activities were completed. This prevents the students from trying to take the final course quizzes before they learned the materials. I also made sure as many of the elements of each module was included on their respective pages, so  the learners wouldn’t have to bounce back and forth between a module list to see what they should expect to work on.

A user task flow diagram showing the basic user flow in an HCTS course.

KEY TAKEAWAYS

As noted before, our average satisfaction rating for our courses is 4.85 out of 5. We have also created a buzz within the patient-provider community, partnering with organizations such as the Texas Epidemic Public Health Institute (TEPHI) and the Society for Health Communication (SHC). One of our courses has also been featured on the Center for Disease Control and Prevention’s Website (CDC). We have recently assigned someone to market these courses on social media broaden our audience.

Free Courses

HCTS has three free courses that can be reviewed at no expense. If you’re interested in what HCTS is doing, please click on one of the courses below. You can also visit hcts.uthealthcommtraining.org if you’d like to see other subjects available in our series.

An image displaying Dr. Ashani Johnson-Turbes with her course title, "Equity Science, Health Equity, and Big Data."

Equity Science, Health Equity, and Big Data

Welcome to the Mental Health, Stigma and Communication Course! This self-paced course is a part of the Health Communication Training Series and aims to highlight the importance of communicating effectively about mental health. It comprises video content and interactive activities to assess your understanding of the course content.

An image displaying Dr. Mike Mackert with his course title, "Pandemic Preparedness Communication"

Pandemic Preparedness Communication

The Texas Epidemic Public Health Institute (TEPHI) Pandemic Preparedness Communication course will cover the fundamental aspects of pandemic preparedness at an organizational level. In this course, you will go over the preparedness plans to put in place before a pandemic, discuss best practices for communication during a pandemic and finally, discuss how to synthesize lessons learned after a pandemic. As the learner of this course, you will have the opportunity to analyze this information and reflect on how it applies to your unique situation.

An image displaying Dr. Heather Voorhees with her course title, "Mental Health, Stigma, anc Communication."

Mental Health, Stigma, and Communication

Welcome to the Mental Health, Stigma and Communication Course! This self-paced course is a part of the Health Communication Training Series and aims to highlight the importance of communicating effectively about mental health. It comprises video content and interactive activities to assess your understanding of the course content.