Designed for web application

48 hour remote design challenge

Applications used: Adobe XD

Problem Space

As concerns over the Coronavirus (COVID-19) continue to grow, healthcare systems around the world are experiencing unprecedented strain as they race to provide care for the rising number of sick patients.

Secondary Research


Maple Logo.png
Patient Access.png

“The efficiency of being able to book an appointment with your physician online, from your desk, or to do an email exchange, or refill your drug and have it available at a local pharmacy, there are tools that enable that can and should be encouraged by the employer. It drives massive productivity, wellness and happiness,” 

says Wattling

How might we?

How might we help people to efficiently communicate with healthcare professionals in order to keep people safe within the constraints during Covid-19?




Think out load.jpg
Crazy 8 2.jpg
Crazy 8 1.jpg

Task Flow Sketches

Patients can open a web link and book an online meeting with doctors. Users have the option to see the availability for different doctors on the same page.


Open link within a web browser

I made the assumption that David has completed his onboarding process and is ready to use the web application

After signing in David is directly taken to his profile where he can view appointments, prescriptions and account information


David is ready to book an appointment and is taken to the 5 step guide. Nr. 1 being selecting a type of appointment ranging form; video, phone-call to in person appointment

Secondly David needs to choose if the appointment would be for him or someone else

Thirdly David will now select his type of practitioner, symptoms, date, time and finally the Doctor he likes best


Forth, David will confirm his appointment with the correct provided information

Fitfh, David will provide any payment information

 Lastly, David is able to view his appointment and reschedule it at anytime

Gray Scale Wire Frame and Ideation

When designing the first grey scale wireframe it was important that when the customer was creating a booking that visually all of the needed elements of the booking was on one page. Making this booking system easy, fast and simple.  

Web 1920 – 8.jpg

After designing and testing my first wireframe I received some helpful feedback from my user testing. It was clear that I needed to improve my hierarchy and eliminate some unnecessary content that would clean up the application throughout. I changed the design to a more rounded and organic look to keep the application modern giving it a peaceful look and feel. I also made the 'Select a Dr." in a card format so that the card can easily adjust to your conformation card that all needed infomrtaion is easily changeable if need be.


High Definition Wire Frame

I used blue, because it is easy for the eyes to process and is often connected with nature. Blue is a peaceful, refreshing color that fit this brand well within the medical field

I used a lot of shadowing to create a simplistic and soft look and feel, so that the user is not overwhelmed. I also incorporated round shapes to create a smooth and flowing application


Key Learnings

1.Test early test often


2. Plan out beforehand how you will proceed with your project especially when you are under a time constraint

3. Never stop doing secondary research

Next Steps

1. I would like to look and explore the receiving end of the practitioners. How they would receive the appointments.

2. I would also like to explore how they would be notified and prepare for the meeting beforehand


3. I would also like to explore the on-boarding section within the application