How do you make scheduling a medical appointment feel as simple as booking a restaurant? That was the design challenge behind MMC — a full-stack web app built from Figma prototype to deployed frontend, covering every screen and every interaction in between.
Project Overview
Metabolic Medical Center (MMC) is an academic full-stack web application designed to streamline appointment scheduling for a fictional medical center. Patients can create an account, access a personal dashboard to manage their appointments, browse available medical specialties, and update their personal information — all in one place.
The project was built end to end by a team of three — I led the UX/UI design and frontend development, while the backend was handled by a teammate.
Role
UX/UI Designer · Frontend Developer · Academic Project · Team of 3 (2024)
🎨 Design System
A full design system was built in Figma before any code was written — establishing the visual foundation for every screen and component in the app.
- Logo design created for the MMC brand
- Typography and color schemes defined from scratch
- Custom icon set and avatar system
- Button styles with full state coverage — primary, secondary, disabled
- Color palette documented and applied consistently across all screens
Color Schemes
Button Styles
Brand variations of colors and aplications
Brand Horizontal orientation
Icons & Avatars
🚀 Project Features
- A platform functioning as an administrator for a medical center
- Allows patients to schedule appointments through the platform
- Provides access to the catalog of medical specialties directly on the platform
- Enables users to create an account and edit their contact information
- Responsive design built with Tailwind CSS for mobile and desktop
đź’ˇ Screen Design
Every screen was designed in Figma first, then implemented in React.
Home
Register Form
User Dashboard
đź’ˇ Interactive Prototype
An interactive prototype of the application can be accessed here:
🛠️ Technologies Used
Frontend
- Framework: React + Vite
- Language: JavaScript
- Styling: Bootstrap + Tailwind CSS
- Deployment: Netlify
Backend
- Runtime: Node.js
- Database: MySQL
- Deployment: Local
Design
- Figma — design system, wireframes, UI mockups, interactive prototype
✒️ Collaborators
- Marco RamĂrez — Backend Development & Documentation
- MarĂa Paula Cevallos — UX/UI Design, Frontend Development & Documentation
- Franziska Stude — Documentation
Value Delivered
A fully deployed frontend built on a complete design system — from logo to component library to interactive prototype. The app covers the full patient journey: registration, login, appointment scheduling, specialty browsing, and profile management. The frontend is live on Netlify and the architecture is ready to connect to a production backend when needed.
