Design work for Badger Maps

Badger Maps

While at Badger I designed and implemented (wrote the templating, html, css, and interaction javascript) a responsive webapp, a native iOS app, and a native Android app. I also revamped the logo, helped implement a brand identity along with another designer, created plenty of collateral, and more. Here’s a little sampling.

Badger is a unique application in that its primary interface is a map. Badger ostensibly works as a light weight CRM for outside sales professionals, so being able to spatially reason with where your customers are is paramount. There are few applications out there that are able to layer on a lot of data on top of a map while still making it feel easy to use. Our customers were sales people and had zero patience for an application that felt difficult. Usability was key.

iOS

iOS is our most important platform in America. With thousands of customers utilizing it every day, it has to expose features easily and be very easy to use. It has to flow. iOS designs have fed back to our webapp designs more than the other way around. By making things easy to use on a phone, we were able to translate that more easily to the desktop.

Our most consequential screens on iOS are the map, the calendar, account detail, route mode, and the route list. These places are where the bulk of interaction occurs and needs to be refined, quick to use, and obvious.

Certain screens like route-mode deserve more explanation. When our customers built optimized routes, they almost had an experience of ‘now what?’.

The most consequential screens on iOS
The most consequential screens on iOS
Our iOS app through the sands of time (or iOS versions, if you will)
Our iOS app through the sands of time (or iOS versions, if you will)

Android

Android was developed much later than iOS due to the expense of building it and the lower demand. Primarily we’ve seen demand for Android from abroad where teams being onboarded needed native app support. As such, we were able to build upon all the workflows and designs that we had matured under iOS. The primary difference was that Android had to feel like Android. This could be both subtle and overt.

Our most consequential screens are similar to iOS and are where the bulk of interaction occurs for our customers.

The most consequential screens on Android
The most consequential screens on Android

Responsive Web Application

Early on at Badger we created an MVP that allowed people to pay for and use the application but was otherwise not thoroughly designed. This changed about two years in when I designed and implemented an interface that would allow us to have a much more coherent approach to the web application that collapsed with very, very little code to mobile. This design has carried us for four years, allowing us to adapt to new features and additions with very little trouble.

Webapp Evolution

Our web application started as a rough sketch but contained some devices that would end up being carried through to the final design that we work with today. While the menu and overall structure and layout were heavily altered, certain areas like the route list remained largely the same.

Early designs were meant to rapidly expose features and didn't yet have a strong sense of organization or structure
Early designs were meant to rapidly expose features and didn't yet have a strong sense of organization or structure
As time permitted, we went back to the original and made it more usable on tablets by increasing touch targets. Time was also taken to solidify the design around brand colors and make the app feel more cohesive.
As time permitted, we went back to the original and made it more usable on tablets by increasing touch targets. Time was also taken to solidify the design around brand colors and make the app feel more cohesive.
When the limits of the original design were reached, I went back to the drawing board and redesigned the app around a 'pane' metaphor, with a menu state on the left and a detail state on the right. This allowed the map to stay front and center.
When the limits of the original design were reached, I went back to the drawing board and redesigned the app around a 'pane' metaphor, with a menu state on the left and a detail state on the right. This allowed the map to stay front and center.

Webapp Feature Dive

The route list is our most important feature in the app, and also our most complex.

The routes base-state invites you to get going and provides an insanely simple point-of-entry: a single button
The routes base-state invites you to get going and provides an insanely simple point-of-entry: a single button
Tapping the button reveals a simple popover-like interface that is easy to quickly select accounts from
Tapping the button reveals a simple popover-like interface that is easy to quickly select accounts from
Once the route is filled, you are presented with many more options like adjusting the duration, time, and stop-order of the route.
Once the route is filled, you are presented with many more options like adjusting the duration, time, and stop-order of the route.

Mobile metaphor

With mobile, I wanted a metaphor where each state felt straight forward to the user without having to think about it. In order to incorporate the webapp with as few modifications as possible, I came up with a way for the windows to be structured in a way that felt familiar to iOS/Android users while keeping modifications to CSS just to things like height (aside from the menu which had so many differences as to require a different component on mobile).

  1. Base State (The map is the primary interaction mechanism)
  2. Menu State (A menu button has been tapped. All menu items are accessible.)
  3. Detail State (Account detail is being viewed, it must be closed before menu is accessible)
Here is the desktop view broken down into it's main structural components. On the next image, you can see how these components collapsed for mobile.
Here is the desktop view broken down into it's main structural components. On the next image, you can see how these components collapsed for mobile.
The wireframe broke down the app design structure into three main states: Base, Menu Selected, and Detail. Detail is only triggered when an item inside a selected-menu view needed to expand to another view.
The wireframe broke down the app design structure into three main states: Base, Menu Selected, and Detail. Detail is only triggered when an item inside a selected-menu view needed to expand to another view.
Here you can see how this actually was designed in practice.
Here you can see how this actually was designed in practice.

After having been at Badger for a few years, a number of things bothered me about the logo. It was originally purchased from a website similar to 99 Designs to get the job done. While conceptually very cool (combo of a Badger and map pin) and having some good bones, the logo was hastily completed and it showed. I wanted to massage the logo to get it to the point where it felt more strongly designed.

A few goals I had:

  • Make the logo look like it flowed. The curves of the current logo lacked harmony and didn’t have a sense that they knew where they were going.
  • Make it bolder. I wanted to be able to flip the logo to a black and white form (sans the red interior) and for it to still feel strong. With the original, the thin lines made the logo look strange and incomplete in black and white.
  • Make the logo more consistent and balanced. The structure and lines of the original looked almost lopsided and had abruptly ending structures in it. The lines themselves were also not consistent widths without any reasoning to them.
Thicker lines reduce better, curves flow in harmony, logo overall feels more 'designed'.
Thicker lines reduce better, curves flow in harmony, logo overall feels more 'designed'.
Point reduction, simplification, and consistency makes for a technically easier to work with product.
Point reduction, simplification, and consistency makes for a technically easier to work with product.
Original versions highlighting problems when going black and white
Original versions highlighting problems when going black and white
Improvements in being able to go black and white
Improvements in being able to go black and white