Learn languages while reading your favorite books

four screens of the lingoshelf app

Project Overview

figma icon adobe illustrator icon adobe photoshop icon
  • User Flow
  • Low-Fidelity Wireframes
  • Usability Testing
  • High-Fidelity Wireframes
  • Prototyping
  • Mockups

The Background

As a passionate language learner myself, I've encountered numerous challenges and setbacks on my language journey and I understand firsthand how daunting it can be to transition to native materials. When learners begin to gain confidence with their study materials, delving into books aimed at native speakers can feel intimidating and it often shows them how much there is still to learn. This often leads to negative emotions such as overwhelm and insecurity. To prevent these feelings, it's essential to help learners ease into native reading materials and seamlessly merge language learning with the joy of reading.

Problems
  • Switching between the book and an external dictionary can disrupt the reading flow.
  • Evaluating a book's difficulty solely based on its cover or summary can lead to a frustrating experience when the level doesn't align with the learner's current language skills.
  • While reading is an effective way to passively grow your vocabulary, translating this into an active learning experience can be daunting and tiring, often diminishing the enjoyment of reading.
Solutions
  • Implement a built-in dictionary to look up words directly while reading.
  • Display the difficulty level for each book so that learners can better evaluate if the book matches their skill level.
  • Offer a built-in learning opportunity that uses sentences from the books users have read, enabling users to learn in context.

Defining the Direction

Asking the right questions

To gain a deeper understanding of the design requirements, I started by defining the 5WH questions. These questions helped me initially identify my target audience and the key functionalities that should be implemented in the app.

Who is the user?
  • Intermediate and advanced language learners
What kind of tasks and goals will user achieve?
  • Users will improve their language skills through immersive reading of authentic content.
  • Users will actively practice newly acquired words.
How will the users achieve their goals?
  • Users can access e-books matching their language proficiency and interests.
  • Users can look up and save word meanings while reading.
  • Users can practice new vocabulary with exercises or flashcards.

Understanding the user flow

Utilizing the functionalities defined during the 5WH questions, I created 4 different user flows representing the necessary steps for users to achieve their goals. In addition to the onboarding process, I outlined user flows for the book search, word saving during reading, and vocabulary flashcards.

I then translated these user flows into low-fidelity wireframes, highlighting essential elements to ensure a smooth and user-friendly experience throughout the app.

Start/End

Screen

Decision

Onboarding Flow

The User Flow for the Lingoshelf onboarding process
Low-Fidelity Wireframes of the Welcome Screen
Low-Fidelity Wireframes of the Sign Up Screen
Low-Fidelity Wireframes of the Login Screen
Low-Fidelity Wireframes of the Create Profile Screen
Low-Fidelity Wireframes of the Home Screen
Key Point

For a quick and easy onboarding the users can sign up with their social media accounts, select the language they want to learn and easily start to read their first book.

Book Search Flow

The User Flow for the Lingoshelf book search process
Low-Fidelity Wireframes of the Explore Screen
Low-Fidelity Wireframes of the Book Details Screen
Key Point

Searching for a book should be simple and intuitive. Books can be searched via the explore page and users can easily access book details.

Word Save Flow

The User Flow for the Lingoshelf word save process
Low-Fidelity Wireframes of the Reading View Screen
Low-Fidelity Wireframes of the Word View
Key Point

It should be easy and intuitive to look up words while reading. A small pop-up screen shows the translation and users can save words in their flashcards.

Flashcard Flow

The User Flow for the Lingoshelf word save process
Low-Fidelity Wireframes of the Vocabulary Overview Screen
Low-Fidelity Wireframes of the Flashcard Front View
Low-Fidelity Wireframes of the Flashcard Back View
Key Point

From their vocabulary list users should be able to easily access their flashcards.

Low-Fidelity Wireframes of the Flashcard Back View

From Planning to Visual Design

Refining the Wireframes - From Low-Fidelity to High-Fidelity

The wireframes I initially created, based on the user flows, were minimal, focusing solely on essential flows and functionalities. Through further iterations, I refined the screen layouts and developed a visual style for the app. Given that the app aims to create an immersive environment for language learners to focus on improving their skills, the visual design is intentionally minimal and unobtrusive, allowing users to concentrate on their reading content without distractions.

Uncovering Usability Problems

With my high-fidelity wireframes, I created prototypes to test with users and collect their feedback for further improvements. The user tests revealed that users had difficulties understanding the flashcards correctly. They were unsure how to input, receive feedback, or evaluate their answers using the colored buttons. Since this presented a significant usability issue that could result in a poor user experience, I iterated on ideas to better inform the user about what was happening.

Problem 1

Users were uncertain about the input method and how to receive feedback on their answers.

Screen that shows the first usability problem
Solution 1

I added the text 'Tab to reveal the answer' at the bottom of the screen to cue users to flip the card and reduce ambiguity.

Screen that shows the solution for the first problem
Problem 2

Users were unsure about the purpose of the colored buttons on the bottom on the screen.

Screen that shows the second usability problem
Solution 2

To address this issue, I introduced two distinct solutions to improve the flashcard experience at different stages of the flow.

Screen that shows the solution for the second usability problem

User testing revealed that not everyone is familiar with SRS-based flashcards. That is why I decided to introduce an additional screen to explain SRS when users access their flashcards for the first time.

Screen that shows the solution for the second usability problem

The second solution mirrors the approach taken for the first problem: I added a cue directly on the screen to remind users of the buttons' functionality.

Creating an Immersive Learning Experience

Learn languages by reading your favorite books

Lingoshelf offers a huge library of literature in a variety of languages. Users can search for books that match their language skills and interests for an enjoyable learning experience.