Day 29 of 30 Day UI/UX Design Challenge: Redesigning the Registration Process for Seedlang 🌱

Posted
Tags
UI/UX 30 Day UI/UX Design Challenge
Share
User onboarding and account setup screens for a mobile app, displaying multiple steps with turquoise and white color scheme, progressing from initial registration to selecting language and personalizing settings.

🎨 Today's Design Task

Today, I focused on redesigning the registration process for Seedlang, a language-learning app. The current design isn't very accessible, so my goal was to make it smoother, more engaging, and user-friendly!

🖼️ The Final Design

A mobile app screen asking "What is your German Level?" with three options: "I'm new to German", "I know some basic words", and "I can have a conversation". A cartoon character is displayed at the top of the screen, and a blue "Continue" button is at the bottom.
day 29 challenge redesign complete

This task took me the entire day, and I felt a bit slow at times, but I’m reminding myself to be patient. I used Cari and Janusz—characters familiar to many who find Seedlang through Easy German—as the main faces of the app to make the experience more inviting.

🚀 My Design Process

  1. Research: I started by researching how other apps guide users through the sign-up process.

  2. Style Guide Creation: I created a style guide based on Seedlang’s existing design elements.

    style guide
  3. Component Design: I built components for options, buttons, and the progress bar.

    component elements
  4. Character Integration: I incorporated cute images of Cari and Janusz from Seedlang to add a familiar touch.

  5. Sign-up Flow Adjustment: I placed the email registration screen after the first lesson to prioritise user experience.

  6. Prototyping: I added interactive elements, allowing users to navigate forward, go back, and select options easily.

  7. Animations: I added animations to some of the images to make the process more dynamic.

  8. Feedback and Adjustments: Based on feedback from my partner, I made these tweaks:

    • Adjusted the image animation to align the expanded version at the bottom with the smaller version.
    • Modified the image sequence to small -> expanded -> small for a smoother flow.
    • Simplified screen transitions to keep the progress bar stationary, with only the green progress area moving.

🧠 Challenges and Solutions

  • I felt discouraged by how long the process took, but I pushed through and completed it.
  • The primary colours of Seedlang (light blue and green) didn’t contrast well against black or white texts, so I adjusted them by making the shades lighter and darker, though I’m still not entirely satisfied.

💡 What I Learned Today

I’ve realised I enjoy designing for desktops more than mobiles, probably because I’m faster at it. However, I need to be patient with my learning curve—it’s only been a month since I started taking this seriously!

⏰ If I Had More Time

  • I’d explore different colour combinations to find a more visually appealing palette.
  • I’d experiment with Figma prototypes to refine how the progress bar remains static while other elements move.

💌 Any Thoughts?

What are you working on these days? I’d love to hear your feedback on my design or any tips you might have!

Thanks for following along on Day 29 of my challenge. Tomorrow’s the big finale—see you on Day 30!

With love and light 🫶🏻
Yoshie

P.S. We visited an Asian supermarket yesterday, and I found some super cute designs that inspired me! I’d love to try creating similar art, and I’m dreaming of one day having a HUGE bubble tea like a person has in the design! 😂

bubble tea package

Related articles

The image of the current homepage of Droople's website and Yoshie's redesign of it

Improving Accessibility & UX on Droople’s Website! 💧

👩🏻‍🔬 Accessibility Insights from My Review While reviewing Droople’s website, I identified 23 accessibility and UI/UX issues on the homepage. Of these, 10 could be fixed with design changes, 12 required programming fixes, and 1 involved content editing. Let’s explore how I approached these issues and improved the design! ✅ How I Solved Accessibility and UX Issues 1. Colour Contrast Many text …

Website comparison showing a before and after redesign of the Tell mental health support platform, highlighting a shift from a cluttered layout to a cleaner, more empathetic design with a prominent message of hope and support.

Making TELL Japan Website Accessible and Decluttered 🧹

👩🏻‍🔬 Accessibility Testing Insights During my review of the TELL Japan website, I identified 17 accessibility and UI/UX issues. While 7 of these issues required coding changes, I addressed the other 10 through design improvements. Here's how I tackled them. ✅ How I Solved Accessibility and UX Issues 1. Low Colour Contrast on Buttons and Text: I improved the colour contrast of text and essential …

A laptop and smartphone display a website or digital platform with a retro 70s-style graphic featuring people in vintage clothing against an orange background. The laptop screen shows a colorful title and group of individuals, while the smartphone displays an additional panel with text and another group photo.

Finding Balance Between Fun, Joy, and Seriousness

Designing the Sanat Ensemble website was both a rewarding and challenging experience. The task was to capture the vibrant energy of the 70s whilst honouring Turkish people and other communities who fought for equal rights. I also wanted the design to reflect the joy and lively spirit of their music and performances. Here’s a breakdown of the key struggles I encountered and how I overcame them! 1. …