Design work for Badger Maps
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 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?’.
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.
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.
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.
Webapp Feature Dive
The route list is our most important feature in the app, and also our most complex.
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).
- Base State (The map is the primary interaction mechanism)
- Menu State (A menu button has been tapped. All menu items are accessible.)
- Detail State (Account detail is being viewed, it must be closed before menu is accessible)
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.