EQ2 App

What is EQ2?

EQ2 is a training program offered by a non-profit called the Lionheart Foundation that empowers direct care staff to build trauma-informed communities for youth. The EQ2 Program trains staff members on how to regulate their emotions and work with at-risk and traumatized youth. Staff members are often working long hours, under threat of violence from the youth, and have to manage triggers from their own previous trauma they have personally experienced.

In partnership with the DALI (Dartmouth Digital Applied Learning and Innovation) Lab, I along with another DALI designer and 3 developers were brought on board to help create the new app in collaboration with the 3 existing volunteer designers working on the project. The Lionheart Foundation wanted to create an app to enable staff to continuously develop and pass-on mindfulness and self-regulation skills, thus improving their well-being in the workplace and beyond as well as that of youth, by:

• Providing them with a toolbox of techniques

• Customized practices and interactive exercises

• Allowing them to track their progress

• Creating a community of practice for support and accountability

In some instances, the app will replace the EQ2 training program if an in-person option is not available.

My Task: Developing the visual identity

I joined the team as a designer for the 10-week spring term. Unlike other projects I have worked on, the initial sketches, design system, and UX was already determined by the partners and designers when I was brought on to the team. I was tasked with developing the visual identity for the app, fleshing out the details of the today page, and conducting user testing on the today page.

Working in a large team with constraints

The partners at Lionheart wanted the visual identity of the app to be modern, calm, and clean, remaining close to the original brown and blue colors of the EQ2 Handbook. Working with existing components, I iterated different color combinations and visuals throughout the screens of the app in order to experiment which visual combinations could be applied to the existing designs. Working in a five-person design team is both an incredible experience and a challenge at the same time. As I gathered feedback from our 5-person design team during design critiques, it became clear that not everyone would agree on the same colors and styles and we had to work together to make decisions in conjunction with partners, even when not everyone was in agreement.

Iteration: Narrow, wide, narrow approach

Given that the screens and components were already created, I iterated on the visual identity within the existing layouts, seeing how the colors and visuals all could interact with one another. I broke apart each section to explore different color combinations and styles. Then I brought all of the versions together into a visual identity matrix, altering one component per row and column.

Major Design Decisions

Colors that speak to a diverse user group

The partners at Lionheart wanted to maintain some consistency between the EQ2 Handbook and the app, remaining close to the blue and brown colors if possible. I started the brainstorming process with a mood board, seeing what works well and does not work well for other mindfulness apps, finding that more muted colors are effective. I aimed to select colors that were calming, positive, and gender-neutral so that the designs appealed to our diverse user group given that the user group ranged from ages 18-60+, all genders and ethnicities.

Distinguishing content types with equal attention

One area where our lead designer and I spent a lot of time workshopping the colors and icons was on the Practice page.  We wanted to distinguish the four different types of content while not drawing more attention to one item or another relative to the rest of the page. I found it difficult to design around the existing components in this screen. Throughout the app we used the SF Pro Icon library, but I found that in this instance having original vector art could add in less of a rigid visual identity so I made all of the vector art shown.

My final recommendation was the tiles below, with a light blue background that is consistent across tiles and does not draw more attention to one tile over the other. Since the background color is light, I made the icons with consistent colored fills to add some visual elements to the more subtle background color.

Creating scalable audio/video previews

The thumbnail previews for the audio and video content needed to have a big enough library for the 100+ content in the app. Initially, I thought vector art could be a simple way to distinguish the previews, but this method was not scalable for the partners once the team is no longer working on the app. I wanted to experiment with using the watercolor images from the handbook to incorporate some consistency from the handbook but the partners were worried that the images may not resonate with certain genders or ethnicities. Images were a much more scalable route, but can be overpowering in color depending on the images used so I applied a blue filter to all images to mute the overwhelming colors.

Incorporating watercolor branding

I still wanted to incorporate some aspect of the watercolor images from the EQ2 Handbook since we got a lot of feedback from users and the partners on how users really liked the watercolors, and it would create more consistency between the handbook and the app. I went through a “go wild” exercise, designing without the constraints that had been discussed in our meetings, taking the designs in a completely different direction to see how else I could explore a less “sterile” looking app. Ultimately, the team decided on incorporating a small splash of the watercolors in the quote of the day and in the background in response to the user testing feedback that is explained below.

User Testing

In order to connect with our users and gather feedback, my DALI partner conducted user testing on our Figma prototype with 10 users over Zoom. Our EQ2 partners reached out to various organizations in order to recruit both staff and facilitators for user testing. We were limited to 15-25 minutes per user testing interview on our today page due to time constraints and access to staff, narrowing down our testing to the check-in and goal setting tasks. The three main takeaways from user testing were:

• The screens were too bland

• Users loved the quote of the day and watercolor

• Users did not engage with Calming mediations section

The Final Prototype

Based on our user’s feedback, I went back and added more color and watercolors to create a less “bland” feeling to the app with the user’s feedback to support my design changes to the partners and design team. In addition, we moved the calming meditations down and today’s quote further up since our users gave the most positive feedback and engagement to the quote of the day.

Key Takeaways

Working on this project helped me further my design skills and learn how to work with a larger design team at a later stage in the product.

• I took a deep dive into the smaller details of visual identity and learned how all the pieces combine into one larger visual identity

• I learned how to work in a larger design team and navigate how to make decisions when not everyone agrees or when the decision is not ultimately up to myself

• I helped bring our team together make decisions and bring the focus back to the bigger picture when there were disagreements holding us back from moving forward as a team

• I learned to balance the partners’ wishes with the user’s needs

• I became more comfortable in moderating user testing under short time frames with a narrow focus

Next Steps

Due to the short 10 week term, our design team was only able to design the staff-facing app. The next steps will be to create a facilitator-facing app and features that will be able to aggregate data inputted by staff members such as mood tracking, goal completion, and app activity to improve the relationship and oversight for the facilitators. In addition, more user testing needs to be conducted on the practice and learn screen since we were unable to test multiple screens given the short time allotments we were given per user.