Hangouts
Role UX Designer Year 2021 Tools Figma · Miro · FlowMapp · Zoom Deliverables Research · Prototype · Handoff

A mobile app helping Cairo teens discover and share safe, age-appropriate hangout spots — designed as part of the TFSS (Teen-Friendly Spaces Survey) Audit, a research initiative to understand and improve public spaces for young people.

Further, we also believe that being able to define teens safe and friendly spaces more clearly and putting a score based on this audit, will encourage people and authorities to work towards improvements And to encourage quick response.

Used Tools

The Challenge

I needed to design a mobile application to help understand teens' preferences — what activities and behaviors occurred in their favorite places.

The application would be downloadable by scanning a QR code, tracking the user's location and saving check-in data to the cloud.

Suggested Solution

The "Safety and Friendly Teen Spaces" (TFSS) audit is a tool to understand teens' preferences — their favorite places and reasons — and how teens perceive their environments, through the following objectives:

  • Identify and map teens' preferences in public spaces.
  • Understand the relation between teens' preferences and their psychological and social needs.
  • Discover what activities occurred in those places.
  • Understand the physical characteristics of preferred spaces.

Business Target

Audit Process: “ safety and friendly teens spaces ”

Data Collection Data Audit Data Review

Design Process

Research

Research - Focus Groups

Focus groups started with a 5-minute introduction to understand pain points, mindset, tasks, and motivation.

Phase One

Explore teens' experiences and define personas from behavior and needs.

  • Group 1 (Wed. Jun 24): 5 girls, age 16-17, Zayed and Mohandseen
  • Group 2 (Sat. Jul 11): 4 girls, age 18, Mohandseen

Phase Two

Test prototype usability with the same groups through simple tasks to validate if they can discover suitable places by age in an easy way.

We focused on teens' real experiences in their environment.

Affinity Diagram & Research Synthesis

Interview Notes

Themes and Opportunities

Feature Ideation

Feature Priority

User Persona

Based on focus groups with 9 participants across two sessions, I defined a primary persona representing the core user type.

Story

She is a high school student, looking for distinctive places to hang out with friends, does not like to hang out in the club or routine hangout, searches for special places through Instagram or friends' suggestions, and avoids traditional family hangouts.

She prefers places for adults, away from younger children, and with people closer to her way of thinking.

Goals

  • Fun time / Good mode
  • Explore new places

Wants

  • Excellent decor, quality food and service
  • Activities and hanging around place

Needs

  • Hang out with friends to fight boredom
  • Spend fun time with friends
  • Getting out of the house

Fears

  • Being in a place not suitable for me
  • Being with younger children
  • Different mentality (community)

Malk

Position Student

Interested in Entertainment, Education

Location October, Egypt

Age 17

Daily

  • Food Places
  • Hangout
  • Sport

Often

  • Ice Cream
  • Walk around main place

Seldom

  • Stay at home
  • Crowded places

User Journey - Malk

Design

While Going Through The Research And Analysis Phase,
The Following Goals Were Set Based On My Findings.

User Flow

System map of onboarding, branching auth options, core tasks, and account actions.

Paper Wireframes

Original sketch sheets of the main features and interaction paths.

Paper wireframe — core app entry flow
Paper wireframe — authentication states
Paper wireframe — explore and list architecture
Paper wireframe — add and rate place forms
Paper wireframe — profile and rewards journey
Paper wireframe — final refinements

Style Guide

Design system snippets are kept in this same page for quick reference and handoff.

Color Scheme

#F5B111 Primary
#FAF7F1 Surface
#4F4F4F Text

Iconography

Typography

Montserrat

Aa Bb Cc

Regular 400 / Semibold 600 / Bold 700

Core Components

Buttons
Search & Filters
Search a place
Age 16-18 Cafe Safe Area
Card & Rating
Garden Cafe 4.7

UI Design - Mobile Screens

Logo onboarding screen
Discover onboarding screen
Find onboarding screen
Decide onboarding screen
Help onboarding screen
Explore home map screen
Success points pop-up screen
Favorites list screen
Place rating questionnaire screen
Account profile screen

Usability Test

Sessions were run with screen sharing and task-based scenarios using interactive prototypes. Findings highlighted friction from too many questions while adding a new place.

Repeat

Reduced question overload in Add Place flow, then validated again before developer handoff.

Results & Outcomes

Usability testing with the original focus group participants validated the core flows and highlighted one key iteration.

Usability Test

8 of 9 participants completed the core journey end-to-end on the first attempt. The main friction point was the Add Place form — too many questions in a single screen.

89% task success rate

Iteration & Improvement

After reducing the Add Place questionnaire to a progressive-disclosure flow, re-test completion improved to 91%. Participants described the gamification mechanic (points for adding places) as the feature they were most excited to use.

91% after iteration

“I would actually use this — it’s exactly what I do on Instagram but safer and made for me.” — Participant, Phase Two focus group

This was a research and design project; the prototype was validated in usability testing and delivered as a Figma handoff. The app was not shipped to production.

Deliver

Handoff

Final package delivered with flows, components, states, and implementation notes for developers, including behavior logic for location, scoring, contribution, and moderation responses.