Contact Us page redesign

Redesign brief


This page is used as both a support and sales tool and must continue to do both jobs, as well as general enquires.

We will be localizing the content, so if you visit from Canada we will highlight the contact info relevant to you.

The design styles are a little outdated, so refer to our homepage for a more current example of our branding. (Or think outside the box!)

tradegecko old contact page

Old design

Competitor research


Skyvault
  • Contact us message submission form
  • Privacy statement for personal data
  • Subscription requests
  • Promotion of demo services
  • Support Portal link
    • Support Portal page: Guests need to login first to view the content

Privacy statement for personal data
  • Subscription requests
  • Promotion of demo services
  • Support Portal link
    • Support Portal page: Guests need to login first to view the content

Ordoro
  • No contact us page
  • Only a Contact us popup window/modal for basic contact information with Support Portal link
    • Support Portal page: Guest user can view the content
    • Dedicated Search field for customer/user inquiry
    • Categorized subjects/topics with relevant information

Linnworks
  • No contact us page
  • Emphasis on the Support menu on the header nav
  • Contact us is a sub category of the Support menu for basic contact information with Contact number / Email / Find us links
  • Separate Find Us/Support Center/Documentation on the Footer
    • Find Us (/contact url)
    • Shoes the Google map
    • Meet us information of different office addresses and email
    • Telephone numbers

Hublogix
  • Contact us message submission form
  • Call Us information
  • Social Media links
  • Address information
  • Separate Support Center link on the homepage footer:
    • 404 at the time of research

RetailOps
  • No contact us page
  • Address information and telephone number only on the homepage footer
  • Only a Support link on the Company footer list
    • Support page: Third party service used (Zendesk)
    • Dedicated Search field for customer/user inquiry
    • Categorized subjects/topics with relevant information
    • Chat box to leave a message

Challenge


After doing some competitor research, the brand already have the essential “Contact us” elements that may already work for them. Redesigning it may be in a way of having a new approach and execution but still keep the relevant tools for its guest or registered users.


UI trend research

Looked at the following elements to redesign the contact us page:

  • Use of Card UI for categorization (Mobile first)
  • Message box submission form to include country or other optional fields
  • Location and geolocation selection information displayed (Country / Time)
  • Language selection (related to localizing content)
  • Microcopy for younger market segment (Use of local terms/words for culture connection)
  • Use of dummy human element/image in-charge of the Contact us page

(In the end, I decided not to include some of the listed ideas ;)

air asia

Thought of using inverted colored form fields similar to this

air asia

I like the simplicity of this contact page and how the information is centered

air asia

Overlapping graphic on the section cut. Use of cards for their Contact options

air asia

Human shape and centered title

Design Process

Sketching out ideas to see how to integrate and/or replace existing elements with new and trendy elements or layouts. Added the geolocation information for first time users.

user flow sketch

Quick user flow of the Contact page.


Wire framing the hand drawn layout using Sketch App for different screen sizes.

Did a quick explanation of what the platform does for user testing. Did a quick usability test to a few random people (friends and only on mobile view) if the layout work and tweaked/iterated based on their comments and suggestions.

User interface is based from trend research and brand identity from the homepage. Use of isometric elements, angles, and colors.

Some desktop elements may be hidden on the mobile view to maximize screen real estate but still have all the essentials for the contact us page.

I ended up using a pop-up modal since my first idea was to load another page to show the form fields when the user clicked the Sales CTA or the General Inquiry CTA. I first wanted to align them to the function of the Support CTA since the Support has its own dedicated page. It made sense to keep the user on the same opened window if he wishes to continue and send a form.

I also noticed on the live site that there was already a live chat feature. I didn’t place it in the contact us page although it might also be a handy feature if there are a lot of customer care people to handle it. ;)

hifi-prototype

Created the High fidelity mockups in Invision and uploaded Desktop and Mobile screen user flows.

Invision prototype links:

Desktop | Mobile

Let's Chat

I like to work on interesting projects with great people. Let's connect.