Health Portal is a platform centralizing medical appointment booking, medical history, etc.
Lead UX&UI Designer
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.)
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.
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
Interested in more details? Let's Connect!
Explore other works
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.
Shipped the design of becoming a member, creating a new user flow and solution.