Language learning app and responsive website

ReadFort is a service that helps people learn how to read in a new language and keep informed about the news and their favorite topics. 


The problem: Non-fluent speakers face difficulties when trying to read in a new language and trying to keep in touch with local news.

The goal: Design a service that will help improve users’ language skills while helping them to follow local news.

Responsibilities: In this project, I conducted interviews and market research, I determined information architecture, I created paper and digital wireframes, low and high-fidelity prototypes for a mobile app and a responsive website while accounting for accessibility, I conducted usability studies and iterated on designs.

Project duration: January 2023 (1 month)

User research

I conducted research among non-native speakers living abroad to understand the challenges they faced. Most interview participants confirmed market-research by reporting being annoyed by the existing “easy-language” news services which do not provide any help with grammar and vocabulary, and by language-learning platforms that offer limited readings on societal issues. The feedback received through research made it very clear that users would be willing to improve their language skills by reading about local news.

ReadFort’s primary target users include professionals who are not native speakers in their country of residence and have an interested in reading about the news.

User paints points

Access

Users want to read cosily at home or during transportation when the signal is low or missing

Content

Users want to read up-to-date content about society and politics

Progress

Users want to improve on their language skills while reading, especially on grammar and vocabulary

Problem statements

Suzan is an unemployed professional living abroad who needs a way to read content in a foreign language because they like to read local news and want to better understand where they live

Raya is a busy professional who needs a way to read about various topics in a new language because they find reading relaxing and need to improve their language skills.

User journey maps

Design process

I started with the mobile app. I created paper wireframes, digital wireframes, conducted a usability study on the low-fidelity prototype, iterated on the designs before creating mockups, then the high-fidelity prototype, tested the designs again and did a final iteration on the mobile app. Then, I moved to the responsive website, following the same design process. The design tool used in this project is Figma. 

First, Mobile-app

Mobile-app paper wireframes

I started the design process with a pen and paper.

I did a "Crazy Eight" exercise to ideate on paper wireframes. 

In the research, I learned that users want to learn grammar and vocabulary while reading the news. 

To help users improve their language skills, I also wanted to have a "quizz" section for users to test their understanding of the text, and a "sound" option, both for accessibility and to practice listening skills. 

Moreover, a pain point that appeared in the research is that users want to be able to save texts, grammar and vocabulary, so I included an account section where users can find saved items.

Mobile-app digital wireframes

I then moved from paper to screen for the digital wireframes, using Figma. In this step of the ideation process, I focused on 2 aspects: personalized content and specific language lessons

Users can read content that interests them

Users have a news and learning app with some gaming and community experience

To prepare for usability testing, I created a low-fidelity prototype that connected the user flow of selecting a text to read and reading it.

Mobile app's usability studies

I conducted 2 usability studies in this project. The first tested the low-fidelity prototype. The second tested the high-fidelity prototype.

Round 1 usability study on low-fidelity prototype

Moderated 

Berlin, remote

5 participants

15-30 minutes

Findings: 

Mobile app's mockups

Based on the insight from the first usability study, I adjusted the flow to increase usability:

I provided a simplified navigation menu, without the tabs because users found them confusing

I moved the navigation to the top and changed the closing icon to make navigation easier

The high fidelity prototype followed the same user flow as the low-fidelity prototype. I tested the design again.

Usability study

Round 2 on high-fidelity prototype

Moderated 

Berlin, remote

5 participants

15-30 minutes

Findings: 

This high fidelity prototype includes design changes made after the usability study.

With the app design completed, I started designing the responsive website, because one of users' pain points was to be able to use the service anytime, not only on their mobile but also on a tablet or desktop. 

Responsive website

Site map

I created a sitemap to guide the organizational structure of each screen’s design to ensure a cohesive and consistent experience across devices


Website's  mockups

The design for screen size variation included mobile, tablet, and desktop. I optimized the design to fit specific user needs of each device and screen size

Website's high-fidelity prototypes

Mobile

Tablet

Desktop

Accessibility considerations

Initial focus of the home screen on personalized recommendations helps define the primary task or action for the user

Colors and fonts are chosen to improve accessibility

Hierarchy helps navigation

Impact

By helping users learn a new language and engage with the news, ReadFort increases social participation.

Participants in the usability studies shared that the app made reading in a new language more engaging and made it easier to improve their language skills.

Going forward