DIALOG

An MVP for an inclusive learning app that teaches communication skills through real-world experience

My Role

As the sole designer, I worked on all parts of the design process, including user research, wireframes, and visual design. I got my team involved in the process, as we worked in close collaboration to quickly bring our ideas to life.

The Team

1 Designer (me), 2 Developers, and 1 Product Manager

Timeline

1 week sprint (2024)

Project Type

Design Sprint

Skills + Tools

Product Design
User Research
Visual Design

The Task

Identify a challenge faced by neurodiverse people, then create a digital learning tool to help the issue.

This one-week sprint aimed to develop digital solutions for people with disabilities. At the end, we pitched our MVP to key stakeholders, including experts in inclusive learning design and professors in inclusive higher education.

The Problem

In today’s digital world, lack of face-to-face communication is making people lonelier.

This is especially true for people with Autism, who often experience increased difficulty navigating social situations, especially those that occur in person. However, these real-world interactions are key to creating meaningful, fulfilling relationships. So we asked ourselves:

HMW help neurodiverse adults improve their communication skills for a better sense of belonging?

The Solution: Dialog

Build communication skills though real-world experience, self-reflection, and a supportive community.

Practice makes progress

Challenges encourage real-world learning

  • Challenging but achievable tasks give users a sense of accomplishment without overwhelming them

  • Small time commitments encourage regular practice

  • Empowers people to learn in their own way, because every experience is unique

  • Challenging but achievable tasks give users a sense of accomplishment without overwhelming them

  • Small time commitments encourage regular practice

  • Empowers people to learn in their own way, because every experience is unique

  • Challenging but achievable tasks give users a sense of accomplishment without overwhelming them

  • Small time commitments encourage regular practice

  • Empowers people to learn in their own way, because every experience is unique

Strength in numbers

Connect and learn through discussion boards

  • A space for users to discuss their experiences, seek support, and give advice

  • Dedicated discussions for each challenge offer a place where users can bond over shared goals

  • Inclusive profile options and account verification help create a sense of trust

Reflect and grow

Journaling fuels personal development and builds learning habits

  • Reflect on progress, understand accomplishments, and set personal goals

  • Different journaling options allow for self-expression that feels natural

  • Track your growth visually with a calendar that shows your journaling streaks and progress

Learn in moments

Tips provide quick advice to guide your journey

  • Actionable, bite-sized guidance that people can quickly understand and apply during in-person challenges

  • Supports users in learning through action, without taking up all the time with theory instead of practice

Design Process

Problem Discovery

Brainstorming and secondary research narrow down our project focus

The brief—create an inclusive learning app around a neurodivergent challenge—was broad, and there's a lot of things someone might want to learn.

To kick off the sprint, I facilitated a brainstorming session to quickly come up with as many ideas as possible in the short amount of time we had. We conducted preliminary research and talked to a professor in inclusive education.

This led us to a massive problem especially relevant for our main audience: loneliness.

The brief—create an inclusive learning app around a neurodivergent challenge—was broad, and there's a lot of things someone might want to learn.


To kick off the sprint, I facilitated a brainstorming session to quickly come up with as many ideas as possible in the short amount of time we had. We conducted preliminary research and talked to a professor in inclusive education.


This led us to a massive problem especially relevant for our main audience: loneliness.

The brief—create an inclusive learning app around a neurodivergent challenge—was broad, and there's a lot of things someone might want to learn.


To kick off the sprint, I facilitated a brainstorming session to quickly come up with as many ideas as possible in the short amount of time we had. We conducted preliminary research and talked to a professor in inclusive education.


This led us to a massive problem especially relevant for our main audience: loneliness.

73% of people ages 18-22 feel lonely sometimes or always

73% of people ages 18-22 feel lonely sometimes or always

Source: Cigna 2020

People with Autism experience loneliness up to 4x more often than neurotypical people.

People with Autism experience loneliness up to 4x more often than neurotypical people.

Source: Swansea University

Our initial ideation session

