Design for a project for people learn

 how to read other language



FANNEREADING

Project Overview

The product: 

This is a website and app created to help people learn a new language. The objective is to create a platform where you can learn a new language in an easy and intuitive way, 

where the user himself selects the best way he wants to learn a new language. the application's main objective

 is to facilitate the learning of a

 new language for a person who does not speak the









Project duration:







Project duration:

March 2023 - May 2023



March 2023 - May 2023



The problem: 

There are many people in the world with varying levels of education who aim to learn a new language, but many of these people see it as an obstacle: knowing how to start, financial difficulties. The team aims to analyze how to offer learning in another language through online reading.






The goal: 

Create an app and site  as a way to learn to read in another language can be crucial to developing the learning of another language.




My role: 

Lead UX designer, UX researcher and advertise.








Responsibilities: 

User research, wireframing, prototyping.





Understanding the user

Understandig

the user


  • User research

  • Personas

  • Problem statements

  • Competitive audit

  • Ideation

User research: summary


Quantitative research combined with secondary research to assume user needs.

This is a website and app were created to help people learn a new language. Within the application it is possible to select options for help in learning dictionaries, pronunciation and visual aid within the application the user can create his learning scheme, the application wants to offer a learning experience and interactivity.



Quantitative research combined with secondary research to assume user needs.

This is a website and app were created to help people learn a new language. Within the application it is possible to select options for help in learning dictionaries, pronunciation and visual aid within the application the user can create his learning scheme, the application wants to offer a learning experience and interactivity.



Persona 1: ROSE


Problem statement:

Rose is a dressmaker who needs learn a new language to be able to communicate in writing and reading. Because she moved to another country and needs to be able to have more autonomy in her daily life by reading texts in another language.



Persona 2: JULIAN

Problem statement:

Julian is an advertising Who need learning a new language in a different and easier way. Because he wants to be able to read in other languages to help him get promoted in his profession as he speaks better than he reads.


Problem statement:

Julian is an advertising Who need learning a new language in a different and easier way. Because he wants to be able to read in other languages to help him get promoted in his profession as he speaks better than he reads.


Competitive audit

This competitive audit aims to find competitors' products and their market positioning to find ways and
opportunities for an app to learn to read in another language.



Ideation

Here, a small idealization exercise was carried out to get ideas on how to solve problems encountered during the competitive audit. My goal was to focus on finding practical and easy ways to learn a new language.



Starting

the design


  • Digital wireframes

  • Low-fidelity prototype

  • Usability studies

This part offers free access to the user's library, recommended books and bestsellers.



This part offers free access to the user's library, recommended books and bestsellers.


This half of the screen serves as a presentation of the application and instructions for use to improve learning.




This half of the screen serves as a presentation of the application and instructions for use to improve learning.



This part offers free access to the user's library, recommended books and bestsellers.



This half of the screen serves as a presentation of the application and instructions for use to improve learning.




Digital wireframes 

after idealizing and sketching some wireframes on paper, the initial designs for the app were created. This design focuses on introducing users to the first steps in using the reading app, through the user's own choice.

Low-fidelity prototype



Fannereding low fidelity prototype

To prepare for usability testing, a low-fidelity prototype was created that connects the user flow to view materials to start reading within the app.



Low-fidelity prototype



Fannereding low fidelity prototype

To prepare for usability testing, a low-fidelity prototype was created that connects the user flow to view materials to start reading within the app.



Usability study: parameters



Usability study:
parameters



Study type:

Unmoderated
usability study


Study type:

Unmoderated
usability study


Location:

United Kingdom, remote




Location:

Europe, remote




Participants:

5 participants




Length:

35-45 minutes







Usability study: findings





Choose the  way of learning read


People want to learn to read in a new language in an easy and uncomplicated way for learning to be efficient.

Know grammar and pronunciation

People want to know how the grammar and pronunciation of words works so they can learn a new language.

Choose something you like to read

People prefer to read and learn to read in another language when they can define what they want to read and the reading time.



Refining the design


Refining the design


Refining the design



  • Mockups

  • High-fidelity prototype

  • Accessibility

Mockups



Before usability study



Based on insights from the usability study, there have been design changes applied to the main screen for the ''how to learn'' icon with ''+'' symbol and ''read more'' caption to assist users on how to learn more easily the language through hints.



Based on insights from the usability study, there have been design changes applied to the main screen for the ''how to learn'' icon with ''+'' symbol and ''read more'' caption to assist users on how to learn more easily the language through hints.



Before usability study




After usability study




Based on insights from the usability study, there have been design changes applied to the main screen for the ''how to learn'' icon with ''+'' symbol and ''read more'' caption to assist users on how to learn more easily the language through hints.


Mockups



Before usability study



Additional design changes include a more minimalist reading screen option, an option to click on words you want to learn the pronunciation of, and how it applies grammatically in the language that learning is taking place.





Before usability study




After usability study




After usability study




Based on insights from the usability study, there have been design changes applied to the main screen for the ''how to learn'' icon with ''+'' symbol and ''read more'' caption to assist users on how to learn more easily the language through hints.


Mockups



Mockups



Before usability study



Based on insights from the usability study, there have been design changes applied to the main
screen for the ''how to learn'' icon with ''+'' symbol and ''read more'' caption to assist users on how to
learn more easily the language through hints.



Before usability study




After usability study




Based on insights from the usability study, there have been design changes applied to the main screen for the ''how to learn'' icon with ''+'' symbol and ''read more'' caption to assist users on how to learn more easily the language through hints.


Mockups

High-fidelity
prototype


the high fidelity prototype followed the same user flow as the low fidelity prototype including design changes made after the usability study.


Accessibility considerations



Accessibility considerations



Elements that clearly signal commands so that the user can perform tasks within the site and on other devices.. 



The reading screen has accessibility options through voice commands and choice of colors to assist in reading.



There are options to customize learning where the app and website follow the user's customizations.

Responsive Design


  • Information architecture

  • Responsive design

Sitemap

Sitemap

The APP designs were finalized, we started work on building a responsive website. I used the Fannelearng sitemap to organize the layout hierarchically so that the user experience is satisfying and consistent across all devices.



The APP designs were finalized, we started work on building a responsive website. I used the Fannelearng sitemap to organize the layout hierarchically so that the user experience is satisfying and consistent across all devices.



Sitemap

The APP designs were finalized, we started work on building a responsive website. I used the Fannelearng sitemap to organize the layout hierarchically so that the user experience is satisfying and consistent across all devices.



Designs for screen size variation included mobile, apple watch, and desktop.
Designs have been optimized to meet the specific user needs of each screen size and device.



mobile

website

applewatch

Responsive designs




Going forward


  • Takeaways

  • Next steps

Takeaways

Impact: 

Users share with us that learning through online reading is more difficult when you are not able to customize your learning according to your level in the other language.




Quote from a user is that '' My learning must be light and in a way that I understand and evolve as my reading progresses''

What I learned:

I learned that even though the problem was a big problem, the solution would be based on building a good layout and going through the entire design process to align with users' needs to find solutions that are easy for the user to use, workable and provide a good experience during use. .




Accessibility considerations



Conduct more research to find out where the app is most successful and where the biggest challenges for the user still lie.




Add more books to the reading catalog so that users can have more options for learning through reading.





Provide new commands to improve learning, insert more types of reading material.



Let’s connect!


Thank you for viewing my project!! 

If you would like to see more of my projects please get in touch using the contact information below!




E-mail

Behance