Knock - the design process

November 1, 2024

Vika Scripps

In response to significant workforce challenges and the demand for a structured career pathway, our client, the Institute for the Advancement of Family Support Professionals (the Institute), has secured funding to develop a learning app for aspiring home visitors. This application aims to enhance competency-based learning, improve workforce retention, and promote diversity in the field.

What is home visiting?

📌 Early childhood home visiting is a service delivery strategy that matches expectant parents and caregivers of young children with a designated support person—typically a trained nurse, social worker, or early childhood specialist—who guides them through the early stages of raising a family. Services are voluntary, may include caregiver coaching or connecting families to needed services and provided in the family's home or another location of the family's choice.

Our mission for this project, motivated by critical issues such as staff shortages and low retention rates, is to create a user-centered app that integrates professional development, connects users with valuable resources, fosters peer support, and simplifies entry into the home visiting profession.

Target Audience

Our app caters to the following audience:
• 🙋 Prospective home visitors considering a career in the field.
• 🙋 Early-career home visitors seeking skill enhancement.

Goals and Objectives

• 🎯 Develop a robust framework for assessing and improving relational competencies.
• 🎯 Create an inclusive career pathway for non-traditional home visitors.
• 🎯 Establish a preservice professional development program.
• 🎯 Increase equity and access to professional development content.
• 🎯 Reduce home visitor isolation, leading to enhanced retention rates.
• 🎯 Expand the availability of data and research on the home-visiting workforce.

In this case study we will focus on brand and visual design explorations for the new app.

Brand and Visual Design Explorations

To meet the client's requirements, we were tasked with building upon the existing branding of the Institute while creating a distinct look and feel for the new learning app. Our goal was to create a cohesive visual identity that would be seen as a "sibling" to the Institute but with a refined and unique touch.

To gain a deeper understanding of the direction we should take, our design team conducted a collaborative brainstorming exercise. This exercise allowed us to explore various concepts and gather insights into the desired aesthetics and associations for the app.

We placed professional and social media platforms, as well as the Institute itself on the grid below. Then, we placed the new application on the grid. This exercise helped us understand that the new app falls on the clean, simple, and friendly end of the scale, with a touch of formality.

As the next step, we developed a list of descriptive words that would best represent the product, as well as a list of words that we wanted to avoid in its association.

With a clearer vision in mind, we proceeded with the style explorations, ensuring that our design choices were consistent with the overall tone.

Round 1

We began the design process by using the Institute's color palette as a foundation. We made modifications and additions to create a more friendly and approachable look. In addition to color adjustments, we explored the use of images, illustrations, and patterns to enhance the visual appeal of the app.

Round 2

After evaluating the options from round 1, we realized that none of them felt quite right. The early versions appeared too heavy and dark and did not convey the friendly and informal look we were aiming for. We decided to further explore one of the options from round one by trying out different fonts, shapes, patterns, and illustrations. Our goal was to find a design that better aligned with the desired aesthetic and mood of the app.

Round 3

Despite our efforts in round 2, we still felt that the styling lacked the desired level of friendliness and approachability. To address this, we continued to play with colors, fonts, and the shapes of the design elements. Our aim was to create a design that would resonate with the target audience and effectively convey the purpose of the learning app.

Final Design

After three rounds of iterations, we reached a design that fulfilled our requirements and effectively communicated the desired mood. While remaining close to the Institute's color palette, the design also possessed its own distinctive identity and a more inviting feel.

This iterative process allowed us to create a visually appealing and meaningful visual design that would resonate with the target audience and convey the purpose of the learning app effectively.

We also explored different illustration libraries and ultimately selected the free and customizable Storyset library by Freepik. This library offers a wide range of image scenarios and allows for customization of colors and elements. Among the various illustration styles offered by Storyset, we opted for Cuate, as it aligns with the overall atmosphere we wanted to create in our app.

We designed our app with a mobile-first approach, aiming to ensure its responsiveness and usability on any screen size. To achieve this, we created mockups for both mobile and web interfaces simultaneously, working towards a cohesive and clear user experience.

Here are a few examples of responsive designs:

Inclusion and Accessibility

Color Accessibility

Before proceeding with any kind of visual design, our team makes sure it’s accessible by checking the color contrasts of all elements early on in the process.

Target Size

We focus on accessibility by maintaining a consistent recommended target size of 44 pixels for tappable components in our products. By adhering to this standard, we make sure that our website accommodates users of different abilities, including those navigating on small touchscreen devices or with limited dexterity. This commitment to larger target sizes significantly enhances the user experience, particularly for individuals who may find it challenging to interact with smaller elements.