Forming strong real-life connections with others is crucial. But effective communication can be even harder for neurodivergent people, who may struggle with reading social cues or maintaining eye contact.

To find out what our users wanted to learn and how they learned best, we talked to them.

User Research

Interviews: Learning about our learners

To understand our target user, we talked to three students with Autism over Zoom. Our semi-structured interviews focused on discovering what helps them learn, how they connect with others, and challenges they face during social interaction.

Our interviews had two goals:

To understand our target user, we talked to three students with Autism over Zoom. Our semi-structured interviews focused on discovering what helps them learn, how they connect with others, and challenges they face during social interaction.

Our interviews had two goals:

To understand our target user, we talked to three students with Autism over Zoom. Our semi-structured interviews focused on discovering what helps them learn, how they connect with others, and challenges they face during social interaction.

Our interviews had two goals:

Concept Validation:

Was loneliness even a problem our target audiences faced?

Was loneliness even a problem our target audiences faced?

Was loneliness even a problem our target audiences faced?

Discovering Opportunities:

How could real learners perspective's help us better address their needs?

How could real learners perspective's help us better address their needs?

How could real learners perspective's help us better address their needs?

Sample interview questions

What motivates you to complete tasks?

Tell me about a time you successfully learned a new skill or built a new habit.

How do you prefer to communicate with others?

We analyzed our interviews based on what strengths our design could take advantage of, and what challenges our design would need to consider. We then created insights based on this analysis.

We analyzed our interviews based on what strengths our design could take advantage of, and what challenges our design would need to consider. We then created insights based on this analysis.

We analyzed our interviews based on what strengths our design could take advantage of, and what challenges our design would need to consider. We then created insights based on this analysis.

Key insights

Staying independent without support from others can be challenging

Our users feel the most empowered when they have a community of other neurodivergent people to give support to and receive support from. However, fake online accounts were a big concern.

Self-reflection in various forms helps personal growth

Our interviewees all found self-reflection beneficial, but each had their own way of doing it. Some went for the traditional writing, while others recorded videos of themselves or posted on their social media.

Routines and accomplishments fuel motivation.

Repeated habits provide a sense of predictability and structure, making difficult or unfamiliar tasks feel more achievable.

User personas

To establish a team-wide understanding of our target audience in the limited timeframe, we created simple, goal-based personas to outline key user needs.

To establish a team-wide understanding of our target audience in the limited timeframe, we created simple, goal-based personas to outline key user needs.

To establish a team-wide understanding of our target audience in the limited timeframe, we created simple, goal-based personas to outline key user needs.

Primary User

Jane Doe
22 years old, student, Autistic

Goal: Improve in-person communication skills and gain confidence in social situations

  • Generally independent but enjoys support from a special ed program, as well as from her friends

  • Lacks ease in navigating social situations, especially in reading body language

  • Enjoys helping others

Secondary User

Bob Johnson
26 years old, marketing specialist

Goal: Gain a sense of community and establish stronger relationships with others

  • Had a strong social life in college, but has had difficulty finding his people after graduation

  • Works remotely, and has limited in-person interactions with others

  • Spends a lot of time online

  • Interested in self-improvement

Our main conclusion from user research was that change comes from practice, so we set out to create a tool to help people improve social skills through real-world experience.

Defining Our Product

Deciding our product goals

We established four goals to ensure that, as we developed our app's core features and flows, the design remained focused on insights discovered during research.

We established four goals to ensure that, as we developed our app's core features and flows, the design remained focused on insights discovered during research.

We established four goals to ensure that, as we developed our app's core features and flows, the design remained focused on insights discovered during research.

Motivate people to practice communication skills in real life

Help people establish routines around learning and self-reflection

Create an authentic and supportive online community

Provide a personalized learning experience that helps people improve specific areas of difficulty

Defining our solution

With our goals established, I led a whiteboarding session to solidify a list of key features—challenges, journaling, discussions, and courses. These 4 core features would interact with each other to create a cohesive learning experience.

