Contact Us — UX Case Study – UX Planet
Part of the Daily UI Challenge #28
Hello! Today’s challenge is to create a Contact Us form.
Where is the form usually used and what is the purpose of it?
Short answer: everywhere!
Purpose? By filling up theform with the necessary details, a user can contact the owner or person-in-charge about a particular product, feature or just about anything related to the site/product.
- Searching for ideas
- Final Product
- Uploading to design communities
- Feedback from fellow designers
Searching for ideas and inspiration
This is really neat. One thing I really like about the design is the title. Instead of writing something generic like “Contact Us” or “Leave Us A Message”, the designer went with this. This is much more inviting and unique. UX writing is just as important as design. I like how interactive the text sounds like. For example, “What are your needs?”
These small elements can bring a new life to the design. I like the layout here, the perfect use of dropdown menus. The mobile version is really neat. It goes perfectly with the web version.
This one is neat too! The illustration is really good but I don’t see any relation or to why it’s used here. I like the addition of the Social Media buttons and I firmly believe that every Contact Us page should have this. Give users more options to connect with you and with the high number of social media platforms now, the reach is greater.
I love how all the elements come together as one design. In many designs, I see this issue where a particular element doesn’t belong in the design. I like the green color choice as aliens are often associated with the green color scheme. The glow on the button is a nice addition too; spooky. Every element in this design has that E.T. vibe including the text.
What all do people look for in a Contact Us form?
- An enquiry form
- Address with Map would be helpful
- Social Media Buttons
- Contact Number
I have divided the contact form into four sections so we can concentrate and perfect each one. This also helps us to determine how much space is required for each section. We want to utilise the space given in the best way possible.
Low Fidelity Mockup
High Fidelity Mockup
This was the first design. A couple of people who I showed this to were not happy with the typography. So I just changed the heading to Apple’s SF Pro since they go well with the Helvetica Neue, which is used throughout this design.
Used different font weights for different types of content, heading — bold, content — regular.
The social media icons on hover, becomes blue. The Idle state is a greyish color.
The “Get Updated on” text does not have bold weight because it’s just a section heading telling users that they can get updated on their social media too. Not as important as the contact information, whose headings are in bold. But it’s good to show this in the contact form.
I made a couple of minor changes to the design. Changed the typeface of all the input text/text that can be interacted with to Helvetica Neue and the non-interactive text to Apple SF. This helps to differentiate between the interactive and non-interactive content a little better.
Made the field heading (Name, Email, and Message) bold to make it more readable.
This was quite a challenging task. There was a lot of trial and error involved. A lot of changes, although minor had to be made along the way.
Reminds me of all the final design, products in this world. How much iterations and changes were made to get it to what we use and experience today. There is no perfect design. We can only try perfecting it. As user’s needs change over time, design trends also change.
This was a quite an adventure and I am glad I took it. I am learning so much analysing other designs and brainstorming why they made a particular design choice. The answer is always there, we just have to work to get it.
Thank you for your time!
As usual, Material Icons — Check it out, its great!
Maps by Google