<?xml version="1.0" encoding="utf-8"?>
Open full project

TeamUp Onboarding

Brand Overview

In today's tech landscape, many developers aspire to collaborate on projects but often struggle to find suitable partners and mentors. Working exclusively with beginners can be challenging and less effective, highlighting the importance of experienced guidance for success.

TeamUp addresses this challenge by providing a platform where developers can connect with peers and mentors. The goal is to foster a collaborative environment that enhances learning. TeamUp promotes teamwork, skill development, and valuable mentorship, cultivating a community where knowledge is shared, skills flourish, and projects thrive through cooperation.

For this design brief, I focused on designing for Android devices. Let's delve into the process.

User Onboarding Flow

The onboarding process in the TeamUp mobile app consists of three steps:

  1. Fields of User Interest: users are prompted to select their fields of interest from various options such as Mobile, Design, Web, Cybersecurity, AI, Game, and Data Science. This customization tailors learning content to their preferences.
  2. User Level of Experience: users are asked to indicate their experience level by selecting one of three options: Beginner, Intermediate, or Expert. This information ensures that content matches their skill level
  3. Role or Job Title: users are prompted to enter their job title, clearly defining their role in the tech world. This personalization helps in tailoring the learning path according to their professional background

These elements collectively introduce users to the application's services and guide them through the signup process.

Visual Design

I utilized the Material 3 mobile design system, incorporating components, colors, and typography.

The visual design of the user onboarding flow is clean and modern, employing a minimalistic approach with ample white space to enhance readability and focus. The predominantly white background allows the black text and purple accents to stand out distinctly. Icons representing each field of interest are simple yet effective, maintaining visual coherence with a consistent purple color theme.

Navigation elements like the "Next" button are prominently displayed in a vibrant purple color, ensuring easy visibility and inviting user interaction. Rounded buttons contribute to a soft and approachable aesthetic. A progress indicator at the bottom of each screen uses small purple dots to indicate the user's current position in the onboarding process.

Obstacles and Confusion During the Design Process

In terms of content, I'm designing for an MVP and still uncertain about the necessity of the onboarding process. How essential is onboarding for the project, and at what stage does it become crucial?

Regarding visual design, I'm also deliberating on the use of controls at the top (return and skip) and the optimal placement of the progress indicator.

I'm eager to hear your insights on these matters. Thank you.

Share your insights — leave a project review and help others grow their skills

Reviews

3 reviews


Great work Mohamed !

  • In the second screen, having a differentiation in icons for the different levels would help. Here, at a glance, I don't know what's the difference without reading the text.
  • In the third screen, having an autocomplete or a select would greatly help out for any type of statistics on that field, whereas data entered freely would be difficult to manipulate.

Other than that, I love your stepper at the bottom, everything is clear, accessible and makes sense for me.


I’m really digging the color scheme and project description. The steps are simple and accessible, but also super functional for the business because as it carries the collection of user information, not just showing off the app's features.

Agree with previous comments.

I'd suggest tightening up the CTA copy on the last screen. Something like "Create Account" or "Start Exploring" would make it clear to the user that onboarding is done and they’re moving on to the next step.

Good luck!


The design is visually appealing with a clear, modern layout and good use of color contrast for readability. The onboarding process is intuitive, guiding users step-by-step. 

Improvements :

In the screen of describe your experience , try to differentiate between levels by using descriptive icons to enhance clarity and accessibility.


21 Claps
Average 4.2 by 5 people
5 claps
4 claps
3 claps
2 claps
1 claps
<?xml version="1.0" encoding="utf-8"?>