Contact Us Form

Contact Section for "Medical Laboratories" โ˜Ž๏ธ

Excited to share another piece from the landing page I designed for Medical Laboratories! Designing forms is one of my favourite parts of the process. They may seem repetitive, but thereโ€™s always potential to enhance the user experience.

Our goal was to create a seamless and intuitive experience, so we included a few key features:

๐Ÿ‘‰ Company Phone Number & Email: Giving users the flexibility to choose their preferred contact method.

๐Ÿ‘‰ Laboratory Address: Making sure visitors know exactly where to find the lab!

๐Ÿ‘‰ Quick contact form: After thorough discussions, we decided on four essential fields: Name, Email (for our replies), Phone*, and Message.โ€จ

*While we included the phone field as itโ€™s a common communication channel in this industry, we made it optional. After all, not everyone is comfortable sharing personal information.

๐Ÿ’ก Fun Fact: Analysing the siteโ€™s data, we found that users frequently use both the form and the contact details! This highlights the need for diverse contact options.

Accessibility matters

Designing with accessibility in mind was a priority for me

โœ“ High Contrast: I ensure all elements meet the minimum contrast ratio of 4.5:1. This makes text and labels easy to read for everyone

โœ“ Clear Indicators: Each field state (hover, focus, error etc.) is carefully marked, and I didn't rely solely on colour (eg. I added a small icon next to error messages - it really makes a difference!)

โœ“ Precise Labels: All labels are short, clear, and easy to understand, ensuring users immediately know what to enter in each field. They remain visible even while typing, preventing confusion and improving usability.

โœ“ Keyboard Navigation: The form is fully operable via keyboard. I collaborated with the developer, providing guidelines on how the form should behave and be navigable using a keyboard to ensure a smooth and accessible experience.

____________________________________

โš’๏ธ Tools: Figma

๐Ÿ‘ซ Team: Me (UX/UI Designer) + PM + Developer

๐Ÿ’ผ Project: Medical Laboratories

๐Ÿญ Industry: Healthcare

Disclaimer: Due to business reasons, the project has been terminated and the landing page is no longer active.

More by Marta Michalska

View profile