Medgrocer web page redesign & case study

Case study

I recently joined a UI/UX design apprenticeship program in Kadakareer. KadaKareer is your support system in exploring career opportunities. The program offered a comprehensive curriculum, real-world projects, and mentorship from industry experts. I learned practical skills, developed my design style, and gained confidence in pursuing a career in UI/UX design.

Overview

Medgrocer is an online pharmacy based in the Philippines. They aim to provide easy access to affordable and authentic medicine, health and wellness products to their customers. Due to the current pandemic, Medgrocer wanted to add two new features to their website: booking vaccines and online consultations. They approached a UI designer to help them with the task.

Goals

  • Make it easy for customers to book vaccines and online consultations.

  • Ensure that customers can access the new features easily and quickly.

  • Design a user-friendly and visually appealing interface that reflects the company's values and brand image.

Process

  1. Research and analysis: I started by researching websites offering similar services. I also looked at the existing Medgrocer website to understand its layout, color scheme, and user flow.

  2. Wireframing: I created wireframes of the new pages to be added to the website for booking vaccines and online consultations. I used Figma to create the wireframes and presented them to the Kadakareer team for feedback.

  3. Prototyping: Once the wireframes were checked and approved, prototypes using Figma. The prototypes included the new pages as well as updates to the existing website to make the new features more accessible.

  4. User testing: I tested the new prototypes to ensure they were easy to use and understand. I recruited users from random users and asked them to perform specific tasks such as booking a vaccine or scheduling an online consultation.

  5. Iteration: Based on the feedback received from user testing, I made updates and revisions to the prototypes. I continued to conduct user testing and make changes until I was confident that the new features were easy to use and understand.

  6. Final design: Once the prototypes were finalized, I created the final design files and submitted them to the Kadakareer team for evaluate.

Wireframe

wireframe

Final Output

fullpage

Original webdesign

oldwebsite

More by CHRIS CHAN

View profile