Redesigning Helpful Support and Contact for Inquiries

My Role

STAT News' Contact page is based on an outdated Wordpress template that is in need of an update. The contact form is meant to act as a comprehensive form for outlining any and all reasons a reader would have to speak directly with a representative, however, it's overall architecture has lead to a lack of engagement.

‍My role was to evaluate the old contact page, and reconstruct a new, more engaging Information Architecture and User Interface.

Research

The Research

I began by outlining and evaluating every possible function on the Contact page. This included the modifiable contact form with every option, as well as the included mailing address, and links to email First Opinion Article submissions and redirect to the Team page.

It was important to evaluate what each task is accomplishing, and reorganize them to better suit how each task can be grouped.

‍

Goals:

How many base options are there for subjects of contact?
How is each option similar or different from the rest?
How does each option modify the rest of the form fields?
At what point in the online experience would a user want to contact and why?
How easily can a user's reason for contact be anticipated and solved beforehand?

‍

Discoveries

I discovered the best way to approach the redesign was to develop more than one page to separate out the "STAT+" subscription model, which required contact for negotiating Enterprise level accounts. This could be reorganized along the same flow as signing up for the other standardized models.

Additional functions that the original design featured was a redirect to a Team page, as well as opening up a separate email form for Opinion article submissions. As such, these functions were separated into subheaders for the main contact page, to help better organize reasons for contact into categories of reaching a specific employee, general contact inquiries, and Article submission.

Finally, I determined that since Questions & Comments / STAT+ Assistance were the most likely to be selected categories, a FAQ Page that could troubleshoot and answer common questions would be effective in empowering users and reducing the need for unnecessary contact.

Page Organization

The need for new pages as well as sub-sections for the main Contact page, I quickly outlined where these new changes and additions would go into the existing website's sitemap. The FAQ page would become an entirely new section, The Enterprise Group Rates would be reorganized into the STAT+ subscribe section. The Contact page's subsections would be easily navigable and create a more organized information hierarchy.

It was important to outline every possible scenario for what tasks a user would perform through the contact options and features. As such, several different user flows were created, each illustrating every step taken for completing a specific task.

Construction

Examining the main landing page, I created a responsive grid layout that would closely fit the already existing layout of the website. Pixel measurements vertically are based on multiples of 8. All Spacing is divisible by 8 to keep content properly spaced. I also made sure to create a form style guide so that all forms would be uniform across different options and different pages.

All added content is AA Contrast compliant, while also utilizing the pre-established style guide. Text Sizing follows a 1.2x ratio.

Guided Steps

Once the visual structure was created, following through on the organized steps created a final cohesive interface of steps that the user would be walked through for each task.

Below outlines the path that the user can take dependant on each click. Each button click expands a new tray of selectable options, while offering easy navigation back to the previous stage. Some user pathways can branch out into different fields depending on how they are organized, however, the overall contact function has been paired down to only offer users visible steps when they are relevant to each selected task. This helps avoid some of the information overload that can be present in the old design.

‍

Form and Function

Below are further representations of how new layouts and content configuration can lead to a mixture of visual intrigue to break up monotonous information, while still creating structure that enables easy navigation that matches the user's need for digestable scanning and navigation. Also, while it is important not to break the standard STAT News visual identity, simplifying disparity between different screens can actually reinforce a stable look.

Final Thoughts

It would benefit STAT News moving forward to create a more in depth set of Style Guidelines for buttons, spacing, and Color Contrast. Bringing a greater sense of cohesion to the entire website would make for a stronger appeal towards future users, as some systems found throughout the website (most notably with STAT+) are based on various different Wordpress templates.

Outline

What is STAT News?