Graduation Project: Digital Transformation for Eclipse Anime From problem analysis to full implementation using SDLC methodology Done by: Ali Abbadi, Mohammad Abdat , Mahran Abu sir Supervisor: Dr. Ahmad Nobani An Anime-themed E-commerce Platform An-Najah National University – MIS Department Introduction EclipseAnime is a new local store in Palestine that sells anime-themed products like figures, posters, and clothing. It aims to serve the growing anime community with high-quality items and a fun, creative shopping experience. An-Najah National University – MIS Department No website to display or sell products Customers limited to in-store only Weak social media presence No visual content for marketing Problems: Solutions: We built a full e-commerce website Enabled online browsing and ordering Created Instagram & Facebook pages Designed posts using design tools An-Najah National University – MIS Department Our Vision: Our Mission: To become the top anime store in Palestine by combining quality products with a strong digital presence. Offer a smooth online shopping experience. Provide anime items fans love. Share updates and engage with visitors through the website. An-Najah National University – MIS Department Step-by-Step Website Development Using Waterfall An-Najah National University – MIS Department Why We Chose the Waterfall Model The project had clear and fixed requirements from the beginning Each phase was completed before moving to the next It fit our timeline and allowed organized planning The website development had no frequent changes or iterations It’s ideal for small projects with a defined scope like ours An-Najah National University – MIS Department Waterfall SDLC Steps 1 Requirements 2 Design 3 Implementation 5 Deployment 4 Testing 6 Maintenance An-Najah National University – MIS Department Requirements Gathering & Analysis 1 Goal To clearly understand what is required from the website before starting the design or development phase. Project Idea The website is called Eclipse Anime. Its purpose is to offer organized and visual anime content for Arabic-speaking anime fans. An-Najah National University – MIS Department Requirements Gathering & Analysis 1 Target Audience Age group: 13–30 years old Passionate about anime and visual storytelling Interested in browsing anime content quickly and easily Need a website that is simple, responsive, and visually attractive An-Najah National University – MIS Department Requirements Gathering & Analysis 1 We gathered the Requirements by: Analyzing similar websites like Okaeristore Conducting brainstorming sessions within the team Discussing common expectations of anime fans in our region Requirements Gathering & Analysis An-Najah National University – MIS Department 1 Functional Requirements Non-Functional Requirements Display anime details (name, description, image) Enable filtering or searching for anime Provide an attractive and easy-to-navigate homepage Fast loading and smooth performance Responsive design for mobile and tablet Clean, well-structured code for maintainability and performance System Design 2 An-Najah National University – MIS Department We designed the website directly on WordPress, experimenting with different layouts and features. Whenever we found a structure or style that worked well ,we adopted it immediately. This hands-on approach allowed us to shape the site’s design in real time System Design 2 An-Najah National University – MIS Department Admin Control & Content Editing: We managed all content through WordPress admin panel, where we created and edited products, blog posts, and pages manually. System Design 2 An-Najah National University – MIS Department Home Page components for example: System Design 2 An-Najah National University – MIS Department Home Page components for example: System Design 2 An-Najah National University – MIS Department Home Page components for example: System Design 2 An-Najah National University – MIS Department Home Page components for example: System Design 2 An-Najah National University – MIS Department Home Page components for example: System Design 2 An-Najah National University – MIS Department Home Page components for example: System Design 2 An-Najah National University – MIS Department Home Page components for example: An-Najah National University – MIS Department Implementation (Coding) 3 Languages Used: Plugins Used: PHP (Backend) HTML CSS JavaScript MySQL WooCommerce myCred Tidio Chat Insert PHP Code Snippet MailPoet An-Najah National University – MIS Department Implementation (Coding) 3 A. Browsing & Interface Navigation Bar Goal: Helps users easily navigate between main sections of the website, ensuring a smooth browsing experience. An-Najah National University – MIS Department Implementation (Coding) 3 A. Browsing & Interface 2. Product Categories Goal: Organizes products into clear sections (e.g., apparel, posters, keychains), making it easier for users to find what they’re looking for. An-Najah National University – MIS Department Implementation (Coding) 3 A. Browsing & Interface 2. Product Categories: An-Najah National University – MIS Department Implementation (Coding) 3 A. Browsing & Interface 2. Product Categories: An-Najah National University – MIS Department Implementation (Coding) 3 A. Browsing & Interface 2. Product Categories: An-Najah National University – MIS Department Implementation (Coding) 3 A. Browsing & Interface 2. Product Categories: An-Najah National University – MIS Department Implementation (Coding) 3 A. Browsing & Interface 2. Product Categories: We designed the product display layout ourselves, including the background, product arrangement, and category structure, to match the anime theme and create a fun shopping experience. An-Najah National University – MIS Department Implementation (Coding) 3 B. Account & Interaction 1. Sign Up / Login Page: Enables users to create accounts, track orders, and save favorites. An-Najah National University – MIS Department Implementation (Coding) 3 B. Account & Interaction 3. Blog Page Goal: Offers anime-related articles and content to keep users engaged and build a loyal fan base beyond shopping. An-Najah National University – MIS Department Implementation (Coding) 3 B. Account & Interaction 2. Comment on Blog: Visitors can share feedback or interact with blog content publicly. An-Najah National University – MIS Department Implementation (Coding) 3 B. Account & Interaction 3. Comment Moderation System To maintain content quality and prevent spam, all comments go through manual moderation. Users see a message indicating their comment is pending, and we approve it only after review. An-Najah National University – MIS Department Implementation (Coding) 3 B. Account & Interaction 3. Comment Moderation System An-Najah National University – MIS Department Implementation (Coding) 3 B. Account & Interaction 4. Buyer Features: Shopping Cart Favorites Enhance of the shopping experience and decision-making. An-Najah National University – MIS Department Implementation (Coding) 3 B. Account & Interaction 4. Buyer Features: Helps users quickly revisit products they viewed. Improves shopping experience and saves time. Encourages decision-making and purchases. Recently Viewed Items: An-Najah National University – MIS Department Implementation (Coding) 3 B. Account & Interaction 5. Dynamic Shipping-Based Pricing: The product price updates based on the selected shipping location. This helps provide accurate total costs before checkout, ensuring transparency and improving user trust. Shipping cost is added based on location to reflect real delivery fees. 1948 Areas West Bank An-Najah National University – MIS Department Implementation (Coding) 3 B. Account & Interaction 5. Advanced Product Customization – Step by Step: In this feature, users can choose a product and fully customize it by adding images or text. Each element updates the price automatically based on selections. They can adjust size, color, position, and even design the front or back of the item. Available Customizable Products An-Najah National University – MIS Department Implementation (Coding) 3 B. Account & Interaction 5. Advanced Product Customization – Step by Step: Step completed: Product type and device model selected. An-Najah National University – MIS Department Implementation (Coding) 3 B. Account & Interaction 5. Advanced Product Customization – Step by Step: Step completed: Customer uploaded an image. Important notes were submitted to the customer: use high-quality image, background will be removed only. An-Najah National University – MIS Department Implementation (Coding) 3 B. Account & Interaction 5. Advanced Product Customization – Step by Step: Step completed: Email received with content to print. An-Najah National University – MIS Department Implementation (Coding) 3 C. Info & Contact Section The About Us page lets users know more about us. 1. About Us page: An-Najah National University – MIS Department Implementation (Coding) 3 C. Info & Contact Section 2. Contact Us page: Users can reach us on WhatsApp through the link on the Contact Us page. An-Najah National University – MIS Department Implementation (Coding) 3 C. Info & Contact Section 2. Contact Us page: A map was added to show our location and make it easier for users to find us. An-Najah National University – MIS Department Implementation (Coding) 3 C. Info & Contact Section 2. Contact Us page: The page includes our location, working hours, social media links, and contact details like email and phone number. An-Najah National University – MIS Department Implementation (Coding) 3 C. Info & Contact Section 2. Contact Us page: A contact form is available on the page for users who wish to be contacted directly. An-Najah National University – MIS Department Implementation (Coding) 3 C. Info & Contact Section 3. Ask a Question page: Users can ask questions via a form on the Product page. An-Najah National University – MIS Department Implementation (Coding) 3 C. Info & Contact Section 4. FAQ page: Helps users find quick answers before contacting support. An-Najah National University – MIS Department Implementation (Coding) 3 C. Info & Contact Section 5. Live Chat Icon: Real-time support for any questions or concerns during the visit. An-Najah National University – MIS Department Implementation (Coding) 3 D. Marketing & Promotion Features We added marketing tools like discounts and subscriptions to support product promotion. To boost product visibility, attract users, and encourage repeat purchases. An-Najah National University – MIS Department Implementation (Coding) 3 D. Marketing & Promotion Features Email Subscription Flow: Newsletter Subscription – Step by Step No login needed — users can subscribe to emails about new arrivals, helping engage first-time visitors. An-Najah National University – MIS Department Implementation (Coding) 3 D. Marketing & Promotion Features Email Subscription Flow: Newsletter Subscription – Step by Step After entering their email, users immediately receive a confirmation message letting them know they’ve successfully subscribed to our newsletter. An-Najah National University – MIS Department Implementation (Coding) 3 D. Marketing & Promotion Features Email Subscription Flow: Newsletter Subscription – Step by Step after subscribing, users get an email with new updates An-Najah National University – MIS Department Implementation (Coding) 3 D. Marketing & Promotion Features 2. Interactive Quiz Game – Weekly Challenge We added a weekly quiz game for registered users. Each player gets 10 new questions every week. Based on their score, they earn discount points — up to 10% for a perfect score. This feature boosts user engagement, encourages account registration, and rewards loyal visitors through gamified promotions. Gamified Marketing for Engagement & Loyalty An-Najah National University – MIS Department Implementation (Coding) 3 D. Marketing & Promotion Features 2. Interactive Quiz Game – Weekly Challenge An-Najah National University – MIS Department Implementation (Coding) 3 D. Marketing & Promotion Features 3. Volume-Based discounts We applied volume-based discounts on customizable items to encourage users to buy more. The discount increases only when the user reaches specific quantities, which helps boost total sales and average order value. An-Najah National University – MIS Department Testing 4 We used the WAVE tool to improve color contrast and make the interface more user-friendly. Functional Testing We ensured that all website functions work properly, such as subscription, contact forms, product display, and the purchase process. Accessibility Testing Input Validation Testing We verified that email and password inputs follow the correct format, including the "Forgot Password" feature. Performance Testing We tested the website's response speed to ensure a smooth user experience. An-Najah National University – MIS Department Deployment 5 Using Hostinger helped us publish the site smoothly and manage updates, plugins, and backups easily An-Najah National University – MIS Department Maintenance 6 After deployment, we continue maintaining the website by updating plugins, fixing any bugs that appear, and planning for future improvements. Our goal is to keep the site secure, responsive, and aligned with user needs An-Najah National University – MIS Department We hope you enjoyed exploring Eclipse Anime. We’re proud of what we’ve built and excited for what’s next. Thank You for Watching! image1.jpg image2.png image3.png image4.svg image5.png image6.svg image7.png image8.svg image9.png image10.svg image11.png image12.svg image13.png image14.svg image15.png image16.svg image17.png image18.svg image19.png image20.png image21.svg image22.jpeg image23.png image24.png image25.png image26.png image27.png image28.png image29.png image30.png image31.png image32.png image33.png image34.png image35.png image36.png image37.png image38.jpeg image39.png image40.png image41.png image42.png image43.png image44.jpeg image45.png image46.jpeg image47.png image48.png image49.svg image50.png image51.png image52.png image53.svg image54.png image55.svg image56.png image57.png image58.png image59.png image60.svg image61.png image62.png image63.png image64.png image65.png image66.png image67.png image68.png image69.png image70.png image71.png image72.png image73.png image74.png image75.png image76.png image77.png image78.png image79.png image80.png image81.png image82.png image83.png image84.png image85.png image86.png image87.png image88.png image89.png image90.png image91.png image92.png /docProps/thumbnail.jpeg