arcGIS Online
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.
Information Architecture
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.
Flow Diagrams
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.
Wireframes
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.
UI Design
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.
UI Specifications
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.
Iconography
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.
Best Regards,
[Jeff Nixon]