Discovery

Identify the user needs

Conducted an informal research among other students to understand their needs and requirements when learning a new language. Compiled a clear list of various needs, which worked as the basis for defining the project’s specific goals.

Run a benchmark

Explored existing websites and apps for language learning. It was particularly challenging finding Arabic language learning references, in order to have examples examples of platforms that effectively managed both left-to-right (LTR) and right-to-left (RTL) text orientations within the same interface.

Define

Feature prioritization

The project stakeholder, the professor, presented exciting ideas for the platform’s future direction, including self-education, gamification, and in-platform grammar correction. However, prioritizing features was essential for the initial version of the platform.

Design

Define the information architecture

The website required content modules for the different learning levels, providing vocabulary, videos, readings, audio materials, and simple quizzes. While the information hierarchy wasn’t too complex, it was crucial to ensure that the content was easy to find and follow.

Start wireframing phase

This is my favorite part: looking the best way to display the contents while addressing the challenge of organizing both LTR text and Arabic script, in both desktop and mobile devices, as well as incorporating pronunciation, translation. and variations such as gender, conjugation, and quantity.

Create the visual identity

The business lacked a cohesive visual identity, so a significant aspect of this assignment involved crafting an engaging look and feel for the platform and its associated materials, including videos and social media visuals. Additionally, to enhance the visual appeal of the content, a library of illustrations was created for use across modules.

Create a design system

To maintain consistency throughout the design, I developed a straightforward design system to ensure coherence in titles, color palette, cards, buttons, and illustrations. Additionally, an illustration system was created within Figma, allowing for easy customization of characters’ appearance and actions.

Validation

Validate with users

As the website is still a work in progress, this task has not yet been executed. However, we have plans to conduct a series of user tests with real users to validate design decisions and iterate accordingly.

Implementation

Front end development

As a front-end fan, I enthusiastically embraced the challenge of constructing the foundational elements of this website using the WordPress CMS. Firstly, due to its ease of use in development, and secondly, with future scalability in mind. WordPress will facilitate the management of student information, login access, and their progress within the platform’s content.