Mary Browns

Project Overview

Mary Browns was struggling to sort through all the requests that get received online. They needed a way to streamline requests and at the same time make it easier for their guests to contact them.

Original Version of the Mary Brown's Contact Us Page.
Heat Map on a Black Background within a white computer.


To meet the business requirements and support users, several forms of research got used. Heat Mapping, Click Tracking and Video Recording got added to the site. These tools helped determine how users were currently engaging with the website. Understanding how guests were interacting with the forms helped define an expected workflow.

Competitive analysis got done to understand how competitors handled the same problem. The analysis revealed a solution that could get integrated into the website. This solution would meet the needs of Mary Browns.

User Testing helped complete the picture on how users expected the site to behave. It was through User Testing, that we learned the current form lacked clarity. Users wanted to know which fields got defined as required. Users also raised concerns about their messages getting sent to the right people.


The new contact form started with many sketches getting worked on. The goal was to quickly identify which pieces of functionality could solve the problems. The sketches varied in detail as the specific requirements got focused on.

This job didn't have a large budget. A paper wireframe got deployed to identify what pieces of functionality would work. This process allowed for form fields to be quickly added and removed. This approach allowed for modifying the wireframes without adding significant time.

The paper wireframe got revealed to the internal team first. This resulted in a clear understanding of how the form would function. The wireframe defined which fields would be required depending on the user's selections. During this presentation, further changes got requested and got applied in real time. The result was a unified understanding from everyone involved.

Paper Wireframe used to showcase functionality.
Screenshot of Mary Brown's Wireframe located inside of Invision.

High Fidelity Prototype

With the wireframes getting internal approval, the prototypes started to get developed. The prototype would get presented to the client. Using Sketch, the states from the paper wireframes got turned into varying artboards. Symbols and Shared Styles got used to ensure consistency between the different prototype designs.

Invision got used to add functionality to the prototypes. The Sketch file integrated with Invision through Dropbox. By using Dropbox, the files were always up to date in Invision. Hotspots got applied to varying parts of the prototype. The hotspots were to ensure that each form element acted as expected.

Notes got incorporated to explain how specific functionality would work. Mary Browns was able to ask questions and provide feedback on how they felt the contact form should work.

More User Testing got done to ensure that the new structure of the contact form was simple and easy to use.


After the prototype had gotten approved by Mary Browns, development began. A combination of HTML, CSS, Javascript, PHP and MySQL got used to build and style the form.. Javascript validated the form and determined which fields got displayed based on previous selections.

AJAX was integrated into the site to load store locations and submit the form. A thank you message would get presented upon completion of the form. The thank you would confirm that the message had been sent with success.

Code being viewed on an iMac
Final version of the new layout and structure.

Project Results

The contact form has been well received by both users and Mary Browns. At the start of the project the right questions got asked. The result was an experience that met business and user goals.