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

Goal:

Create a 3-screen onboarding journey to:**

  • Introduce MeDo’s purpose and benefits.
  • Make users feel safe and excited to sign up.
  • Provide a quick and frictionless start.

Understanding the User:

  • Primary Users: First-time mobile users, exploring digital internet services.
  • User Needs:
    • Clear and visual explanation of MeDo’s value.
    • Minimal input and fast access.
    • A welcoming, modern app experience.

Onboarding Screens Breakdown:

  1. Welcome to MeDo
"Olá, conheça o MeDo!"
🍓 Fruit elements symbolize freshness, simplicity, and a natural connection. The user is welcomed and introduced to the app’s primary function: secure and simple internet point transactions.
  1. Start Now
"Comece agora!"
🧪 The lab beaker represents technology and innovation. This screen invites users to sign up and start using MeDo, emphasizing ease of access.
  1. How It Works
"Como?"
🌿 A green circular leaf icon with arrows showcases sustainability and smart usage. It explains that users can accumulate and spend points to navigate the internet.

🎨 Visual & Interaction Design:

  • Theme: Deep teal gradient with a premium, secure vibe.
  • Illustrations: Bold, 3D-style vector graphics to visually narrate key features.
  • Typography: Clean, legible sans-serif font suitable for all ages.
  • UX Flow:
    • Horizontal swipe navigation.
    • Progress indicators.
    • "Skip" option to reduce friction for return users.

🧪 Testing & Feedback:

  • Usability tested with new users (ages 18–35).
  • Preferred version: short text with strong visuals.
  • Improved retention by offering the “Next” and “Skip” options clearly on every screen.

✅ Outcome:

The final onboarding experience:

  • Visually introduces MeDo in under 15 seconds.
  • Increases user understanding of features.
  • Encourages registration through a modern and engaging approach.
Share your insights — leave a project review and help others grow their skills

Reviews

6 reviews


wow what a cool color combination, look so good! Great job. If you look for improvement I personally think that the illustration you pick could be more smooth and well edits.


This onboarding flow is on the right track. It feels visually polished, easy to navigate, and has a clear tone that fits MeDo’s purpose. You’ve handled a tricky concept — buying and selling internet access — and made it feel light, safe, and inviting. That’s not easy. The visual language is doing a lot of heavy lifting here, which is a smart move considering the audience.

The deep teal gradient sets the tone well. It gives off a sense of security without feeling corporate or cold. The illustrations pop nicely against that background — they're bold, clean, and each one carries a metaphor that’s easy to grasp at a glance. The fruit splash, especially, sets a friendly and organic tone right from screen one.

The copy is short, which is good. But I’d push for just a little more clarity and persuasion in a few places. For example:

  • "Cadastre-se para utilizar o MeDo" is technically correct but lacks pull. You might want to say something like "Crie sua conta grátis e comece agora" — it’s friendlier and gives users a small win instantly.
  • On the last screen, "Use pontos acumulados no MeDo para navegar pela internet" could be reframed as a reward, like "Ganhe pontos e navegue sem custo". It’s clearer and more user-first.

Here are a few other thoughts that could help elevate this:

  • Text contrast: The body copy feels a little light, especially on smaller screens. Consider bumping up the font weight or colour contrast for better legibility.
  • Spacing alignment: The third illustration (green arrows and leaf) seems slightly closer to the top edge compared to the others. Minor, but it does affect balance when swiping through quickly.
  • Progress indicators: They’re functional, but they don’t add much character. Maybe a subtle animation or stronger highlight on the active dot would give them more presence.
  • CTA hierarchy: “Skip” and “Next” are there, which is great — but if you want to guide first-timers more intentionally, making “Next” slightly more prominent would help move people forward.

Overall, I like where this is going. It respects the user’s time, communicates a complex product in a digestible way, and keeps the tone friendly and modern. A few copy refinements and some polish on spacing and interactions, and this could feel even more premium.


Key improvements:

  • Stronger Headlines: More benefit-oriented and engaging.
  • Concise Body Text: Focuses on the core value proposition.
  • Clearer CTAs: More action-oriented and consistent.
  • Enhanced Visuals: Suggestions for subtle animations to improve engagement.
  • Emphasis on Benefits: Highlights the "why" for the user (earn rewards, sustainable access).
  • Streamlined Flow: Ensures a smooth and frictionless experience.

By implementing these revisions, you'll create an onboarding journey that is not only visually appealing but also highly effective in driving user understanding and adoption of MeDo.


Hi Maham,

I recently went through your “MeDo” onboarding flow on Uxcel, and I wanted to offer some feedback. Overall, your work is visually appealing and thoughtfully structured, but there are a few areas where refinement could enhance both usability and communication.

What Works Well:

1. Clear Targeting and Purpose:

You’ve done a great job addressing first-time mobile users. The onboarding flow is intuitive and doesn’t overwhelm with information, which is important for this audience. I especially liked how each screen introduces a benefit or feature rather than focusing only on app functionality.

2. Consistent Visual Style:

Your use of vibrant 3D-style illustrations and playful fruit elements adds personality and freshness to the interface. It supports the app’s goal of making digital tools feel less intimidating, and the consistency helps with cognitive flow.

3. Navigation and Progress:

The horizontal swipe pattern with visual progress indicators is well-executed. Including a “Skip” button is smart—it gives users control and caters to more experienced users who want to dive in quickly.

Suggestions for Improvement:

1. Text Hierarchy and Readability:

Some of the text could benefit from better hierarchy. For example, titles vs. descriptions sometimes blend together. Slightly increasing contrast or font weight could improve scannability, especially for older users or those unfamiliar with apps.

2. Microcopy Tone:

While the tone is friendly, a few phrases could be even more user-assuring. For instance, explaining what will happen next or reassuring users about privacy can build more trust during onboarding.

3. Accessibility Considerations:

It would be helpful to think about accessibility—like text size scaling, color contrast for color-blind users, and screen reader compatibility. These aren’t always part of visual UX case studies, but showing that you’ve considered them adds a lot of value.

Final Thoughts:

This is a solid onboarding flow with great visual storytelling and a clear user-focused approach. With a bit more refinement in text design and accessibility thinking, it could be even more effective. Great work overall!


Perfect


Good to look different approach illustration in onboarding screen.


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