Image for post
Image for post
Inclusive palette for Tidepool.org

Character illustrations can be used to tell whimsical or aspirational stories, or just to inject a more human touch into a brand. While most products have a defined brand palette, oftentimes they don’t have a defined character illustration style, skin tone or hair color palette.

In this case study, I review a process for creating inclusive characters.

  1. Character exploration
  2. Developing an inclusive palette
  3. Palette research
  4. Creating a Grouped Analogous Palette
  5. Showcase

1. Character exploration

Image for post
Image for post


Image for post
Image for post
Illustration by Kelly Dern

One of the questions that I hear a lot from emerging UX designers is how they can make their portfolio stand out when applying for their first role. Starting off as a designer can be intimidating because many hiring managers want to see portfolios with “shipped” client work. But, in order to showcase client work, you need clients. So how do you break through with that first client project?

In this overview, I outline several methods for building out a UX design portfolio without client work. I want to emphasize that I never recommend doing free work or underpaid work for a friend or colleague, however, there are some exceptions to this rule¹. …


Some tips for reaching out to designers and leaving a good impression

Image for post
Image for post

As a design mentor and career coach for the last couple of years within UX design organizations, I have met with many new designers interested in finding their first UX design role. I have also been on the other side of mentorship and wanted to share some tips for making this experience great for both the designer and mentee.

No one likes “networking” (especially introvert designers like myself), but it’s an essential aspect of landing a new job. Your network can open doors to you, lead to more exciting opportunities or freelance projects that can stretch your skills. …


Creating a type scale for web applications is as much of an art as it is a science. While choosing scales can be daunting, breaking down the each step into a systematic process eliminates guesswork and defines the scale in a harmonious way.

Image for post
Image for post

Type scales can work together so that they look and feel coordinated. The term Modular Scale refers to a series of harmonious type values that are both pleasing for users and scalable for feature development.

In this case study, I talk about:

  1. What is a harmonious scale?
  2. Ems, rems, pixels?!
  3. Types of scales
  4. Branding and type explorations
  5. UI style guide for the type…


Case study on designing accessible lifestyle surveys

Image for post
Image for post

Product Strategy | UX & UI Design | Prototyping & User Testing

Designing life events surveys

Surveys provided another method for Life.io to gather personal health data about users through their health and wellness application. Users had been providing their physical health metrics (drinking fluids, workouts, diet and food, sleep, and illness), however, there was a gap for mental wellness. The application was missing out on providing resources for wholistic wellness such as stress, work and career, mood, or family life. By launching a series of optional surveys, Life.io could quickly gather data and provide additional actionable insights for users to improve upon their wellbeing.

Survey goals

  1. Build trust so users will provide sensitive personal data, such as marital or employment…


Usability and research methods for lean design teams

Image for post
Image for post

Usability testing can quickly and cheaply show how a design solution could be improved, which saves time and valuable resources. Surprisingly, a lot of Designers skip over this step, which is understandable, but can add design debt to the product development process. It’s amazing to me how many Designers ship their products without the slightest amount of user testing.

Remote/rapid usability testing is an great way to gather quick feedback during the design and prototyping phase. Remote testing requires flat designs, an online testing tool (which I’ll explain later), a research method, and research analysis. Small design teams only need to test with 5 users to uncover the majority of usability problems. …


I’ve been teaching with Girls Who Code in the Denver, CO area for the past year and it has been one of the best boosts to my skills as a Designer. Not only is it my favorite activity that I do every week, but it has really helped me develop thoughtful communication and empathy skills. Teaching has been a way to be self-reflective, and also pushes me to learn and grow outside of my comfort zone.

Image for post
Image for post


Process for creating a notification hierarchy

Image for post
Image for post

Integrating notifications in a health and wellness app

As a Product Designer with Life.io, I had noticed that there were a few limitations of the overall experience of notification messages in the web application. Since Life.io uses an incentives-based approach of points and rewards to motivate users to complete healthy activities, notifications are a central communication tool in the app. These messages notify users of points earned, whether they’ve been entered in a lottery, or essential error messages, such as incomplete forms.

There were no defined guidelines for when a user saw notification messages. The design, layout and timing of the messages were arbitrary. Also, the messages lacked a consistent hierarchy; if the user hadn’t recently logged into the app, the messages would stack on top of one another, without an order
of importance. …


Creating a design system for financial fitness

Image for post
Image for post

UI/UX | Branding & Identity | Product Strategy | Prototyping

OVERVIEW

Wittle emerged as a debt simulation product to help users model their financial wellness under different criteria. American household debt has increased by 11% in the past 10 years and nearly 80% are in significant debt. Student loans remain a huge burden for Americans. In 2012, 71% of students graduating from a 4-year college had student debt and it continues to be an ongoing $1.3 trillion dollar crisis.

As a sensitive issue, designing for debt management is a challenge. Personally, I had to deal with moderate student loan debt; I paid off my graduate student loans a few years ago and am familiar with the murky waters of managing debt. Therefore, I knew it was important to create a design system that acknowledged the sensitivities of financial planning and appeared to be a thoughtful and approachable guide for users. …


How to integrate Github into your remote design team collaboration process

Image for post
Image for post

As a follow-up to setting up Github repositories for large design files, I wanted to outline the steps to collaboration using Github. Here are the guidelines I try to follow with the Designers that I collaborate with.

  1. Version control
  2. Design File Management
    I store all design file templates, imagery, color palette files, animation files, presentations, user journey files etc.
  3. Collaboration with Designers and Developers

Setting up your repository locally:

Clone the repository

Switch to a new branch

Check that Git LFS is installed correctly and tracking the files:

Ensure the Git LFS is installed
$ git lfs
$ git lfs…

About

Kelly Dern

Designer @Google, teaching with @GirlsWhoCode & @trydesignlab, occasional illustrator

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store