Skip to content
ALEX REYES
MANILA PH

Making online medicine ordering easier to follow.

An apprenticeship proposal with annotated audits, responsive wireframes, and a UI library. No production outcome is claimed.

View the design file
My role
UX audit, wireframes, and UI library
Timeline
2023
Collaborators
KadaKareer Virtual Apprenticeship
Original MedGrocer typography library
Original MedGrocer color library
Material Design icon selection in the MedGrocer library
Undraw illustrations selected for the MedGrocer library

Problem

Medicine ordering needed a clearer sequence.

The apprenticeship audit examined how the landing page, prescription upload, and medicine selection explained the ordering process. The original annotations identified opportunities in hierarchy, spacing, and button clarity.

Scope

Move from an annotated audit to reusable foundations.

The work included a UX audit, responsive wireframes, a revised prescription-ordering sequence, and a UI library. It was a KadaKareer Virtual Apprenticeship proposal, rather than a commissioned or shipped MedGrocer redesign.

Audit

Find the friction before changing the visual language.

The audit examined the landing page and the steps for uploading a prescription and adding medicines. The annotations focused on hierarchy, spacing, and button clarity. One proposal moved prescription upload later in the journey, changing the sequence as well as the presentation.

Original MedGrocer landing page before the audit
Original proposed MedGrocer landing-page wireframe
MedGrocer medicine search, shopping cart, and prescription-upload wireframe
MedGrocer mobile medicine-search wireframe

Foundations

Carry the decisions into a reusable interface.

The work extended into mobile, tablet, and desktop wireframes, supported by an Inter-based type system, a color palette, and reusable UI foundations. The file also included a suggested QA checklist. The library brought the proposed visual decisions together for reuse across screen sizes.

Original MedGrocer typography library
Original MedGrocer color library
Material Design icon selection in the MedGrocer library
Undraw illustrations selected for the MedGrocer library

Reflections and impact

A clearer ordering proposal and a shared visual vocabulary.

The apprenticeship produced annotated audits, responsive wireframes, and a library covering type, color, icons, and illustrations. These are design outputs; the proposal has no confirmed production outcome.

The work addressed the sequence of ordering before consolidating the visual foundations. Keeping those two decisions connected made the proposed interface and its supporting library easier to explain together.

MedGrocer medicine search, shopping cart, and prescription-upload wireframe
MedGrocer mobile medicine-search wireframe