Edumize - Educational Platform
Educational Platform for Interactive Learning
Overview
Edumize Educational Services is an agency dedicated to assisting students in their journey to study in Malaysia. Committed to providing a seamless and stress-free experience, Edumize offers personalized consultations, expert advice, and tailored solutions to help students choose the right educational program in Malaysia. The Edumize website serves as a digital platform to showcase the agency's offerings, provide essential information, and engage with prospective students. The website's main feature is an extensive catalog, a comprehensive database encompassing details about universities, institutes, and study programs, catering to the needs of prospective students. The website is currently undergoing beta testing and is available in both Arabic and English languages.
Keywords
Product Design, User Experience, UI/UX Design, Web Development, CMS Integration, Animation, Design System, Multilingual Support, Catalog Database, Interaction Design, Webflow
Current Status
The high-fidelity design phase is complete, and the website is actively being developed on Webflow. The website is currently in the beta testing phase, incorporating user feedback for further refinement.
Design Tools
Figma (Design), Webflow (Development)
Team and Collaborations
- Product Designer (Ahmed Kamal (me)): Responsible for creating the user-centric design, wireframes, and high-fidelity prototypes.
- Webflow & Web Developer (Ahmed Kamal, Nizar Haidar, Maad): Responsible for translating the design into a functional website using Webflow.
Live Site
Challenges
1. Engaging Young Demographic: Designing a playful and visually appealing website that resonates with the agency's young demographic while maintaining a professional tone.
2. Easy-to-Use CMS: Integrating a user-friendly Content Management System (CMS) that allows the client to update information and content without technical expertise.
3. Seamless Animation: Incorporating eye-catching animations that enhance the user experience without compromising page load times.
4. Multilingual Experience: Ensuring a seamless and engaging user experience for both Arabic and English-speaking visitors.
5. Design Consistency: Developing a design system that ensures visual consistency and allows for easy scalability as the website evolves.
Solutions
1. Vibrant Visual Design: I opted for a vibrant color palette, playful typography, and custom illustrations to create a youthful and engaging visual identity.
2. User-Centered Information Architecture: The website's navigation and structure were meticulously planned to ensure easy access to essential information and services.
3. Webflow CMS Integration: The website was developed on Webflow, providing the client with an intuitive CMS to update content, add new pages, and manage resources.
4. Subtle Animations: Delicate animations were strategically implemented to enhance user engagement and guide visitors' attention without overwhelming the browsing experience.
5. Multilingual Interface: The website was designed with a focus on multilingual support, offering a seamless transition between Arabic and English content to cater to the client’s targeted audience.
6. Design System Implementation: A comprehensive design system was established, encompassing typography, color schemes, UI components, and interaction patterns for consistent design implementation.
Research
User Research
A detailed user persona was developed based on insights from prospective students and the client who provided an indepth insight through his experience. This persona guided design decisions, ensuring the website's content and features align with users' needs.
User Persona of targeted audience member
Market Research
A thorough analysis of competitors' websites in the education and consultancy sectors provided insights into design trends, user expectations, and opportunities for differentiation.
Market competitors
Design Process
Wireframe Development
The design process began with wireframes that laid out the website's structure, content hierarchy, and user flows.
Wireframing the university applcation steps page
High-Fidelity Prototyping
Figma was used to create high-fidelity interactive prototypes that showcased the visual design, animations, and user interactions.
High Fidelity design examples
User Testing
Usability Testing
A group of prospective students interacted with the interactive prototypes to evaluate the user-friendliness, navigation, and overall experience.
Feedback Incorporation
Insights from user testing were integrated into the design to refine user flows, improve navigation, and optimize user interactions.
Conclusion
The Edumize Educational Services website design journey involved in-depth research, meticulous design iterations, and user testing to create a visually captivating, user-friendly, and informative platform. By addressing challenges such as engaging a young demographic, seamless CMS integration, and multilingual support, I crafted a digital presence that aligns with Edumize's mission of providing excellent education consultancy services. As development progresses and the website transitions from beta testing to full launch, the high-fidelity design will be brought to life on the Webflow platform, empowering Edumize to make a positive impact on students' academic journeys. The established design system ensures the website's future scalability and adaptability, enabling ongoing improvements based on user feedback and emerging design trends.
Colors & Typography of the Design system