Graduation project: collaborative learning app design

Revolutionizing the educational ecosystem with a mobile app designed to enhance interactive learning and peer collaboration.

Role

UX/UI Designer

Industry

EdTech

Duration

4 months

My role

I was responsible for designing the structure, interaction flow, and information architecture. My goal was to create an intuitive user experience, ensuring that navigation through the different sections of the app was simple and smooth. This involved defining the content hierarchy, organizing the navigation, and developing flow diagrams that guided the creation of an interface tailored to users' needs. Additionally, I focused on the more visual and tangible aspects of the design to achieve an experience that was both engaging and functional.

Experience Strategy & Vision
I developed frameworks and prototypes to communicate the vision, design principles, and content strategy of the Full Syllabus app. This facilitated the dissemination of ideas and helped in making informed decisions.

Planning & Scope Definition
I defined the product in close collaboration with my project management partners. I prioritized and negotiated key features for both the initial launch and future updates.

Oversight & Coordination
I collaborated with other designers to ensure that product features were effectively translated into the app's context.

Design Execution & Validation
I designed by executing journeys, wireframes, prototypes, and design specifications.

Images of the project

The Challenge: Design a digital platform for efficient access to medical knowledge for students.

With the digitalization of education and the declining use of textbooks, MIT (Massachusetts Institute of Technology) proposed creating an educational app to structure essential medical knowledge. The aim is to develop an intuitive and user-friendly application that allows medical students to access information efficiently.

To address students' needs, the research teams conducted interviews and surveys, identifying key priorities for an optimal learning experience. Students expressed a strong interest in having updated resources, flexible learning options, and an intuitive interface that allows efficient access to content. They also highlighted the importance of personalized assessments and progress tracking as essential features to support individual development. Feedback from usability testing confirmed that these interactive elements enhance the educational experience, fostering an engaging and adaptable learning environment.

Design Process and Information Architecture

In this project, as it involved an e-learning app with highly technical and specialized content, the content teams (scientists, doctors, and medical experts) and the design teams worked closely together from the earliest stages to create the information architecture. The content team developed materials in script form, while the user experience team structured the information in a clear and accessible way for students.

Content team documentation

Information architecture

With all the documentation provided by the content team, the next phase involved structuring the information into low-fidelity wireframes and designing the initial screens. This allowed us to conduct internal tests that helped refine and define the user experience.

High-fidelity wireframes

With the content and app structure validated, we moved on to building high-fidelity wireframes to optimize navigation. This allowed us to develop screens with real components, spacing, grids, font sizes, and well-defined structures, establishing a solid foundation for the app’s final interface design.

My role

Oversight & Coordination
I collaborated with other designers to ensure that product features were effectively translated into the app's context.

Design Execution & Validation
I designed by executing journeys, wireframes, prototypes, and design specifications.

Images of the project

The Challenge: Design a digital platform for efficient access to medical knowledge for students.

Design Process and Information Architecture

Content team documentation

Information architecture

High-fidelity wireframes

Stage 1. User Research

Engaged with over 100 students and educators through online surveys, in-depth interviews, and virtual focus groups to gather comprehensive insights into their learning habits, preferences, and frustrations with current educational tools. This exhaustive research phase highlighted the need for more interactive and collaborative learning solutions, leading to the development of detailed user personas representing the app's target audience.

Stage 2. Ideation & Conceptualization

Led creative workshops involving stakeholders and fellow designers to brainstorm innovative features that address the identified needs. Mapped out several user journey scenarios to visualize how users would interact with the proposed features, fostering a collaborative environment and promoting engagement through gamified learning experiences.tead, algorithms and logic-based solutions ought only provide humans with better insight so as to empower us to arrive at better solutions, faster.

Stage 3. Design Execution

Wireframing: Developed over 60 wireframes for various app screens, meticulously planning each element of the user interface to ensure intuitive navigation and a seamless learning experience. These wireframes served as the foundation for the app's structure, focusing on facilitating easy access to educational content and interactive features.
Prototyping: Utilized advanced features in Figma to create interactive prototypes, enabling realistic user interactions. Conducted live prototype demonstrations to stakeholders, providing a tangible sense of the app's look and feel, as well as its functionality.
UI Design: Crafted a visually appealing and accessible user interface, selecting a color palette that promotes concentration and creativity, alongside typography that improves readability across various devices. Integrated feedback from stakeholders to refine the UI, ensuring that it not only looks appealing but also aligns with educational goals.
Stage 4. User Testing & Iterations

Organized a series of remote user testing sessions, employing both qualitative and quantitative methods to evaluate the app's usability and effectiveness in fostering collaborative learning. Analyzed feedback to identify patterns and areas for improvement, leading to several design iterations that enhanced user engagement and satisfaction.

Stage 5. Final Presentation and Documentation

Prepared an in-depth presentation and comprehensive documentation detailing the research findings, design rationale, user testing outcomes, and the iterative design process. Highlighted the app's potential to transform the educational landscape by making learning more interactive, engaging, and collaborative.