Couples Coach Mockup

Elevating

The User Experience

A UI Mission to Enhance Tools for Connectedness

Redesign

Problem

The Couples Coach App was created by U.S. Dept of Veteran's Affairs. Although I found the app to be rich in research-based information, the interface had complaints of not being user-friendly and having color scheme that was not "soothing."

Objective

Redesign the Couples Coach app's key features to create a more user-centric, responsive dashboard and enhance the usability as well as the aesthetics for the mission and tools couples can use to improve their connectedness. *This redesign was not commissioned by Couples Coach or the U.S. Department of Veteran’s Affairs.

UI UX Icon
UI Designer
Headspace Icon
Conceptual
Redesign
Tools Icon
Figma
Photoshop
Time Icon
9 Weeks
Independent

Interactive Prototype

Full Couples Coach Prototype

View Here on Figma

Couples Coach Prototype

Aesthetics

Before

Playful Red Screens

The bright red design, although red indicates “love” did not seem to connect with users in that way. The playful illustrations did not appeal to the users. The feedback I received was that it felt like it was for a younger, adolescent age group rather than adults.

After

Soothing Colors and Images

A “sunset sky” theme created a relaxing and cozy feel. The decision to make the app into a dark-theme played into that night-time cozy feel. Button, navigation bars, and icons were placed on the dark screens and sunset colors ran throughout the design.

Style Guide

Logo New for Couples Coach

Brand Logo and Color Update

For a couples app, the logo needed to have a “couple” on the brand. I used the CC and created a heart-shaped couple to indicate the couples connectedness and closeness. Warm and dark color styles were updated. After the colors were changed to a more cozy and warm mood,  the logo and the playful images did not seem to fit the mood and theme.

Current Brand Logo
Updated Brand Logo
Typography Styles
Icons

Imagery

Photos with a darker color scheme with rich warm oranges, blues and creams seemed to keep in line with the relaxed and cozy theme. Close up shots with a relaxed in feel were chosen for the images, tools, and missions screens.

Trusted

Reference Page Couples Coach

References Not Found

missed by User

Although Couples Coach is informed by evidence-based treatments, users could not easily find the references. As a result, users did not trust the application.

Onboarding Reassurance

When users began to use the app, immediately there was research-based information as well as an explanation about references. Users could be reassured that their missions were evidence-based.

Mockups of Reference Pages for redesign

Intuitive

Original Dashboard

What does this app do for me?

On the original dashboard, there was little information about what the purpose of the app was and how it helped the user. Although it referred to what they could "take a minute to learn more about" the app, it did not explain the purpose of the app up front.

Couples Coach origiinal dashboard

Updated Dashboard

your mission to a better relationship

On the updated dashboard, the purpose of the app was clear to the user. Missions and check in were prominent with progress was clearly visable. Relationship self-help tools were at their fingertips.

Table of Redesign mockup

Check-In Progress

Mobile Mockup Redesign Mission Pagess

Mission Badges

The mission badge was created to not only show the level progress, but to allow users to know how close they are to finishing their mission.

Ease of Check-in

Busy users can open the app and check in without having to hit anything on the screen first. This allows users to check-in and continue to be diligent.

Mission Checkin Redesign

Mission and Tools

Easy Access to Tools Needed

What tools do I need today?

Tools were divided by needs for the user. Putting all the tools in a cascading scroll seemed overwhelming to users when asked for feedback. Tool carousels were nested under dropdown menus to make users not feel overwhelmed.

Tools Page Redesign
Tools Levels Redesign

A Mission to a Better Relationship

Couple using Tablet with the redesigned app
Image by Freepik

Easily Browse Missions

Limited mission carousels for ease of browsing

Missions were also placed in drop down menus so that the screen was not overwhelming with too many images and missions. Each mission had a badge added in orange when mission was completed to keep the diligent user informed of their progress.

Select Mission Page Redesign
Couples Mission Redesign with open levels

Anywhere

Responsive Design

Any Device  - Anytime - any place

Responsive app for all devices so users can meet their needs and check-in from their laptop, phone or tablet either on the go or at home with their loved one.

Laptop with new Redesign
Image by Freepik

Next Steps

App Redesign Mockup Visual
Image by Goeffroy Hauwen
What I learned and Could do Better
Next Steps

Couples Coach Prototype

View Here

Couples Coach Prototype
Many Mockups of the Screen Redesigned

More case studies from Angelyn . . .

Up Arrow Button