With our goals established, I led a whiteboarding session to solidify a list of key features—challenges, journaling, discussions, and courses. These 4 core features would interact with each other to create a cohesive learning experience.

With our goals established, I led a whiteboarding session to solidify a list of key features—challenges, journaling, discussions, and courses. These 4 core features would interact with each other to create a cohesive learning experience.

Sitemap ideation

Initial feature list

User flows

We created user flows to define how people could achieve their goals within the app. We chose user flows that involved multiple features to ensure that the different features interacted smoothly with each other.

We created user flows to define how people could achieve their goals within the app. We chose user flows that involved multiple features to ensure that the different features interacted smoothly with each other.

We created user flows to define how people could achieve their goals within the app. We chose user flows that involved multiple features to ensure that the different features interacted smoothly with each other.

"I want to view the discussion for a challenge to learn about how people accomplished it."

"I want to create a journal entry for a challenge to reflect on my experience accomplishing it."

Wireframes

Paper prototypes get the whole team involved in the design process

To build something informed by the whole team's vision for the product, I had everyone participate in sketching out initial wireframes.

To build something informed by the whole team's vision for the product, I had everyone participate in sketching out initial wireframes.

To build something informed by the whole team's vision for the product, I had everyone participate in sketching out initial wireframes.

Various sketches

Feedback on lo-fi wireframes leads to design changes

After creating on paper, I stepped into Figma to create initial mockups. Due to the short timeframe, we could not set up full usability tests, so we opted for guerilla testing with other people participating in the sprint, as well as from an expert in inclusive education.

After creating on paper, I stepped into Figma to create initial mockups. Due to the short timeframe, we could not set up full usability tests, so we opted for guerilla testing with other people participating in the sprint, as well as from an expert in inclusive education.

After creating on paper, I stepped into Figma to create initial mockups. Due to the short timeframe, we could not set up full usability tests, so we opted for guerilla testing with other people participating in the sprint, as well as from an expert in inclusive education.

Various sketches

Design changes after feedback

Replaced multi-part courses with short-form tips

Long-form courses can be overwhelming and can shift the focus away from real-life learning. Short tips make keeping a learning routine more manageable.

Reduced multistep challenges to a single task

Challenges originally showed a "percent complete." We changed them to shorter, simpler tasks to increase rates of completion.

Added clear affordances to access all challenges

People had trouble finding out where to see all their challenges, current and past. We added a more obvious "all challenges" button.

Visual Design

Designing for inclusion: An accessible interface

To ensure that a diverse range of people could use, enjoy, and benefit from our app, I referenced the Neurodiversity Design System, a set of standards and principles to create accessible learning interfaces.

To ensure that a diverse range of people could use, enjoy, and benefit from our app, I referenced the Neurodiversity Design System, a set of standards and principles to create accessible learning interfaces.

To ensure that a diverse range of people could use, enjoy, and benefit from our app, I referenced the Neurodiversity Design System, a set of standards and principles to create accessible learning interfaces.

Typography

Typography

Aa

Aa

Aa

Open Sans

Open, distinct letterforms make this typeface easier to read for users with visual impairments or dyslexia.

Open, distinct letterforms make this typeface easier to read for users with visual impairments or dyslexia.

Open, distinct letterforms make this typeface easier to read for users with visual impairments or dyslexia.

Colors

Colors

#3127d5

#e6e8ff

#f8f8f8

#ff8d00

All essential functionalities, such as buttons and body text, are compliant with the WCAG 2.0 guidelines for contrast accessibility.

All essential functionalities, such as buttons and body text, are compliant with the WCAG 2.0 guidelines for contrast accessibility.

All essential functionalities, such as buttons and body text, are compliant with the WCAG 2.0 guidelines for contrast accessibility.

Buttons

Buttons

Primary buttons were designed to “look clickable,” reducing hesitation and ambiguity. Buttons also had a large hit radius to make it easier for learners with difficulties in fine motor skills.

