Aladwaa Website
UI/UX Design . Illustration . UI development & Animation
Aladwaa website
Aladwaa is an Arabic online educational website that provides e-learning services for students, such as learning materials, interactive exercises, and exams. As well as services for teachers and parents.
![](/_nuxt/img/hero.8d849ee.png)
Ideation
Aladwaa existed only as printed books. Then in the digital era, came the need to create a digital version of this successful book. And came the challenge of creating an online user experience more engaging than the book itself.
How to make the UX of the website more engaging?
To answer this, the team had several ideations sessions. The first idea was to provide services that don't only revolve around the students but also benefit both the teachers and the parents, as eventually, it all contributes to the student's overall performance.
For the student:- Learning materials such as interactive lessons, exercises, and exams.
- Ask Aladwaa. Allowing students to post questions and receive answers from our teacher's team.
- The ability to earn points and redeem resources from the Aladwaa store.
- Entertainment competitions with valualbe prizes during summer vacation and official holidays.
- Create teacher profile.
- Earn points and redeem resources.
- Create interactive learning objects.
- Add children as students.
- Monitor children’s performance.
- Review discussions with teachers.
Wireframes
![](/_nuxt/img/2.3182c3d.png)
Landing page:
Slide 1 - Above the fold
![](/_nuxt/img/Slide1.c16523b.jpg)
Slide 2
![](/_nuxt/img/Slide2.51ee17c.jpg)
Slide 3
![](/_nuxt/img/Slide3.32791f4.jpg)
Slide 4
![](/_nuxt/img/Slide4.cb0453a.jpg)
Navigation:
Default
![](/_nuxt/img/Navigation.66041a3.jpg)
Navigation login
![](/_nuxt/img/Navigation_login.6f9ae2b.jpg)
Navigation loggedIn
![](/_nuxt/img/Navigation_loggedIn.784eb14.jpg)
Navigation notification
![](/_nuxt/img/Navigation_notification.eb41409.jpg)
Navigation search
![](/_nuxt/img/Navigation_search.1e7c0bb.jpg)
Navigation lessons by stage
![](/_nuxt/img/Navigation_Lessons_byStage.c896819.jpg)
Navigation lessons by subject
![](/_nuxt/img/Navigation_Lessons_bySubject.c4ffbc6.jpg)
Navigation lessons special lessons
![](/_nuxt/img/Navigation_Lessons_SpecialLessons.7288c78.jpg)
Navigation exams
![](/_nuxt/img/Navigation_Exams.b82cfa9.jpg)
Pages:
Dashboard
![](/_nuxt/img/Dashboard.d8e5e87.jpg)
Lessons listing
![](/_nuxt/img/Lessons-listing_3jpg.6414060.jpg)
Ask teacher listing
![](/_nuxt/img/AskTeacher_listing.65350ad.jpg)
Ask teacher details
![](/_nuxt/img/AskTeacher_details.2e5dc3e.jpg)
Style guide
![](/_nuxt/img/3.05ca0cb.png)
Visual design
Illustration
Three different illustration created for the main three types of users that uses Aladwaa:
UI design:
![](/_nuxt/img/Home_op1.0855288.jpg)
![](/_nuxt/img/Dashboard_2.e1119c1.jpg)
![](/_nuxt/img/AskTeacher_listing-2.7ddd6ef.jpg)
![](/_nuxt/img/QB_Answer_3.b557287.png)
![](/_nuxt/img/QB_Report.ceb07ab.png)
![](/_nuxt/img/Store_2.d26698d.png)
![](/_nuxt/img/404.af88c17.png)
Thanks for watching
![](/_nuxt/img/aladwaa_competitions_thumb.9bce75c.png)
![](/_nuxt/img/ketapedia_thumb.43955a5.png)