An in-depth outline of the design process behind EduSmart, as we dive deeper into the ideas of accessibility and user-centricity that have shaped the project.
Interactive Sliding Options for Homepage Dashboard
Outline of the EduSmart UX Design Process
Problem Statement
Online learners often struggle with a lack of structure, support, and motivation—especially when trying to balance flexible learning with real-life commitments.
The solution – EduSmart addresses this by offering a clear, accessible platform that guides and encourages users while adapting to their individual pace and goals.
Designed as a portable, app-based solution optimized for tablets and mobile use, EduSmart supports learning on the go—making personalized, flexible education more seamless and empowering wherever users are.
Diagram outlining the UX Design Process
User Research: Affinity Mapping
In the Define stage, user research insights were synthesized to clearly articulate user needs and establish actionable design goals. This process included affinity mapping, developing a UX research study brief, and creating user stories to evaluate and optimize the EduSmart app’s user flow, ensuring it effectively fulfills its intended purpose.
Refined Affinity Maps organizing user feedback to uncover key insights and patterns that inform empathetic, user-centered design.
UX Research Study Brief
User Research was then collated into a detailed research brief outlining the study objectives, methodology, participant profiles, and key questions. This guided the usability study, ensuring focused insights to inform design improvements.
Document outlining UX Research Study Structure and Objectives
User Stories
User stories were developed based on insights gathered from user research to capture the specific needs, goals, and pain points of learners. These stories helped prioritize features and guided the design process to ensure a user-centered, empathetic solution.
User Journey Storyboard
Shows the full journey of a user interacting with a product or service over time.
UI Flow Storyboard
Visualizes screen-by-screen interaction within an app or website.
User Flow Course Selection Process
1. Browse and Select Course
Users navigate through available courses with clear options to bookmark or compare.
2. Bookmark and Return Later
Bookmark icon allows users to save courses and revisit them easily.
3. Course Comparison
A persistent comparison panel at the bottom of the page helps users evaluate multiple courses side-by-side.
4. Confirm Enrolment Details
Once a course is selected, users review and confirm enrolment information.
5. Complete Course Selection
Finalize enrolment and receive confirmation.
Additional UX Enhancements
> Loading screens improve feedback during data processing.
> Pop-out calendar enables users to select and view enrolment times intuitively.
> Icon states visually indicate the current step or status in the process.
Wireframing
Low Fidelity Prototypes
Wireframing establishes the fundamental layout, navigation, and interaction flow using grayscale and low-fidelity prototypes.
This approach prioritizes usability and structure, enabling quick iteration and user feedback before applying visual design elements.
Visual Design
A cohesive color palette featuring green as the primary color—to evoke growth and calmness—is integrated throughout the app and logo design.
All buttons, icons, and navigation elements were designed and used consistently across the app interface to ensure clarity, accessibility, and a seamless user experience aligned with EduSmart’s brand identity.
Visual Elements
Interactive Design Elements
Mockups
High Fidelity Prototypes
High-fidelity mockups showcase the final visual design, including colors, typography, icons, and layout.
These static representations provide a clear preview of the app’s look and feel, helping stakeholders visualize the end product and guide interface development.
Next Steps: User Testing and Implementation Preparation
Although a fully coded prototype has not yet been developed, the next phase will focus on conducting user testing with the interactive designs to gather feedback for refinement and process design iteration and feedback integration.
Additionally, design documentation of design assets and specifications will be prepared for handoff to developers to facilitate smooth implementation and bring the prototype to life and translated into code in the next phase.
…