Fannit

Repositioning a Boutique Marketing Firm

Deliverable

Brand, Website, Print

My Role

Researcher, Designer

Project Type

Full-time

Fannit started as Keith and Neil Eneixs' response to the economic collapse in the early 2000's. Their father suffered an intense blow to his landscaping business, but marketing provided an outlet for the Eneixes to rebuild the family business and start a new one. After experiencing startup success and overcoming growth pains, it was time to prepare for the next chapter. Welcome to the new Fannit - brand, site, and materials.

Background
Founding a Business

A previous colleague, Tony, came to me with an idea - a marketing platform that doesn't just help you manage leads, but one that clearly shows which marketing efforts are being profitable. The need came from the fact that many marketing managers are spending hours each day tracking leads with no clarity in the end of return. We realized this was an opportunity to provide efficiency.

So we started MarketingManager, named thus because of it's power to handle the management for the marketer. And we needed a brand, a website, and the app.

Since we started from an idea there was a long way to go! We spent every Saturday and many weekday nights debating features and functionality - we had defined the problem but what was the solution? There were several things we knew for sure:

  • An array of platforms provide the means to identify new leads so no need to compete with that. We can simply provide integrations and pull in the lead data.
  • Marketers need to see expenses alongside sales in order to gauge success. And they needed it gauged for them (ROI).
  • Many businesses receive a flood of leads that could be managed far more quickly.

With a few thoughts nailed down we defined our top functionality:

  • ROI by sales channel - Offering marketers information on how each marketing effort is performing as well as ROI on the complete marketing spend.
  • Collaborative pipeline management - Allowing multiple users per subscription so that marketing and sales teams can work together more closely and deliver information to executives more easily.
  • Manage multiple accounts - Giving marketing agencies all the platforms benefits for all their clients in one place.

Then we defined the user flow with an emphasis on simplicity:

  1. Integrate - Connect with your existing tools.
  2. Manage pipeline - Quickly verify or disqualify leads.
  3. Track expenses - Allocate expenses to channels.
  4. Visualize ROI - See cost/revenue breakdown.

Branding
Starting from Scratch

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

marketing manager logo
marketing manager logo negative

Primary Colors

Primary Blue

#53b8e3

Green

#31b67b

Warning Red

#f05c71

Shades of Gray

White

#ffffff

Light Gray

#f4f4f4

Ash

#dcdcdc

Slate

#afafaf

Night

#141414

Status Colors

Traffic

#e1700b

Leads

#be1771

MQL

#7662f2

SQL

#34959b

Typography

Open Sans
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz

The first draft sucked.

We needed something - just something - to show people so we could raise a little interest among local companies we had connections with.

marketing manager old app design
marketing manager dashboard

A website to flaunt the product.

marketing manager homepage design

Note: This project is largely confidential. Hence, what is shown and explained here will remain fairly generic.

Moving from Photoshop to Figma

When the project first began in 2015 there was no tool suitable for sharing and scaling UI components within the design team. Adobe Libraries was the best thing available, so started on Photoshop. At the beginning of 2017 a new tool arose - Figma - which promised simple and reliable sharing of design assets as well as real-time collaboration. I pitched the software to the creative director, and the idea was approved. Our team has been working more effectively ever since.

cbre photoshop workflowcbre figma workflow

The Design System

Due to the confidentiality of the project, I can't show many of the complete designs, but I can tease pieces of the design system.

Design System (n): "A single source of truth for UI styles and components. All pieces within the UI (buttons, colors, widgets, etc.) are all accounted for, and anytime a style or component is used it links back to a master to guarantee consistency and efficient updating practices."

button stylesmodal stylemenu styles

Base Styles

Typically included in base styles or colors, form field styles, buttons, and other core pieces that are used to build larger components. In atomic design, many of these pieces are referred to as "atoms".

Components

Larger UI pieces are built using base styles and are called components. A component always completes a piece of functionality for the app, but can be as basic as a calendar or as complicated as task details system. Atomic design breaks components into molecules and organisms.

