Design Challenge #2: Contact Us
Uijun Park
01. Design Principles
It's always important to set a design principle before designing a product or a service. For redesigning Contact Us page, I used following design principles that can be directly applied. They are already proven design principles in graphic, UX, UI design field.
1. Organize
Organization makes a system of many appear fewer. It makes design simple and neat, less distractive.
Source: Law of Simplicity, John Maeda
2. Less, but Better.
Good design is as little design as possible – because it concentrates on the essential aspects, and the products are not burdened with non-essentials. Back to purity, back to simplicity.
02. Research
2.1. Structure
(1) Analysis
How is it organized?
I found there are 4 elements in the main screen. They are "Title", "Form", "Meet Gigi", and "Live Support."
(2) Problem
1. "Meet Gigi" and "Live Support" is grouped too closely to each other.
Even if their role is different("Meet Gigi" is there for inspiration, "Live Support" is for helping people with video call), they are grouped together. This can make user think that they are same feature. Or user cannot find out "Live Support" feature at all since its size is relatively smaller than "Meet Gigi".
2. Too many things are happening in a small space.
There are 4 elements(Title, Form, Gigi, Live Support) in one page. It is difficult to see what to focus first. So it needs to be reorganized and simplified.
2.2. Contact Us Form
Analysis & Problem
Too many forms to fill in.
I looked at the Contact Us Form and found that there are 10 elements including submit button. It can be overwhelming to users. So, I checked what can be removed among text boxes. I found there are three optional text boxes. And also, user needs to type in Confirm Email Address. These are possible options to remove and make the Contact Us Form as simple as possible.
How might we provide only essential text boxes to users?
03. Reference: Design Style
I used "Homepage" and "Request Free Quote" to make sure my design follows Gigmasters' design style guide.
04. Solution
4.1. Desktop Experience
What has been changed?
(1) Structure
"Reorganized elements"
I separated "Meet Gigi" and Live Support so that users can have clear idea of these two features. Also, I reorganized the elements in the space. Now, user can fully focus on "Contact Us" form first without any other distractions. Then, he will see "Meet Gigi" and "Live Support."
(2) Contact Form
"Less, but better"
I reduced number of forms by prioritizing each text box. I removed optional ones and Confirm email address.
(3) Meet Gigi & Live Support
"Redesign based on style guide"
I reorganized with new location for these two features. Also, I applied Gigmasters' design style.
4.2. Mobile Experience
Regarding mobile experience, I applied what I changed in desktop experience to mobile version. Also, I applied design style guide that Gigmasters is using in "Homepage" and "Request Quote".
