♟️ The Challenge: 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 Approach: 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
📱 The Output: A responsive web app that enables both teenagers and parents to instantly chat with a certified Expert.
🕵️ Research & Problem Framing
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.
User interviews
Affinity maps
I trawled through my data, scouring for any patterns or themes. I wrote all the insights onto post-it notes and made affinity maps, grouping related comments together under specific headers like behaviours, thoughts, feelings and goals.
User personas
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.
Task flow
I sketched my perceived process map to help structure the design.
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 |
🏗️ Prototyping & Testing
Mid-fidelity wireframing
I converted my low-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 an efficient 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.”
- 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.“
- The 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:
- New user
- Register
- Welcome screens
- + option to skip Welcome screens
- Homepage
- Existing user
- Sign-in
- Homepage
- New user
- Make two user journey paths:
- 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.”
- 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
- Rewrite 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
Martin Gamble 
3 thoughts on “Talk2Me – (UX Design)”