Responsive image
Responsive image

Townsquare Interactive decided to create their own Customer Relationship Manager instead of using a marketplace solution to cut costs as well as to maintain control of their client data. Once we had the business requirements, we needed to understand the end user's needs, goals, fears, and motivations.

Part b —
learning the user's goals

1st
Step

2nd
Step

Strategy

Example of a Strategy document we used.

This document is the overall goal sheet for the application from a user and business point of view. Having these documents helped the design team make informed decisions on which features or functions to develop in the app which delivered the most value.

Business Goals

Townsquare Interactive's Product team gathered the needed requirements from the stakeholders. After I reviewed the requirements I would ask the Product manager questions that I felt helped define the business goals.

 

What is the goal?
How do we measure success?
Who are the are the users?
What problem is this solving and how they were currently solving it?
User Goals

We collected the goals through contextual interviewing sessions with users. We then documented our findings in an Empathy Map. After the interview process was complete we then identified patterns and moved them into Journey Maps.

3rd
Step

Part a —
flow

After completing our user research and identifying business goals we made three products and ten tools. Three of those tools are diagramed here.

— client search
Search Clients
Stage 1

Uses: Type in one of several options. GP ID, Chili Number, Business Name, Client Name

Search Result
Stage 2

Select from a list of results of Clients that near match the keyword or terms you entered

Client Dashboard
Stage 3

The final result is the client settings page. Each tab represents a service.

— Digitial Marketing Specialist
DMS Dashboard
Stage 1

Show Call Percentages, Client States, and the Client List.

DMS: Client Health
Stage 2

Drawer for Client Health measurements

DMS: Call Notes
Stage 3

Drawer for DMS Client notes

— Digital Precense Analysis
Client Details
Stage 1

Client Form with client ID or industry search and auto fill.

Verify Services
Stage 2

Verify form with Client

Generate Report
Stage 3

Report of Client's health

Part b —
wireframes

Our wireframes work by iteration. The initial state is merely a page with general pieces of information on them in places which make sense. We would typically make several rounds before finalizing placement; represented by a low-fi interactive and visual design screen.

Part a —
Branding

The Campfire Icon to the left is our primary logo colorway and should only be used on a white background.

Exclusion zone: The logo’s icon exclusion zone is equal to half the height of the icon.

Campfire

Campfire

Campfire

Above: Icons which are used in the left sidebar menu.

The campfire login window prompts a user to enter their credentials prior to accessing the web application.

Branding and an Interactive example

Part b —
Style Guide & Pattern Library
— Colors
 
 

Primary Color

#3CD3D6
RGB (60,210,214)

Uses: Save, Active & Focus states

 
 

Secondary Color

#9F5BD5
RGB (159,91,213)

Uses: Single Action - Add and Edit

 
 

Text Color

#495157
RGB (73,81,87)

Uses: Body, Headings, Cancel & Close states

 
 

Important State Color

#FA7252
RGB (250,114,82)

Uses: Importance, Warning state

 
 

UI Navigation Colors

#25292C
RGB (37,41,44)

Uses: Left-side Navigation, Icons, Secondary Importance

 
 

Element Accents

#EAEAEA
RGB (234,234,234)

Uses: Panel/Well backgrounds, hr background, cancel hover state

— Typography

Aa


Roboto
Uses
Body, Headings, Cards, Wells, Panels
H1

35
PX
700 — Strong
400 — Regular
300 — Light
H2

29
PX
700 — Strong
400 — Regular
300 — Light
H3

21
PX
700 — Strong
400 — Regular
300 — Light
Body

16
PX
700 — Strong
400 — Regular
300 — Light

Aa


Roboto Condensed
Uses
Table Data, JSON code blocks
H1

35
PX
700 — Strong
400 — Regular
300 — Light
H2

29
PX
700 — Strong
400 — Regular
300 — Light
H3

21
PX
700 — Strong
400 — Regular
300 — Light
Body

16
PX
700 — Strong
400 — Regular
300 — Light
— Inputs
Validation States: Failure —
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
Validation States: Success —
Looks good!
Looks good!
Buttons —

Uses: Save, Active & Focus states


Uses: Save, Active & Focus states


Uses: Save, Active & Focus states


Uses: Save, Active & Focus states


Uses: Save, Active & Focus states


Uses: Save, Active & Focus states


Uses: Save, Active & Focus states


Uses: Save, Active & Focus states

Part C —
User Interface Design
— DMS

The default view of the DMS Dashboard. There are several filters to narrow down client status.

Client Conversation fly-out screen. Once a month a DMS will enter notes pertaining to a the status of the clients services.

— DPA

Top: Sales will use a form which generates a sale. We built a tool which automates that process.

Right: After the form is completed a report is generated. From that point a salesperson prints it and goes over the report with the client.

— Client Search

Client Search provides all teams within Townsquare Interacive to look up a client for all tools.

Client Details has a few tools attached to it depending on your permission. Services acts as a "home page" which contains an overview of all tools.

TSI
Campfire

Conclusion