Onboarding: product preview funnel
Designing a Grammar Cheatsheet
Product Preview Funnel(PPF) is a new onboarding tool of Babbel, we hope the visitors of the Babbel page could register after trying our product demo. The main goal of the project was to replace the previous onboarding demo because of its technical limitation.
When I joined, the v1.0 of the demo was already built directly by our developers directly using the design of the previous platform, as the first designer in the team, I helped the team integrated design and UX research into their sprints and slowly shifted the focus of the project towards a more user-centered direction.
PROJECT
Product Preview Funnel Babbel (Redesign, Desktop interface, Social log-in, Conceptual project)
MY CONTRIBUTION
Product designer working with full stack team and marketing experts
Part of the user flow screenshots (from lesson results page to registration)
a screenshot of Grammar Book feature on production
a screenshot of Grammar Book feature on production
Integrate workflow as the first designer
As the ‘first designer in the team’, besides handling design tasks the first challenge is fitting myself into the workflow. I was lucky to have a lovely team who are open to new changes. Together with my PO Steven, Aria and our Scrum Master Ray, we came up with a workflow and discussed with the whole team.
During the sprint, I support development team if for small design stories, and spend rest of my capacity into communication with all stakeholders and deliver design work for the next sprint.
The product team structure and designer's workflow
Applying new style guide to all platforms
As part of the onboarding experience, the product preview demo should reflect the same experience in the product, the design style guide has been iterated twice and was only based on desktop web, together with our front-end developers, we've defined several breakpoints for our product demo cross all platforms.
Same page design following different design styleguide, envelop icon designed by @Volkan
Adapt mobile web design to different breakpoints sizes
A principle prototype for showing the layout changes with keyboard input on landscape tablet.
Exploring ideas out of scope
The Product Preview Funnel is Babbel's most important onboarding funnel, so even small updates require conversion rate tracking to make sure we won't lose potential users. Since our development team also has many other projects in parallel, so the design improvements and new features usually took a long time to be implemented...
One way to move things forward is to make a concept demo and present the potential feature to others. In one of our internal Hackday, we've formed a cross-department team and developed a more intelligent and friendlier version of the preview funnel, which can provide personalized demo content and learning plan to our users based on their learning motivations.
a prototype demo video made in half hour before the deadline :P
Learnings & Shout-out
I would like to thank everyone in MTech team in Babbel, I had a lot of fun learning and applying agile development methods with them. It was a very important experience for me to understand that how significantly good communication could help optimizing the team productivity.
