Michael Grover UX Design & Graphic Design
Thumbnail.jpg

Reach Marketing Database Selection Tool

Reach Marketing Database Selection Tool

Reach Marketing, a data-driven marketing firm, tasked North Street with creating the visual design and user experience for their new email database selection tool.

I took the lead in the strategy and execution of this project, including communicating with the client and building interactive prototypes. I introduced new rapid-prototyping processes to North Street's work flow which helped us show the client how the final product would function. The prototypes also helped the client give us clear feedback.

1. The Goal

Create tool for Reach Marketing's clients to select recipients for their email campaigns.

2. The Process

Kickoff Meeting

North Street Creative began the process with a three-hour kickoff meeting with a multidisciplinary selection of Reach Marketing employees. Reach Marketing presented us with their idea of the project, and we followed up with a series of questions to make sure we had a good foundation to start the project on.

Competitive research

After the kickoff meeting, I researched competitors in the field of email marketing, such as Mailchimp and Hubspot.

This screenshot shows how users create segments for email campaigns in Mailchimp. The parameter addition and subtraction buttons in this interface influenced my designs later on in the process. I felt that these buttons were a simple and clear interaction that we could adapt for the Reach Marketing email tool.

mailchimp.png
 

User Persona

Based off of what Reach Marketing told us about their client, Northwell Health, We created a user persona of someone who would be using the email selection tool. Throughout the design process, we kept Rebecca in the back of our minds. With every decision, we asked "are we serving Rebecca's Needs?"  This kept us focused on the user.

Rebecca.png

User Flow

Campaign creation user flow.jpg

Linear Site Map/features list

 
Site Map Current.jpg
 

Sketches

I made several sketches of interface possibilities. These are some that have a clear connection to the final designs.

Low-fidelity Wireframes

High-fidelity Wireframes

Style Guide

Style guide created for the developers to reference, and also to help myself keep designs internally consistent.

I made liberal use of Sketch symbols, nested symbols, object styles, and text styles. This allowed me to easily make global changes to the design. For example, the client asked us to change the color of the app from blue to red. Because our Sketch file was so well organized, this only took a few clicks.

Selected Pages From Final Design

Interactive Prototype

I used the Craft plugin for Sketch to quickly create an interactive prototype in Invision. We used this prototype during client presentations and sent a link to the prototype to the client after. This greatly helped them wrap their heads around the design.

3. Outcome

Reach Marketing approved our designs and their software developers made the designs into a working product.