Primary buttons were designed to “look clickable,” reducing hesitation and ambiguity. Buttons also had a large hit radius to make it easier for learners with difficulties in fine motor skills.

Primary buttons were designed to “look clickable,” reducing hesitation and ambiguity. Buttons also had a large hit radius to make it easier for learners with difficulties in fine motor skills.

Logo and branding

Logo and branding

I created the name Dialog to reflect both the communication aspect of our app and the journal, or "log," feature.

I created the name Dialog to reflect both the communication aspect of our app and the journal, or "log," feature.

I created the name Dialog to reflect both the communication aspect of our app and the journal, or "log," feature.

Final flows

Completing a challenge

Users create a journal entry after a challenge to self reflect on a difficult experience.

Learning from a tip

Knowledge tests allow users to practice specific skills before using them in real life in a challenge.

Creating a daily journal entry

Users can also start entries from the journal page, but the reminder on the homepage helps keep the habit.

Participating in a challenge discussion

Each challenge links to its own discussion thread, so users can get help or give advice to others.

Sharing neurodiversity to public profile

Users are also asked to routinely verify their accounts to ensure a safe community.

The Results

The final pitch

After our long, busy, and exciting week, we won first prize in the competition for our human-centered approach and unique take on the sprint's challenge.

You can read the article on the sprint here.

After our long, busy, and exciting week, we won first prize in the competition for our human-centered approach and unique take on the original problem.


You can read the article on the sprint here.

After our long, busy, and exciting week, we won first prize in the competition for our human-centered approach and unique take on the original problem.

But even more rewarding than the win was the lovely experience I had working with my team. Coming from completely different academic, professional, and personal backgrounds, the bonds we shared were unexpected and rewarding. I learned that with the right mindset, you can go into a room knowing no one and walk out having created new ideas and new connections with others.

You can read the article on the sprint here.

My team!

Reflection

You can't solve loneliness in one week, but you sure can learn a lot.

Helping others understand not just the design process, but the value of design

I had never been on a team where I was the only designer. This project not only tested my own skills, but also my ability to communicate the importance of design thinking.

I had never been on a team where I was the only designer. This project not only tested my own skills, but also my ability to communicate the importance of design thinking.

I had never been on a team where I was the only designer. This project not only tested my own skills, but also my ability to communicate the importance of design thinking.

Talking to real users is crucial, and is achievable even under a short time frame

Even a quick check-in can offer valuable insights. Stressed under the tight deadline, we almost forgot to schedule our user interviews. We were lucky to find helpful interviewees who also happened to have free time.

Even a quick check-in can offer valuable insights. Stressed under the tight deadline, we almost forgot to schedule our user interviews. We were lucky to find helpful interviewees who also happened to have free time.

Even a quick check-in can offer valuable insights. Stressed under the tight deadline, we almost forgot to schedule our user interviews. We were lucky to find helpful interviewees who also happened to have free time.

Products turn out best when design and development collaborate from the beginning

This sprint wasn't just about creating an idea—it was about making something functional. As the designer, I collaborated closely with our two developers by, well, working one seat away from them. I shared my wireframes and discussed design decisions, while they helped me understand what features would be a higher or lower engineering lift.

This sprint wasn't just about creating an idea—it was about making something functional. As the designer, I collaborated closely with our two developers by, well, working one seat away from them. I shared my wireframes and discussed design decisions, while they helped me understand what features would be a higher or lower engineering lift.

This sprint wasn't just about creating an idea—it was about making something functional. As the designer, I collaborated closely with our two developers by, well, working one seat away from them. I shared my wireframes and discussed design decisions, while they helped me understand what features would be a higher or lower engineering lift.

Thanks for stopping by.

Say hello at lang.delapa@gmail.com
Boston-based, available remotely anywhere.
Resume
LinkedIn
Illustration

Thanks for stopping by.

Say hello at lang.delapa@gmail.com
Boston-based, available remotely anywhere.
Resume
LinkedIn
Illustration