Academy - Online Learning Platform
Academy is an online learning platform designed as part of my training to practice UI design and implement various functionalities in Figma. The platform includes multiple screens like courses, e-books, and job searches, all integrated with interactions and dynamic elements. The project was a hands-on learning experience, allowing me to explore and apply design principles, styles, and prototyping techniques.
Tools: Figma, Adobe Illustrator, Freepik, UnDraw
01
Design Process
Screen Design: The Academy platform was designed to offer a seamless user experience across various features. The screens include:
Home Screen: The home screen was designed with a focus on easy navigation and quick access to key features. It includes options to browse courses, learn about Academy’s offerings, explore mentor profiles, read student success stories, and view job vacancies. The home screen also offers personalized job alerts based on user interests.
Courses Screen: Offers a wide range of courses, including placement-guaranteed and certified courses. Users can purchase, filter, and explore courses based on subjects, view mentor details, and navigate through the available options.
E-Book Screen: Provides an e-library where users can borrow books, view availability, give ratings, and provide feedback. Books are categorized by subjects and ratings, making it easy to find relevant material.
Jobs Screen: Allows users to search for job opportunities tailored to mentors, freelancers, and other roles. This screen integrates with the platform’s courses to help users find job opportunities related to their learning paths.
02
Interaction and Prototyping
Interaction Design: I provided comprehensive interaction between all screens, ensuring a cohesive user experience. Some of the key interactions implemented include:
Simulated Functionalities: While some functionalities are simulated, most interactions are functional, allowing users to navigate between screens and explore different features seamlessly.
Dynamic UI Elements: Implemented various UI design elements such as cards, flipping cards, horizontal and vertical scrolling, drag and scroll, and hover effects on buttons and cards.
Navigation: Designed a top navigation bar with tabs for easy access to different sections. The landing page includes timed banners that change periodically to highlight different courses and offers.
Auto Layout and Grid: Utilized Figma’s auto layout and grid features to ensure consistency and alignment across all screens, improving the overall design flow and user experience.
Component and Variant Creation: Created and used components and variants in Figma to manage UI elements like buttons, cards, headers, and footers. This helped maintain consistency throughout the app and made it easier to apply changes across different screens.
Illustrations: Incorporated illustrations from Freepik and UnDraw to enhance the visual appeal of the platform. These illustrations were integrated with the design to support the platform’s educational theme.
03
Style Guide
Style Guide Development: To maintain consistency across the platform, I developed a detailed style guide that includes:
Typography: Established a hierarchy for headers, subheaders, body text, and captions to ensure readability and clarity.
Color Scheme: Selected a color palette that reflects the educational nature of the platform, balancing professionalism with a friendly, approachable vibe.
UI Components: Defined the style for buttons, cards, headers, footers, and other interactive elements. This guide was instrumental in ensuring a cohesive design across all screens.
04
Learning Outcomes
Design Techniques: This project was a significant learning experience in using Figma more efficiently. I practiced implementing design standards, such as margins, padding, and alignment, and explored advanced features like component creation, variants, and auto layout.
Challenges: One of the main challenges was ensuring the design looked professional while also serving as a practice project. Balancing functionality with aesthetic appeal was key, and I worked hard to refine both aspects throughout the process.
Reflection:
What Went Well: Successfully implemented various UI design principles and Figma functionalities, creating a comprehensive and interactive learning platform.
Challenges Faced: Ensuring that all elements were both functional and visually appealing was a complex task, but it greatly enhanced my understanding of UI design.
Future Improvements: I plan to further refine the interactions and explore additional features, such as integrating payment systems and enhancing the e-book borrowing process.
Next Steps: Continue refining the design based on further feedback and exploration of UI/UX trends.