Crystal Tompkins
UX Designer | Product Designer | Illustrator | Educator

Caregiven

Dark mode, design consistency, home page user needs, and co-branding assets

Image alt tag
Caregiven is a mobile app developed to help with organizational needs and emotional support for the caregivers of people at end of life.
This is Rebecca. She and I have been friends for twenty years. A few years ago, her mom was diagnosed with cancer in the fall. By March, her mom was gone.

This is Rebecca. She and I have been friends for twenty years. A few years ago, her mom was diagnosed with cancer in the fall. By March, her mom was gone.

Overview:

  • The Caregiven team is a small, scrappy, heartfelt startup consisting of eight people who have experienced devastating loss and responsibility in their past.

  • Caregiven was created to help people who are losing a loved one while also being in charge of the care and management of that journey of loss.

  • 27% of their users were consistently using dark mode, but no design had really been done on dark mode.

  • All designs had been through a pro-bono arrangement with another design firm, and was all addressed in light mode.

  • My role was to see what accessibility standards needed to be addressed, while increasing the appeal in dark mode, and, of course, maintaining branding.

Summer break was the perfect time to help Caregiven with some pro-bono work.

This is where we started.

The engineering team had picked some of the branded colors and assigned them to categories.

This is the final iteration, which should be going to production by the end of September 2021.

This is the final iteration, which should be going to production by the end of September 2021.

Dark Mode

Gathering Information First

To start, I added the app to my phone and went through the account creation process. I used my family members to fill different roles within the app. I went through the design documentation left from the previous design firm. I gathered assets, and spoke with current team members about their thoughts.

Guiding Questions

  • Who is using dark mode, and when?

  • I know accessibility is a big issue, what parameters do I need to meet? What are current standards?

  • What constraints do I need to stay within for the engineering team?

  • What tools are being used by the Caregiven team?

  • How and when are team members available for discussions?

  • What kinds of deliverables do they want and how?

  • What goals are possible to meet before I have to start teaching again in late August?

Co-branding design

Co-branding design

Co-Branding Design and Mockups

I was able to finish the dark mode theme, and also put together notes for general design consistency in time to be able to address one more need before our time ran out this summer.

Caregiven is working on acquiring partner-clients in the insurance, healthcare, and palliative care fields. I was asked to create mock-ups of what co-branding could look like with various combinations of client needs. These will be used in future sales presentations. I’ve created individual versions tailored to 4 specific client meetings.

Open Source Illustration Needs

The Caregiven team was using UnDraw to meet their illustration needs. Undraw is fantastic, but it didn't come with versions that were working in dark mode. I took their library of illustrations (plus any illustrations chosen for possible future use), and created dark mode version to work with our color scheme.

Providing Forward Momentum

Since I knew I would be going back to teaching shortly, and wouldn't have a lot of time to continue helping the Caregiven team, I wanted to make sure I left them with enough resources and assets to move forward without me.

I created a chart of colors for dark mode, based off their original color scheme. This left them with options for future work.

I love this kind of work: work where I can help people, where I can think strategically, and where my visual skills are providing value.

Both the Caregiven team and I feel great about how the dark mode turned out. It also was just one of the things I ended up helping them solve.

  • I feel even better knowing that I left them with clear notes, helping them identify multiple areas of inconsistency in their design. These are things that will be easily fixed once the dark mode sprint is in process.

  • I adapted and created alternate versions of all of the open source illustrations in current use, as well as selected future illustrations, so the colors would be less harsh and the illustrations more easily readable and consistent in dark mode.

  • I designed co-branding assets, and created mockups for 5 prospective clients for use in presentations for the next quarter, as well as instructions on how to quickly adapt the mockups with new logos for the future.

Being out of the private sector for so long, there were a lot of processes and apps I didn't have experience with.

  • I was able to teach myself Figma during summer break.

  • I logged experience with Jira, and using a CMS management system.

  • I did a lot of research on open source illustrations, specifically dark mode options, as well as working on finding illustrations that showed more realistically diverse populations.

  • I learned a more about accessibility standards for digital design.

This was a great experience. I learned a lot, and the Caregiven team said that they were very happy with the deliverables and timing of my work for them.

"Crystal is fast, efficient, and handles ambiguity incredibly well. It's always a delight working with a talented designer who can take a few vague ideas and come back hours later with a mockup to focus the discussion. She's a dream to collaborate with, as well—she takes in all kinds of feedback and turns it into great user experiences."
Feedback from Caregiven this summer