Localedge Dashboard

Where users manage their digital marketing products




Overview

Summary

The Localedge marketing suite provides a dashboard for users to manage mulitple digital marketing tools and progress statistics representing their digital product.

Problem

With the addition of multiple new products offered in the Localedge dashboard (formerly known as the customer launchpad), the dashboard became a smorgasbord of diverse apps and services from different sources that created a feeling of inconsistency and a lack of trust in the application as a home base. Each app had a separate kind of interaction experience to reach similar goals, so the objective was to create a globally consistent space to place the data from each app into one interface to create a singular look and feel.

Users and Audience

  • Partner/Reseller
  • Business owner/Customer
  • Internal, Customer Experience

My Role

  • UX designer
  • UI designer
  • Front-End Development


Process

Arriving at a Solution

As a business, we had a variety of partners, merchants and internal users who had a wide range of needs around the usages for and interaction with product data. Some merchants have one or two accounts that they track data for while partners may have an entire customer base of business statistics that they are keeping track of. The complexity of catering to such a wide range of business types and use cases meant I needed to come up with a design that would cater to flexible functionalities.

Desired Outcomes

  • Consistent user interface with set global standards to adhere to
  • Ability to access each product from a single source of navigation
  • Ability to filter data results by year, month or by way of a custom date picker
  • Attractive display of data coming from an external business intelligence application
  • For each product, the ability to view specific data type results via tabular interaction (quick stats)
  • Ability to edit customer information
  • To be responsive for tablet view

Personas

  • Partner/Reseller: Customers unable to manage their reporting (e.g “hey your ranking on google went up!" "You have this many clicks", etc.)
  • Business owner/Customer: Small business owners managing their own reporting
  • Internal, Customer Experience: Admin work -- like partners, monitors the reporting on behalf of the client


Challenges to Consider

Formerly known as the "Launchpad", what currently existed was a data tool that suffered from a severe lack of customer engagement. It was difficult to use and didn't display data in a way that customers found appealing or easy to use. The idea was to make data look interesting, and to design an environment that would be easier to navigate, enticing users to login to their dashboard more.

Launchpad circa 2011

Additionally, incorporating data and graphs from a separate business intelligence software that Localedge is using to manage reporting data was another factor to consider, which meant we were limited on style for any graphs shown in the dashboard.


Wireframes

I went through many iterations of wireframes to nail down the core experience. I based some of my layout ideas on a bootstrap dashboard theme. I liked the way this design created more visibility of navigation to all the apps in each user's personal suite which was one of their pain points with the current design. The new dashboard would work much like a shell displaying values being pulled from all the different sources, and I felt this design created a neutral, consistent and clean space for that need.



Components

I wanted to make sure I was designing with consistency while utilizing custom global design elements. I incorporated the Bootstrap 3 UI kit as a base, and then customized components to create a unique look and feel for the dashboard. Alongside this project I was developing a style guide of design standards for product owners, developers and QA to follow and refer to. This entire project was a bit of a blank canvas, and gave me a lot of independent abilities to set the standards I felt were best for the dashboard application and the company.
View Localedge Style Guide Project


Final Color Solutions


I decided that the default palette needed to be more neutral as multiple partners with different logos would be in prominent view. The idea was later suggested that each partner would have a unique dashboard palette that matched their branding colors. We intend to move forward with that idea in the future. Below are a few color visuals of complete mockups of both default neutral dashboards and branding color specific palettes.



Optimizing for mobile

Aside from my general love for Bootstrap's UI kit, designing with mobile in mind (tablet specific) was another aspect that drove my decision to heavily incorporate Bootstrap and it's flexible grid system. The grid was designed to be shifted around depending on device sizes. The other interaction that I considered included triggering the left hand navigation, which is accessed via a hamburger icon that appears once it reaches standard tablet size (less than 992px and more than 768px)



Execution

Delivering Efficiency and Consistency

As a result of the final design, I was able to create a design that was simple to develop for our engineers and easy to use for our users. The design ended up being successful and extremely useful for customers, partners and internal users as dashboard reporting is a huge and crucial tool for our customers and their growing businesses.