Overview
Creative Memories was a large international company offering a variety of traditional and digital memory/keepsake products. Selling directly to the public through their e-commerce website, as well as, providing business opportunities for in-home business consultants. They had four e-commerce websites for separate facets of their company. Each had similar billboard-like Contact Us pages with long lists of departments, email addresses, phone numbers, and links referencing the corresponding websites.
During the migration of Help Zone content (FAQs, product specifications, inspiration, etc.) from one content management system to another, the opportunity was presented to approach Contact Us with a new strategy.
Design Goals
• Provide a useful point of reference for users to contact Creative Memories.
• Find a solution to direct users to the correct contact information for their inquiry.
• Find a solution to direct users to the correct contact information for their inquiry.
User Experience (UX) Research
By looking at the purpose of the contact us page, you can make an educated assumption on the audience and their situation. In this situation, the user is on the Contact Us page of a Help section. The user may feel flustered, confused or upset upon arrival. I felt the approach to this project required a user-centered design and a guided, interactive experience.
Design
The design programs I used during the planning, wireframing, visual design, and prototyping processes were: Photoshop, Illustrator, and Dreamweaver.
I first studied the content within the Help Zone and made sure that the information architecture for the sections was solid. The next step was to create possible user flows. With this information I could arrange guided questions and dynamic content on the page.
Topics displayed in my initially coded select field.
The HTML page used external stylesheets for consistency and easy maintenance. To keep the interface as clean and streamlined as possible, upon arrival the only visible content was the question “How can we help you?“ with a select menu of topics to choose from. Using the JavaScript (upon select) change function, the corresponding content would become visible.
The content was written in a concise, direct tone. Displayed in a list format, but replacing bullets with functional image links. The content was curated to empower the user to be self-sufficient. The bottom link opened a page that has a custom contact form and phone number for that department. The page was created using the CMS LiveEdit Aurora's Form Builder
Image link variations tested
There are several advantages of having the form and phone number on a separate page.
1. We were able to create a custom form that is funneled to the appropriate department. This reduced the number of misdirected emails which slowed response times and productivity.
2. The forms had custom required questions, select options, and tooltips to assist the user to complete the form accurately. Thus cutting down the back-and-forth communication with customers for areas like software support technical issues.
3. The user is presented with options to help them, help themselves instead of waiting for customer care. Reducing the number of customer care agents required on the phones.
Delivery
I had coded the HTML, CSS and JavaScript for this project; presenting to management periodically. Prior to its release, I was given the opportunity to present the full experience to stakeholders. The project was well received and it was determined to filter users from other sites through this Contact Us page.
Sample of my HTML code for the project.
Result
In summary, the Contact Us section was well received by stakeholders as well as users. The user experience empowered users to be self-sufficient. In the case that customer care was contacted, they were more effectively able to assist the customer. They did this by having they necessary information, delivered to the correct department.
