Designing personalisation and onboarding to improve engagement for Gen Z teens
My role
Product Designer
Working with 1 PM & 1 Dev
Timeline
5 months
Tools
Figma, Miro, ChatGPT, Otter.ai
Confidentiality Disclaimer
Some details, including the client and product name, have been edited to protect the client's confidential information.
Client
A social enterprise digitising its personal development services to reach more at-risk youth
A social enterprise, renowned for its personal development programmes and inspirational media that have impacted over 3 million young people. Their programmes equip disadvantaged teenagers with the mindset and skills to avoid crime and unemployment and pursue a positive future. In response to the current youth and knife crime crisis, they are scaling their services through a digital platform to broaden their reach and increase their impact.
Challenge
Design an inclusive, personalised personal development app for at-risk Gen Z
The client is building an iOS mobile app for Gen Z at risk of youth and knife crime, focused on goal-setting and positive content. The challenge is in creating a tailored, scalable experience for users with unpredictable lives, varied goals, and unique personal needs. Engaging these users is also difficult due to low attention spans, neurodiversity, and unstable home environments.
Constraints
The project operated within a limited budget, requiring a lean design approach and a narrow feature scope for the MVP, determined by the Solutions Architect. Designs had to receive CEO approval and be delivered by a strict deadline. The goal-setting framework needed to align with the client’s existing model to avoid copyright issues with frameworks like ‘SMART Goals’. Moreover, limited user engagement restricted the duration and effectiveness of user tests.
Approach
I began with a series of in-depth kickoff calls to understand their vision for the app. In a previous phase, I had orchestrated foundational user research, including over 50 interviews, and synthesised insights into features. At the start of this project, I collected user feedback on low-fidelity wireframes inherited from a previous designer and developed user personas and needs through further interviews. This process identified significant issues with engagement and usability.
To address these, I conducted competitor research and worked closely with the client to design user flows and an interactive wireframe prototype for the MVP, with a focus on the USP—the goal-setting feature. I conducted user testing with these prototypes, which revealed improvements in user experience as well as some usability issues.
After incorporating the feedback and obtaining client approval, I refined the designs into high-fidelity prototypes, integrating brand imagery, colours, typography, and custom copy to ensure alignment with the brand identity. Finally, I facilitated a smooth handover of the design system and prototypes to the Solutions Architect, who led the development of the no-code MVP.
The Focus
Crafting a digital goal-setting experience tailored to the unique goals and needs of each young person
Understanding our users’ needs
We conducted user interviews to gather qualitative insights into users' behaviours, attitudes, and needs. This approach helped me understand their pain points and motivations, providing valuable information to effectively shape the user experience design.
I was responsible for writing the interview questions and synthesising findings into features.
User interviews
We interviewed eight participants, both male and female, aged 14 to 22, including those currently at risk or previously vulnerable to youth crime due to unstable upbringings. Each hour-long session explored their motivations, goal-setting approaches (using card sorting), and ideas for making the app engaging. We also discussed their dreams, aspirations, and challenges when setting goals. These insights helped shape the user personas and key design considerations.
I analysed the interview transcripts using Otter.ai and identified key themes through an affinity diagram. This synthesis highlighted patterns and pain points, including the a lack of knowledge on how to set goals, a need for consistency in working towards their goals, and help in breaking goals into manageable steps to increase the likelihood of achievement.
Who we’re designing for
This is Jerome, a 15-year-old involved with gangs from East London
He wants to escape the poverty he lives in, but…
he doesn’t have a clear, positive path forward so gets involved in gangs to find a sense of purpose and is expelled from school
This is Michael, a 19-year-old college student from Croydon
He wants to get into property to move out of the ends, but…
he’s unsure how to achieve his goal, so he is easily distracted and gets into trouble, though he’s trying to stay focused on his studies
This is Sasha, an 18-year-old ex-gang member from Manchester
She is turning her life around to become a successful entrepreneur, but…
she finds it hard to consistently work towards her goal because of her unstable home life, so hasn’t made much progress
Designing the goal-setting experience
Based on insights from user research and competitive analysis of apps like DreamFora, I began outlining the fundamental user experience using user flows and wireframes. Key considerations included designing for Gen Z with dyslexia, low attention spans, and a preference for highly visual interactions. These factors shaped the user experience to ensure it was relevant, engaging and accessible.
The fundamental user experience
This user experience focuses on onboarding and setting a first goal. Like TikTok, users personalise the app by answering questions about their life stage, dreams, and goal-setting experience, tailoring the support they receive. Following onboarding, similar to Duolingo, users are prompted to set their first goal —the main action and skill we aim to teach. AI then helps them articulate and auto-input the goal's details, including a realistic goal title, due date and motivating reasons. Users can further break down the goal into manageable steps and create a to-do list. Each step is celebrated to reinforce goal-setting skills. The process is quick and intuitive, designed for users with low attention spans. Below is the desired user flow created in Miro.
Design rationale
Personalisation in onboarding
Our research highlighted that users have diverse needs and goals, making it challenging to create a one-size-fits-all model. Goal-setting varies based on the goal type. In real life, personal mentors tailor development plans by understanding a young person's background. The onboarding questions cover age, current situation (education and employment status), dreams & interests (likely shaping their goals), and goal-setting experience to adjust the level of support provided.
AI to cater to all unique needs
A one-size-fits-all goal-setting approach is unfeasible due to the diverse range of user goals and the need for guidance in goal-setting among young people. In real life, youth coaches and personal mentors use their wisdom to help individuals identify and develop their goals through conversation. To replicate this, the app leverages conversational generative AI that responds to user inputs via text (like SMS), assisting users in articulating and identifying meaningful goals.
Wireframing the experience into a testable prototype
Using the user flow outlining the desired experience, I began sketching the screens, which revealed areas for improvement, including the onboarding questions. I then created wireframes in Figma. Due to time constraints, I focused on producing a mid-fidelity wireframe prototype with some basic UI design considerations to be able to user-test it and move through the design process quickly.
The diagram above illustrates the wire flows for the onboarding and goal-setting experiences. It first prompts users for their birthday, name, current situation, dreams, and interests. They then receive a sneak peek of the app and can choose to set their first goal. If they do, they engage in a conversation with the AI personal mentor, inspired by iMessage. A progress bar keeps users informed of their progress through the screens. After the conversation, their input auto-fills the goal template. The app celebrates the creation of their first goal and steps, providing affirmation for completing challenging tasks. Users can repeat this process to break goals into manageable steps and create a to-do list.
Testing the usability of the prototype
From these wire flows, I created an interactive prototype in Figma and conducted six usability test sessions with participants from the user research phase. They were tasked to navigate the app, complete onboarding and set a goal while verbally explaining their thought process, challenges, expectations, and delightful interactions. This helped me identify positive experiences to keep and areas of friction that needed improvement.
Delightful interactions
Below are examples of the delightful interactions users enjoyed during usability tests, along with the rationale behind them and plans to refine these features.
Personalised onboarding experience
Users appreciated the personalised onboarding experience, comparing it to TikTok. They felt the app’s questions would tailor the experience to their interests, which they liked. The length of the onboarding was also well-received, as users didn’t find it too long or tedious. Keeping the process to around five questions, with one question per screen, helped users make quicker decisions. They also liked the variety of interests and dreams to choose from but suggested adding a custom option for more flexibility.
GIF celebrations and affirmations
The GIF celebrations and affirmations did particularly well in testing. After users confirmed their first goal, a bouncy transition brought in a relevant GIF, affirming them with personalized words like "really proud of you" using their name. This feature resonated, especially with one user living in a challenging environment. She appreciated the affirmations, saying they motivated her and provided encouragement she doesn't often get in real life. The surprise element of the GIFs was also a hit, with users wanting to see more of them throughout the experience.
Frictional interactions
Below are examples of interactions that caused friction during the user experience, along with my plan for refining or changing them.
Changing answers during onboarding
At the end of the onboarding, a few users desired to go back and change a response, e.g. a user might input a fake birthday, as they do on platforms like TikTok or Snapchat, and later want to change it. Additionally, the final onboarding screen's call to action (CTA) used the same "Next" label as previous screens, implying there was another step, but it led directly to the guided tour without an option to go back.
To improve this, I will update the final CTA to "Confirm Choices" for clarity and consider adding a back button during the guided tour, as well as the option to edit answers in the Profile settings.
An action plan is needed before committing to a goal
Some users engaged the AI to set a goal but skipped breaking it down into manageable steps, which highlighted the lack of a clear plan for achieving their goals. One user specifically noted they wouldn't feel comfortable committing to a goal without an outline of the necessary steps.
To address this, I’m exploring changes to the AI conversation flow. The AI could guide users through breaking down the goal into steps during the conversation, rather than waiting until after the goal is identified. This ensures users feel prepared to commit and understand how to proceed.
Other actionable insights
Users assumed the AI mentor was a robotic chatbot unable to serve their unique needs, so tended to be apprehensive about using it. They wanted it to feel more human, like Siri or Alexa. Naming the AI to humanise it was a decision left to the CEO. Another insight was that the goal template felt too text-heavy and resembled a form, which was off-putting. Revising the visual design will be important. Additionally, users expressed concern about the AI not understanding slang, which would need to be addressed in the language model later.
Developing an engaging design language
In the user research, I gathered insights into users’ aesthetic preferences and UI design inspiration to help develop the design language for the app. Combining their insights with the client’s branding and established UI design principles, I crafted a cohesive colour palette, typography, and overall tone for the app. This approach ensures the app engages with users and effectively communicates its messaging.
Colour palette
The colour palette features a neutral cool white or black for readability and accessibility, complemented by a mustard yellow that aligns with the client's branding and symbolises positivity and hope—essential for goal-setting. This bold, eye-catching yellow appeals to Gen Z, who prefer vibrant colours (e.g. Snapchat, and Discord) and is used in CTA buttons. A cool blue accent adds calm contrast and is applied to other elements like the progress tracker.
Typography
I chose Nunito Sans, a clear, sans-serif font similar to TikTok's, ensuring readability and accessibility, especially for users with dyslexia. Different sizes and weights establish hierarchy, making navigation easy and content understandable across the app.
Popular culture (GIFs and emojis)
We integrated GIFs and emojis to enhance the app's vibrancy and fun, increasing engagement while catering to Gen Z's visual preferences. These elements make the app more relatable and enjoyable. Additionally, they support dyslexic users by accompanying text, making it easier to comprehend when reading is challenging.
Refining the experience
I integrated design language and usability feedback to create a high-fidelity prototype of the app. This involved applying colours to buttons and refining wireframes, leading to adjustments based on user insights. Below, I outline the rationale behind key design decisions.
Design rationale
Confirming answers during onboarding
On the final onboarding screen, I changed the final call to action from "Next" to "Confirm Profile," to ensure clarity that this is the final stage of the process. I used “Continue" and "Next for the preceding CTAs to indicate outstanding screens. I considered adding a confirmation modal but opted against it to avoid friction since users can modify their answers later. This approach gives users flexibility without feeling locked into their decisions prematurely.
Information architecture of setting goals
Based on user feedback, I redesigned the goal template to look less like a traditional form, including the goal name, due date, category, motivation and suggestions for first steps. I changed the CTA wording to encourage commitment once users understand their goal breakdown into steps. Upon achieving these steps, users can add more with assistance from the AI coach.
Questions asked by AI personal mentor
Based on insights from youth coaches that young people tend not to know their goals, I revised the AI conversation to address edge cases where users provide vague or one-word answers. The AI now guides users to articulate goals, define deadlines, and identify initial steps, offering tailored suggestions before finalising their goals. This improvement ensures a more supportive user experience.
Final product
The Hub: The AI-powered goal setting app for at-risk Gen-Z
I integrated the design language and user experience improvements identified during usability testing to present a final design to the client. The app leverages a conversational AI personal mentor to help young people articulate their unique goals and break them down into manageable steps to help them achieve them.
Personalise your experience
Users personalise their goal-setting experience by sharing their backgrounds and interests. This allows the app to cater to their unique needs, with options to update their information later.
Set your first goal with help from your AI personal mentor
With the assistance of a AI personal mentor, based on real youth coaches, users engage in a conversation to identify their goals and break them down into actionable steps, much like working with a supportive mentor.
Other features
Other features enhance the user experience by promoting consistency in goal-setting, tracking progress, and providing access to motivational resources. Users can also review and manage their goals and personalise their overall experience, ensuring they remain equipped to achieve their objectives.
👋 Get in touch at