03 Glucope
💾 UI/UX



My Role:
Requirement Analysis, Conceptualisation, Design, Front End Development

The Team:
5 Developers

Timeline: 
6 Weeks

Technology:
Adobe XD, Adobe Illustrator
HTML/CSS/JavaScript/MongoDB/ Glucope is a responsive web application developed as part of my third-year bachelor’s project. It features a dual-client interface: one for patients to report and track their glucose levels alongside related health statuses, and another for clinicians to monitor patient care effectively. The application was successfully developed within a seven-week timeframe, showcasing strong time management and technical development skills.

No modern framework technologies are allowed according to subject requirements, all components (graphs, views) are hardcoded.



Business Requirements


    1. Recording and tracking of four clinician-specified health data types.
    2. Commenting on and visualising  data entries.
    3. Access to clinician's "Supporting Messages".
    4. A digital rewards system for motivation.
    5. A leaderboard showcasing the top 5 patients with highest engagement.
    6. Adapt to mobile, tablet and desktop



Patients App
  1. Receive alerts for patients requiring attention based on their data.
  2. Manage individual patient data with tools to specify data types and safety thresholds.
  3. Send supporting messages to patients.
  4. View patient health data.
  5. Write, store, and monitor patient notes and comments on data entries.

Clinician App


Thoughts on Design 



Graphs is the Key

Business requirements cause great data input, graph helps design to keep minimalistic aesthetic.
 


User Engagement

  Consistent data entry is a challenge to manage, design should be engaging, especially for patients 


Developer Friendly

Limited development resources were allocated to the project, hence, the design should be able to cater the human resouces.


Design System


Efficiency
Interface should be efficient and clear
Calm
Colour palette and font should let people feel calm

Accessible
The design should be easy for people to navigate





Patient App: Responsive Design



iPad Version

Desktop Version




Patient App: User Engagement


Copyrights©️ 2025, All Rights Reserved