Coca-Cola Heatmap

The starting point — an outdated Flash application. Our objectives, 1.) to understand the tool’s purpose and valuable features, then 2.) to redesign with a focus on usability, and 3.) to rebuild for the modern web.

In order to understand how the tool currently works and what users expect the tool to do, we begin with UX research. We inteviewed key stakeholders for quality feedback, and provided this form to a larger salesman group for quantitative feedback.

After identifying the key features, we searched for design proof of concepts. We presented the new design solutions and explained the reasoning for our approach. Always design with intent — one should be able to explain their design choices.

With general ideas agreed upon, we started to draft UI wireframes. We again thought it imperative that we shared our concepts with the clients and elaborated on why the new solution would be more effective.

Wireframes begin to take form by solidifying features and incorporating the client’s Branding Documents.

After feedback revisions between designers and client’s stakeholders, we finalized designs for the application’s user interface.

Static UI assets can be difficult to visualize. To tackle that problem, I created an interactive and animated prototype which efficiently provided the client a more clear understanding of how the new UI would function in real-time use.

Open motion prototype walkthrough

First step before writing a line of code? Plan. We mapped out the application architecture in order to guide our development strategy with a clear understanding of the intended state mangement, modularization, and code reuse.

The tool was a responsive, data-driven, UI-heavy web application. We decided the best framework was ReactJS for front-end UI components, and Flux for managing application state and connecting to Database APIs. We also had the challenge of integrating a 3rd-party map API.

The final result — a clean, focused, and useful update to the Heat Map tool. The client’s feedback was mission successful. All of the core features were included, but now in a more usable interface and on a modern technology platform.