Talk2Me – (UX Design)

The Problem

6% of teenagers have experienced depression. 10% have anxiety.
Nobody likes this kind of struggle.
So why do these topics interest us so much? It’s because we can make a difference.

Problem statement: Most of my friends have children and they often share stories of parenting challenges. Answering difficult questions on war, faith, sex, politics and alcohol/drug use. For many it isn’t clear what resources are out there for both teenagers and parents to dip into should they wish to find answers to tough questions. 

The brief: Design an app that enables anyone to instantly chat with a certified Expert. 

I embarked on this project to build an app that could help other people feel better:

  • To provide a portal to certified Experts, allowing the user to connect, message and book 1:1 video calls
  • To give parents and teenagers access to information and resources about difficult topics such as drug / alcohol use
  • To provide tools to help overcome addiction, abuse and other issues through re-establishing communication channels and guided learning

My UX toolkit

Research > Job stories

I carried out a competitor analysis on two apps that offered online counselling services to parents and teenagers. I filtered the information and wrote simple job stories that would be the seeds that grew into the app’s core features. 

Process map:

As a visual thinker, it’s easy for me to see the end result. I sketched my perceived process map to help structure the design.

User interviews

There were magic moments during the user research interviews when an interviewee said something that made my eyes light up. With my best poker face I chose to deviate from my script and delve deeper with probing questions. 

Affinity maps

I trawled through my data, scouring for any patterns or themes. I wrote all the prime comments onto post-it notes and made affinity maps, grouping related comments together under a specific headers like behaviours, thoughts, feelings and goals. 

Key findings

User personas

Personas are a powerful tool for internal alignment to reconcile business, technical and design capacities. It’s common that any new business venture needs to consider multiple demographics and not just one blueprint user.

  • I wrote user personas that summarised goals, pain points and behaviours of a hypothetical subset of users
  • I stuck them on my wall so that I could live and breathe the essence of everyday users
  • I referred to my user personas with every design choice that I made, making sure the decision was came from their point of view and not mine

User journeys

By mapping out a User Journey, I was able to track the emotional changes my users would feel when using key features. I felt close to my User Personas, so it was easy for me to put myself in their shoes and document their perceptions. Additional opportunities bubbled up to the surface that could be developed in later design sprints:

  • Include a feature where a teenager can choose to send their parent a short update on how their learning journey is going
  • Include additional “confidentiality statements” on various screens to reassure the teenager that their information will not be shared
  • Include a progress bar in all questionnaires to promote completion

Task analysis

After creating a task analysis I could clearly visualise the structure of the app screen by screen. These were the key features that met my users’ needs and served as my foundational scope to build the app.

Card sort > Site map

It was unclear to me what the optimum structure of the bottom tab bar of my app should look like. I used optimalworkshop.com to carry out a card sort and laid the first brick of the app’s informational structure.

Key features:85% of participants split the cards into fewer categories:
• Home 
• Account
• Appointments
• Content
• Messages
• Expert
• Payments 
• Learn
• Home
• Learn
• Expert 
• Appointments
• Messages

Mid-fidelity wireframing

I converted my lo-fidelity screens to mid-fidelity wireframes, then developed a high-fidelity prototype. For speed and consistency I purchased a UX design template that provided me with six core layouts that I used to replicate the various screens. I’ve worked with Adobe graphics packages for more than twenty years and enjoyed building over 60 screens for the prototype within a good timeframe.

Welcome screens

Search for an Expert

Book an appointment

Choose a Learning Path

User testing

I conducted a series of moderated, remote usability testing sessions. I discovered new things about my app from other people and recruited testers from across three continents to ensure a cross-cultural response. 

The benefits of remote testing:

  • Easier to recruit an optimum range of participants
  • Less pressured to attend in person with zero travel time
  • Attain an international / cross-cultural response

Affinity mapping

User testing – what needs fixing

“When I search for an Expert, I don’t know if this is for a parent or a teenager.”

– User Tester
  • The app allowed either parent or teenager to search for an expert, but didn’t offer a unique experience that provided for their individual needs
    • Suggested Change – HIGH PRIORITY
      • Add a detailed questionnaire when a new user registers in order to provide personalised content
      • Use personal pronouns and change the wording
        • Parent
          • Search for an Expert for my Teenager / My Teenager’s Expert
        • Teenager
          • Search for My Expert
      • Include a profile avatar on the homepages to show who’s logged in
    • Evidence
      • 3 out of 7 participants displayed confusion when faced with the search page. They questioned which role they were supposed to be searching as

“If I’m already registered, then I don’t need to see the Intro screens again.“

– User tester
  • V1 prototype gave an impression of what it is like to log-on for the first time. The test script asked the user to sign on with a username and password, as if they were a registered user. This meant that they did not need to view these screens again
    • Suggested change – HIGH PRIORITY
      • Make two user journey paths:
        1. New user
          • Register
          • Welcome screens
          • + option to skip Welcome screens
          • Homepage
        2. Existing user
          • Sign-in
          • Homepage
    • Evidence
      • Even though only one person spotted this mistake, it was essential to make this change for the logical flow of the app and to show the user experience of both a new and existing user

“I feel confused because there are so many filters to choose from.”

– User tester
  • I tried to design the Search screen to be super-clear, fast and intuitive. The more inclusive features I included, the busier the layout became
    • Suggested change – HIGH PRIORITY
      • Redesign the filters page
      • Keep the search bar on the main page
      • Move all other options within the filters button
    • Evidence
      • This suggestion came from an experienced UX designer and it made sense to make this change. I showed some testers both versions and they agreed that the simpler version was easier to navigate. A great learning curve!

Design System

During my career I’ve authored complex style guideline documents for companies such as First Direct, HDC Media and ASDA. These documents have evolved along with the digital universe into the form of Design Language Libraries. I’ve worked as a graphic designer, developer and facilitator and used this combined knowledge to create a detailed document to enable anyone to create on-brand and consistent screens and experiences.

Accessibility

Accessibility always has and always will be important to me. I first learned about inclusive design back in 2000 when I worked in the e-commerce department of England’s first telephone bank. 

  • Considerations:
    • Descriptive tool-tips for all images that accurately describe the story and feelings of what’s displayed
    • Ensure it’s easy to flow through the screens using the tab key
    • Design with a contrasting colour palette
    • Ongoing considerations for future potential voice recognition

Hi-fidelity prototype screens

Project summary

  • What opportunities remain for future improvement?
    • Gamify the learning paths in order to increase the desirability of the app for teenagers
    • Engage with schools and local governing bodies to build content that runs in parallel with the curriculum, including a network that aligns parents on their approach to topics
    • Re-write all copy so that the user journeys for both parent and adult have a unique tone of voice that communicates to that user group
    • Build a more comprehensive questionnaire that determines the type of therapy that would most suit the user
  • Key learnings:
    • Reading the original design brief each morning before starting work. I’d recommend reading this out at least once a week in any Scrum stand-up meeting
    • Sticking the user personas up onto the wall above my workstation as a reminder to read these regularly. I found that by doing this maintained the essence of who the users are, how they do things and what they want
    • Leveraging my EQ talents and self-taught psychology topics to acquire emotionally based research data that serves as the building blocks of good UX design

About me

I’m Martin Gamble, a SDN Accredited Service Design Practitioner with a background in design-, operations- and project management. I’m originally from England, have lived in Germany for 8 years and am currently working remotely in Berlin.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s