This is a project I worked on that progressed from a re-skin of the existing UI, to an overhaul, for arcGIS integration with the legacy platform that was converting from desktop, to a cloud solution.
Per usual, I started off by scrubbing the existing product, recording the structure, content and features. I identified discrepancies, redundancies and bugs as a precursor to establishing the basis of the IA. The redundancies are what I use to identify high level groupings and opportunities for simplifying the content structure. The indents indicate the level which the information is accessed and through which actionable items.
As I record the content, features, etc. I am also recording the flows that exist within the the existing application. I use this as a spring board for the various interactions I establish moving forward.
Once the features and flows have been captured, I used wireframes for full screens and thumbnail renderings of each interaction, to be sure the business requirements have been captured within my revised structure. I can present this to the team at any given time for feedback, or validation of any presumptions I may have collected throughout my exploration.
Moving from the wireframes, I begin to render out the UI elements. Since the interactions were defined in the phases leading up to the design, I begin to expand, and refine the interactions and overall experience through design.
Here comes the fun part. For maps, there are sooooo many moving parts. It isn't like designing a table, or list view. There are so many elements, transitional states, and geometric shapes. There are panels that interact with map markers, fly out menus, and...icons. All to reduce one massive, complex geo-locational data set, on varying layers, with a multitude of instances (zoom levels) to a digestible format that can easily be sorted for discovery of that one particular gem the user seeks. Thats a ton of information, and quite a bit of custom functionality. Google Maps is such a great product. There is so much to learn from what they do. But when you are talking about government data, with unique data structures for every single agency...trying to accommodate each user is a serious challenge.
However, once the journey has come to a close, all the hard work, time and energy must be communicated to the development team. This is my feeble attempt at trying to make that line of communication as digestible as possible. This is only one of many pages in a spec document, delivered for dev.
The icon set was all custom. Not that I find it to be ground breaking, or par with best practices, but the entire set was created from scratch within two working days, and converted into SVG's before going into development.
This is an animation I created to demo the Multi-select functionality.
This is another quick animation study I did exploring a concept I came up with that splits, and expands, a cluster marker to reveal a list of records pertaining to that marker. This was intended to keep the user in the context of location, rather than displaying a list elsewhere in the page layout. The problem it was solving for was that, we originally had a list that extends from the right edge of the window. If there were multiple cluster markers within the map view and the list contained all records within the maps view, the context gets lost.
This is a silly little animation of how the drag-and-drop tool from the Routing Panel could react when selected.
Thank you for taking the time to review my work. This is a very intense project I was involved in and what I presented here barely scratches the surface of my involvement. Maps and charts are my two main passions. This is one of the projects I am the most proud of. Hats off to the Product Manager I worked with and the amazing developers tasked with bringing this all to fruition.
Please leave comments, they are all welcome and well received.