top of page
Mockup_EduApp_devices_V01.png

ETH Edu App

Digital Guidance Meets Real Time Engagement
A multifunctional mobile and web app by ETH Zurich that integrates students’ personal timetables and campus navigation with interactive features like live clicker quizzes, semester feedback channels, and flashcards. Serving as both a digital ETH card and academic companion, it creates a seamless experience blending orientation, participation, and learner empowerment.

Screenshot 2025-07-22 153715.png

Project Contribution

The project was already in an advanced stage, with several high-fidelity mockups created and a significant portion of the budget spent, yet without a convincing result. My role was to consolidate the design, refine the structure, and deliver a final version that was visually, functionally, and technically ready for handoff to the development team.

Design Refinement
Reviewed and improved existing mockups to align with ETH’s UX standards and functional goals.

Developer Handoff
Delivered a clean, structured final UI ready for seamless implementation by the development team.

Visual Consistency
Ensured a coherent visual language across screens, maintaining clarity, accessibility, and brand alignment.

Screenshot 2025-07-22 155049.png

The Challenge

After several years of development and multiple high-fidelity mockups, the project faced significant misalignment between stakeholders. The agency's design proposals were modern and visually refined but did not comply with ETH’s corporate design guidelines, leading to resistance from the internal branding team. At the same time, the development team had already implemented their own version, creating further inconsistency between design and code.

My task was to consolidate all existing materials, listen to the different perspectives, and align the various expectations. Together with the ETH branding unit, I helped define the missing UI elements to ensure design consistency and compliance with ETH’s visual standards.

In addition, many subpages were still missing or incomplete. I structured and designed each screen individually based on functionality and user needs. Although the app had been developed desktop-first, I made it a priority to fully complete the mobile version, knowing that students primarily use their smartphones to manage their schedules and access course information while on the move.

Dashboard - v1.png

Agency Version
Initial design concept developed externally, focusing on bold visuals and brand expression.

390.png

ETH Guidelines
Internal layout framework based on ETH’s design system and responsive grid specifications.

320-479.png

Developer Version
Early technical implementation reflecting feasibility constraints and basic functionality.

MASTER Mobile 360.png

Final Version
My compromise solution balancing visual design, ETH guidelines and technical feasibility.

Simplified Planning through UX

The schedule section was designed with flexibility and clarity in mind. Students can switch between Week, Day List, and Today views, making it easy to manage courses and daily routines. Each course entry includes all key information at a glance and offers direct links to relevant materials or further details. A clean layout and bold ETH CI colors help visually distinguish activities and support fast orientation.

MASTER Desktop 1440-24.png
MASTER Desktop 1440-23.png
MASTER Desktop 1440-22.png
MASTER Desktop 1440-21.png

EduApp Launch and Ongoing UX Improvements

EduApp is now available to students. Feedback continues to be collected in order to improve usability and optimise the overall user experience.

EduApp_Mockup_V02.png
bottom of page