Responsive Email Redesign for Integral Care

Project Scope: 4 weeks

Project Type: Assignment

Role: UX Design, UI Design, Copywriter, Light HTML Coder

Tools: Paper, Pencil, Figma, Miro, Photoshop, Brackets, WebAIM Contrast Checker

UX Techniques: Stakeholder interviews, Secondary Research, Customer Flow, Sketching, Wireframing

Participants: Integral Staff, Application Development

Integral Care supports the health and well-being of adults and children living with mental illness, substance use disorder, and intellectual and developmental disabilities. This non-profit supported over half a million people in 2020, and as it expanded its telehealth services, they wanted to improve customer retention and satisfaction with their emails.

Clients receive a lot of information in their initial and only email. Feedback from Integral staff revealed the following issues:

Email is long and complicated

Content is confusing to understand

Difficulty retrieving email before/during appointments

Developed a responsive HTML email template that integrates with the client’s mail client, allowing users to save appointments and reminders directly to their native calendar.

I managed most aspects of the project, from initial stakeholder interviews to ideation, prototyping, user testing, and coding, before handing it off to the application developer for final implementation.

During the discovery phase, I conducted interviews with the Director of Clinical Services and the Program Manager Supervisor of the Call Center to better understand the problem.

What is the process your user goes through before receiving an email?

What is the purpose of the email?

What do you want to accomplish with the email?

Who receives the email?

Is there a follow-up email?

What have customers told you about the email?

Demographics of clients

To visualize how clients find and interact with the service, I created a Customer Journey Map to understand their pain points and provide a bird’s-eye view for stakeholders.

I started with hand-drawn sketches to brainstorm ideas before transitioning to digital tools. I also conducted desktop research to analyze email templates used by other organizations.

To better understand the number of touchpoints in the email, I created a color-coded visualization of the content. This helped stakeholders see the distribution of information at a glance.

Color Decoder:

Grey: Text

Dark Blue: Notice

Light Blue: H1 or Link

Red: H1

Purple: Link

Based on sketches, I created high-fidelity wireframes for desktop and mobile views.

Required Components:

Microsoft Teams meeting information

Help video

Crisis helpline phone number

Recommended Additions:

Shorten email content from 2,220+ characters to under 600

Add-to-calendar feature

Call-to-reschedule button

Helpline button with direct dial prompts

After I completed the mockup I connected with the Senior Creative Designer asked a trusted co-worker about their option of the layout. Together we decided on some element and layout changes that saved space and highlighted some key areas. (You’ll see in the next section 🙂 )

Given the tight 4-week deadline, I coded the email in HTML using VSCode to expedite the process. This saved time for the MIS team and allowed faster implementation.

Feedback: “This is great. This saves a lot of time!” – Andrew, Applications Developer

Using my code, the application developer completed a project that would have taken one week in just 30 minutes. Dynamic Microsoft Teams links and calendar integration streamlined the user experience.

Using my code, the application developer was able to take a project that would have taken at least one week and pushed it out in 30 minutes! Using dynamic Microsoft Teams links and the client’s native email client for their appointment, allowed us to remove another button, giving the client choices to click on.

Less Is More: Simplicity improves user engagement.

Accessibility Matters: Font sizes, color contrast, and alt text were prioritized.

Collaboration is Key: Working closely with stakeholders enhanced the final product.

The original email was lengthy, unclear, and not user-friendly.

The redesigned email was concise, accessible, and responsive, featuring dynamic functionality like calendar integration and direct-dial buttons.