Full Syllabus

Scientific-medical e-learning application developed for medical students.

Role

UX/UI Designer

Industry

Scientific-medical

Duration

8 months

Full Syllabus is an application designed as an educational tool for medical students. Users can use it to consolidate their knowledge through interactive documentation, scientific graphics, quizzes, and links between key concepts, allowing them to expand and deepen their learning effectively.

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.

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.

The Challenge: Design an intuitive and easy-to-use app for medical 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 ensure this, research teams for the Full Syllabus app identified key needs through interviews and surveys with students. They found that users required quick access to educational content, an intuitive interface, and updated resources. Interactive features like quizzes and simulations were also valued for encouraging active learning. Usability testing and feedback confirmed that the app enhances the educational experience.

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.

User Interface and Visual Design Process

All visual elements of the interface are designed, defining the color palette, hierarchical organization of elements, typography, shapes, and grid layout. The elements are modularized to automate and standardize the design process, enabling greater efficiency and coherence in interface development.

Styles and componetization

Creating modular components and establishing consistent styles to build scalable, cohesive design systems.

Prototype

Design a prototype to visualize and test key features, user flows, and interactions before moving into full development. A well-designed prototype serves as a tangible guide, helping stakeholders and team members align on the vision and functionality of the product. By iterating on a prototype, designers can quickly identify areas for improvement, gather valuable user feedback, and refine the experience to ensure the final product meets user needs and achieves project goals efficiently