Fyresight

A Gannett product aimed for small business owners to better manage marketing campaigns and acquire customers with real-time analytics. The product was built from the ground up with a small team to solve problems for small businesses. Collaboration, research and team work was essential in the development of this product.

Roles

UX/UI designer - worked with 1 UX/UI designer, 2 product managers, 1 project manager, 3 web developers

Tools

Sketch, Photoshop, Illustrator, Edge Animate, After Effects

Platforms

Responsive web

Skill Development

Data visuals, calendar creation, advanced scheduling, content management, notifications, marketing, merge/ duplication /import logic, uploading/ editing assets, UI animation, campaign creation system, sitemaps

fyresight-logo

Problem

At the time, digital advertising increased by 20% for small businesses. The team worked with local business to understand issues with their advertising efforts. We discovered that business owners struggled with budget management, time and market knowledge. In addition, they lacked the expertise to manage their advertising campaigns efficiently. With this knowledge, the team set out to build a system to address these issues.

Approach

The team’s goal was creating a system to empower business owners of all technical levels to manage and publish their advertising campaigns across various popular platforms. The product would provide data to help owners make informed marketing and budgeting decisions. We would work with our local markets to provide feedback before releasing the product at a larger scale.


User Research

We spoke to small business owners about their advertising needs and business structure. We tested the campaign creation process and performance dashboard utilizing prototypes.

>Arin from Mad Vapery

I can set a budget, that is wonderful… everything you need, reaching to everyone and you can post whenever.”

-- Arin from Mad Vapery

This quote helped confirm our campaign creation process was clear and understandable.

>Lee from Prince Jewelers

“Too busy and technical — people don’t have time...”

-- Lee from Prince Jewelers

Data interpretation seemed to be a common issue and we needed to reconsider our design approach to data visuals.

Userflows

The UI has numerous user interactions and screens, which created complexities. Sitemaps and userflows iterations helped create a clear path for design.

fyresight-userflows

Responsive Layout

The product needed to be responsive, maintaining all features from desktop to mobile. The challenge was allowing users to create and publish campaigns to multiple platforms on mobile.

First-time & Empty States

To help users understand the product, first-time and empty states were designed. First-time states encouraged engagement and empty states informed functionality of the product.

fyresight-first-and-empty-states

Data Visuals

Graphs and charts were key identifiers for users to understand their campaigns. We spent weeks iterating on designs to find the best ways to help visualize the status of user’s campaigns.

fyresight-data-visuals

Campaign Creation

The creation of advertisements to multiple social platforms was the largest task to complete. The experience encompassed scheduling, targeting audiences, defining budgets and creating multiple creative assets.

fyresight-data-campaign-create

We worked to make this process require as few clicks as possible. The user would fill out a master form that built five ads instantly. A confirmation page is displayed before publishing, showing previews of all the advertisements along with editing capabilities.

fyresight-data-campaign-create

Color & Icon Philosophy

There were a large amount of user actions and data visuals that needed a system to differentiate between the two. Therefore, we created a color and icon philosophy to express certain behaviors associated with each color or icon.

fyresight-data-visuals

UI Animation & Motion Reel

Design Mocks

Dashboard

fyresight-dashboard

Onboarding

fyresight-onboarding

Campaign Index & Performance

fyresight-performance
fyresight-campaigns

Audience Screens

fyresight-audience