Personal project

Zwiebel

A web based platform for language learners, created to ease the journey of language learners and provide them with rich and meaningful resources found across the internet.

Challenge

Inspired by my own journey when learning german, I stumbled upon a maze of material at the beginning. With the huge amount of topics, resources, apps and other material it can definitely be overwhelming for any learner, especially beginners.

Objectives

  • Provide a collection of the most helpful resources found on the web in one place
  • Facilitate learning path of its users
  • Make process of learning a language smooth and enjoyable rather than a burden or a chore

Scope

November 2021 -
January 2022

Tools

Google forms
Miro
Figma

Roles

UX researcher
UX Designer
UI Designer

Devices

Web

01. Discover


Competitive analysis

The process was started by looking at the direct and indirect competitors that are available at the moment. By looking at the competition, I would get the gist of what challenges and aooportunities are to be expected. I tried to compare the overall user experience and the features provided.


Given that Zwiebel is intended to be a recollection of resources and features, my initial idea was to gather the most valuable strengths of other competitor apps and have them all in one place.


Surveys

In order to gather both quantitative and qualitative data on potential users, I created and conducted a survey on Google forms.


I gathered 38 responses from language learners online



Key Findings

  • Almost half of respondants (47.4%) have quit learning a language in the past
  • The most popular methods of learning are apps, movies/TV Shows and to a lesser extent Social media and News sites
  • 55% of respondants find the vast amount of resources online to be overwhelming
  • A whopping 71,1% believe their learning routine could be more effective than it currently is
  • Grammar, listening and writing are the skills most people would like to improve on

User interviews

To better understand pain points and goals of language learners, I came up with an interview script and conducteed user interviews among 3 voluntary participants.


Key Findings

  • Useful and accurate recommendations are helpful to filter through the overwhelming available material
  • People like challenge and keeping track of their own progress
  • Learners greatly value immersion in a language as they feel it's one of the best approaches to language learning
  • Their learning routine includes multiple apps, sites and sources online
  • Some expressed frustration about the lack of variety in apps
  • "Anki" is a tool that all participants seem to use and like
  • Having a structured and scheduled learning routine is important to them as otherwise they tend to neglect it without one

As a dinamic person, I want to be able to learn a new language on the go. Jumping from app to app and going through dozens of links I have saved up can be pretty time consuming and dull

-Sofia, 24

02. Define


User Personas

Creating user personas and defining their habits, goals, needs and personalities from the data I collected helped me to stay focused on user's needs throughout the process. The personas range from beginners to advanced language learners.


03. Ideation


Concept mapping

As my first step into the ideation phase, I wanted to visualize all the key elements Ziebel will include and my studied users would find valuable.


MoSCoW Method

Before getting into the early design phase I wanted to prioritize the features and requirements within my project delivery and gaining visual insight on what to work on first.


04. Design


Wireframing

I designed gray-scaled wireframes to have a defined template of the screens. After Receiving some feedback and implementing some changes to the wireframes, I moved on to designing high-fidelity wireframes.


Styling

The goal with Zwiebel is to actually not draw attention to the brand itself, but rather emphasize the content, resources and tools within it.



The real meaning of Zwiebel is "onion" in german so I wanted it's logo to resemble an onion and give it a minimalistic style with vibrant colors. At the same time, it resembles a target board, which depicts the accuracy and precision of learning a language.



Color is used sparingly but purposefully, for emphasis and calls to action.

High-fidelity Wireframe

I chose Yana (My second persona) as the main actor of the mockup sequence


Landing page

Create account

Choose language

Choose language 2

Home page

Video

Reading

Category (Vocabulary)

Community

Language Exchange