Health Portal is a platform centralizing medical appointment booking, medical history, etc.

Timeline

2 months

My role

Lead UX&UI Designer

Deliverables

Design system

Color Theme

Typography

Reusable components 

UX design documentation  

After working on several projects for the Quebec government, I've realized that there is an opportunity to build a design system for our projects to ensure the consistency of government interfaces in order to offer citizens a simplified and uniform experience. So I proposed it and made it! ( Some were created based on design guidelines of the Quebec government.)

Color Theme

Color Theme.png

Typography/Desktop

Desktop.png

Typography/Mobile

Buttons

Mobile.png

Buttons

Button.png

Forms

Field.png

Components/DatePicker

I also created the Date Picker component for our projects as we use this a lot.

 

👀 First, I searched to see if there is any existing research, data, and best practice for it. e.g. the research from GOV.UK

🧐 And then I noticed people complain about birthdate filed a lot so I decided to dive deeper to see what's the real user's pain point.

😞 Pain Points

  • Always challenging to select the "year" - it takes users a long time to find their year in the list.

  • Get confused by the format "mm/dd/yyyy" or they ignore it.

🎨 Design

I started designing based on these pain points, and then two design challenges emerged:

  • HMW make this activity MORE effortless?

  • How can we be sure that the user will know what "mm/dd/yyyy" letters stand for?

I tried different patterns such as the drop-down, calendar picker, and text field and tested them.

 What surprised me was that most people prefer typing their birthdate directly rather than scrolling through the list. However, in other scenarios such as "selecting the day when you got your rapid covid-19 testing", users prefer using the drop-down.

 I realized that this is because birthdate is a thing people are already super familiar with and they can type it without even thinking about it - they don’t need to be provided with a list of available options. 

 However, for events close to the current time which people are not that familiar with, they prefer to be provided with a list of available options. - That's the case we need to use a drop-down/calendar picker.

So I decided to use the text field only for the birthdate field and use the text field + drop-down for other fields.

Other design decisions to make it more effortless:

  • Three separate fields for each string - no confusing&pause thinking of format

  • Auto move between fields - no keyboard to mouse switching

  • Number only constraint for Month format

  • Autocorrect format + Hint for format solving leading 0 issue

  • Clear label "Year" "Month" "Date" to reduce confusion

DatePicker.png

Interested in more details? Let's Connect!

Explore other works

Unauthenticated.png
5cb0633d80f2cf201a4c3253.png
RefreshedFailed.png
5cb0633d80f2cf201a4c3253.png

#UXUI #IA

Vaxicode: Vaccination Passport

MVP - Created an authenticated state of Vaxicode - The user can create an account, declare their rapid test results, and edit their account info.

#USER EXPERIENCE 

Coquo

Shipped the design of becoming a member, creating a new user flow and solution.

property_info___3.jpg
5cb0633d80f2cf201a4c3253.png
search_result.jpg
5cb0633d80f2cf201a4c3253.png

#MOTION DESIGN

Propamap

Shipped a contract project to help renters easily find the best places to rent and help landlords post ads effortlessly.