Case Study
Babbel
Through world-renowned expertise in e-learning for languages, Babbel stirred its focus towards building a lifestyle experience touched by minimalism. As a Senior Product Designer, I led the design of Babbel Language Learning Apps across iOS, Android and Web since the outset of the project from November 2015 — October 2016.
INSIGHTS
Partnering with three product managers, linguistics, insights teams and user researchers, I helped identify the needs and pain points of language e-learners.
One of the primary issues that popped out was that people easily get overwhelmed and confused during the complex process of language learning, due to lack of guidance in our current product. Based on insights, we reshaped our content strategy with the help of game mechanics to better guide and engage our users through their learning journey.
I facilitated an intensive design workshop where we constructed user journey maps, personas and emotional design principles
I sketched out our users' ideal flow for learning new language content, simply by completing a lesson
DISCOVERY
In the light of our insights and new content hierarchy, my task was to lead design exploration towards a light and playful experience, where sense of accomplishment and learning progress is clear and prominent.
I created moodboards for better inspiration and in-house visibility - aside from attending long hours of brainstorming sessions and design sprints with my design colleagues and other stakeholders. Sketched out many wireframes, designed series of prototypes, and moderated testing sessions with actual users until ensuring a promising experience.
A quick look-back to one of my "kitchen" works that later made to the beta product
I designed a simple and playful way to navigate through courses, chapters and lessons
An excerpt from blueprints I used in order to internally explain the design rationale on course navigation
Different states of lesson introduction views for completed and available (unlocked) learning activities
Annotated blueprint explaining the information architecture of lesson introduction view for a completed lesson
An interaction model demonstrating the new way of discovering languages - connecting the screens
I mainly used Principle and inVision to create quick and "dirty" prototypes
LEARNING & ENGAGEMENT
A perfect discovery would be meaningless, unless there is an engaging and enjoyable learning concept behind it. Thus, I constantly evangelised learners' joy of use and balanced business goals for the sake of learning success.
Collaborating with didactic experts, I designed systems for a personalised and encouraging language learning experience. Tackling conceptual interaction models also helped the team evangelise ideas, gain alignment and drive decision making.
Projection of Dr. Hermann Ebbinghaus' spaced repetition used in Babbel's vocabulary management and notification flows
Personal progress and learning schedule for an engaging and effective experience
Conceptual model I designed for loading and trainsitioning to lessons, inspired by Google's Material Design
Explored and tested different ways of training language learners — puzzle and dialog exercises
Designed abstract interaction models to define joy of use and look-and-feel while learning
ROUNDED PRODUCT
Alongside with the innovative design and development on language learning, users still need to perform usual and vital actions on a (beta) product.
To have a rounded product, I also owned the tasks of designing onboarding, settings, authentication and notifications. Despite sounding quite default, these were, as well, very compelling to design.
I modernised the interaction model of language selection for the new users
I designed a simplified and clean flow for creating a profile, as well as logging in as an existing user
Settings view and a notification design reminding the user to revise his/her recent knowledge (at the right time)
Additionally, I created a UI canvas to help my team see the big picture connecting experiences
AESTHETICS
Rebuilding naturally required us to make our apps more appealing, clean and cohesive. As a strong believer in minimalism and material design, I gladly took the responsibility of redesigning the new look-and-feel.
Working closely with our brand team, I designed a new language system that matches to our brand identity and targets. Taking accesibility into consideration, I designed illustrations and icons for the product, and a new style guide for cross-platform use that consists of typography rules, color schemes, UI components and motion specs.
An icon set I designed for indicating different types of language learning lessons
Excerpt from typography rules — type sizes used in iOS apps
Refreshed colour palette for Babbel apps
Navigation icons used throughout Babbel apps
Excerpt from reshaped user interface components
Next
Idagio