WIREFRAMES

ALL PAGES UI

LOADING

COMPONENTS

STYLE GUIDE

GO TO DESIGN FILE

GO TO DESIGN FILE

View →

WORK PROCESS

ATOMIC DESIGN SYSTEM

About

Contact

Signup

E-LEARNING PLATFORM ''SEEKERS''

User Story: As a user of the website, I want a homepage that provides easy access to all parts of the website, so I can navigate and find the information I need quickly.

Acceptance Criteria:


Navigating to the Homepage:

  • When I visit the website, I should be directed to the homepage.

  • The homepage should load quickly and display all the sections described below.


Header Section:

  • The header should include a logo representing the website.

  • It should have a categories menu that, when clicked, displays a list of available categories. Clicking on a category should redirect me to the page displaying all classes within that category.

  • The mentors option should redirect me to a page showing a list of all mentor users.

  • A search bar should be provided for searching classes by their title.

  • The language switcher should allow me to change the website language between English and Arabic.

  • The currency switcher should open a list of available currencies, and I should be able to select one to view class prices in the chosen currency.

  • If I'm not logged in, the header should display login and register buttons. Clicking on them should redirect me to the respective login and registration pages.

  • If I'm already logged in, the header should display "My Account" option, which, when clicked, should redirect me to my profile page for customers.

  • The pending purchase icon should redirect me to the pending purchase page.




Banner Area:

  • The banner area should display multiple banners in a slider format.

  • Each banner should include an image, title, text, and a button with a target URL. Clicking on the button should redirect me to the specified URL.


Short About Project:

  • This section should provide a brief overview of the project.

  • It should include an image, text, and a button. Clicking on the button should redirect me to the about us page.


Featured Classes:

  • The featured classes section should display a grid of featured classes.

  • Each class should include an image, title, mentor name, price, category (optional), and an enroll button.

  • Clicking on the enroll button should redirect me to the checkout flow page to purchase the specific class.


Trending Classes:

  • The trending classes section should display a grid of trending classes.

  • Each class should have the same information as mentioned in the featured classes section.


Upcoming Classes:

  • The upcoming classes section should display a grid of upcoming classes.

  • Each class should have the same information as mentioned in the featured classes section.


Become a Mentor Banner Block:

  • This section should provide information about the benefits of becoming a mentor.

  • It should include an image, title, text, and a button. Clicking on the button should redirect me to the become a mentor benefits page.


Footer Section:

  • The footer should include the website logo.

  • It should provide links to the about us page, become a mentor benefits page, privacy policy page, terms of use page, and payment terms page.

  • Contact information such as email address, phone number, Instagram, and Facebook should be displayed.


FIGMA USED