calendar uitask experience ui designnotes experience ui design
cbre design system
Britt Johnson

Britt Johnson

Software Developer at CBRE
ʽʽ
'Exceptionally creative' and 'highly skilled' are phrases that come to mind when I think about Isaac.

I’ve had the pleasure of knowing Isaac for over a year, during which Isaac created standout wireframes and mockups for two large software projects for the Market Builder Group at CBRE. I was impressed with Isaac's ability to make our color scheme shine and convey our brand across multiple products.

We really appreciate how Isaac has always been available to add a beautiful element of design to features that required a quick turnaround.

And, of course, Isaac's fun nature and lighthearted demeanor make him an absolute delight to work with.

Isaac would be a true asset for any projects requiring Photoshop and/or design expertise, and I would recommend Isaac to others in a heartbeat.

Background
Client Understanding & User Research

I followed my process thoroughly in redesigning the website. We started with a couple meetings to define goals and needs.

See:

Questions I Ask Every Client at Project Launch

Company Goals

Fannit expressed the current pain points - low conversion rates, failure to convey the right emotions, a general internal distaste for the current website, etc.

But as well as fixing the current issues, there were specific expectations - keep the professional feel instead of following the fun relaxed trend in startups, create an experience conducive to content publishing, clearly convey the how-what-why of the services, etc.

Review + Testing

I never redesign an established site without doing an extensive review of the site and testing it with real-world users.

My review of the site analytics and website turned up 20 points of weakness and 4 positive aspects to keep. Examples include:

  • Main orange doesn't pass accessibility standards for text (the text is too bright for many people to see it clearly or even read it at all, and is hard on the eyes in general).
  • Case Studies is one of the most important pages, but isn't being highlighted well
  • The primary call to action is unclear - as a user I don't know what's going to happen by clicking the button, which is verified by high bounce rate.
  • Navigation is unclear and difficult to use. Sub-navigation is easy to miss entirely. "Learn Inbound" as a navigation label doesn't sound like a hub for downloading free PDF resources. "Talk to Us" isn't a compelling CTA.
  • Office photos are very personable and compelling.

After reviewing the site I conducted a test with 5 targeted users. Following is one of the test results I received.

 

As is frequently the case, the user initially liked the site - it looked clean and knowledgeable, but after being assigned some usability tasks things started to come into question. Ultimately, Fannit wasn't seen as the best place to request services from. But still there were quite a few positive points that helped me understand what users like so I don't break the things that perform well.

Branding

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

fannit logo negative
Orange

#f25d3d

BLue

#3d46f1

White

#ffffff

Ghost White

#f3f3fa

Gainsboro

#dadae3

Slate Gray

#92929f

Dark Gray

#272729

Black

#000000

Header: Exo
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
Body: Muli
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
Keith Eneix

Keith Eneix

CEO at Fannit
ʽʽ

Isaac is a progressive graphics designer that proved to be a great asset to our company in helping us determine our direction with web design, infographics, email marketing, custom graphics, logos, and more.

His eye for design (and art in general) has always been a step ahead of the average person. I would highly recommend his work.

It's difficult to find a designer who truly understands the direction a client is trying to take with their brand. Isaac just seems to have a knack for visually representing that image well. We look forward to working with him in the future on other web design related projects."

fannit homepage designfannit case study design
fannit icons

Fannit needed something with more character than simple glyphs, but not the playful illustration style being adopted by the trendy startups. Icons needed to communicate the message of the rest of the brand - friendly yet professional.

Postcards to commemorate the past and usher in a new Fannit era.

The cherry on top of the repositioning effort was the "Orange Box" idea - an unexpected delivery of free materials for businesses. I was asked to design the postcard with Fannit's story that would go in the box.

sharing icon illustration

Sharing is the currency of the internet.

If you enjoyed this portfolio piece or found it inspiring please pass it on! Click the button to copy the link to the clipboard.

Copied to Clipboard
Next Up:

Co-founding a Platform to Measure ROI

Continue
Fannit