Coca-Cola Bottlers Japan
GIS Redesign
Redesigning GIS to empower Coca-Cola sales representatives.
UX
UI
Components
Coca-Cola Bottlers Japan
GIS Redesign
Redesigning GIS to empower Coca-Cola sales representatives.
UX
UI
Components
Coca-Cola Bottlers Japan
GIS Redesign
Redesigning GIS to empower Coca-Cola sales representatives.
UX
UI
Components
Coca-Cola Bottlers Japan
GIS Redesign
Redesigning GIS to empower Coca-Cola sales representatives.
UX
UI
Components
Coca-Cola Bottlers Japan
GIS Redesign
Redesigning GIS to empower Coca-Cola sales representatives.
UX
UI
Components
Background
About GIS
The Coca-Cola GIS (Geographic Information System) is a live, web-based sales management tool used by sales teams in Japan to identify and target potential clients through an interactive map interface. While the platform is accessible on desktop, the main device for sales representatives is the tablet, which they rely on daily in the field. The redesign was therefore meticulously crafted to deliver a seamless experience on tablet first, ensuring the interface was clear, responsive, and easy to use on the go.
At the heart of GIS is the interactive map, where each dot represents a business location. The colors indicate the status of Coca-Cola’s relationship with that business, whether they are an existing client, currently in negotiation, or a potential lead. Sales reps can click on any dot to open a modal with business details and its current status with Coca-Cola. They can also assign that business, whether new, in negotiation, or already a client, to themselves or another colleague for follow-up. Multiple businesses can be selected and assigned in bulk, making the platform not only a source of insight but also a powerful tool for distributing work and driving action.
Leadership assigned me to lead a major redesign to modernize the experience across desktop and tablet, simplify interaction flows, and rebuild confidence in the platform. The updated GIS launched in Q2 2024 and is now actively used by sales teams. The redesign improved usability and boosted engagement significantly, raising active usage and task completion from 45 percent to 87 percent.
The redesign was built on the component gallery I had previously created for URRY, Coca-Cola’s B2B ordering platform. GIS demanded new components to meet its specific needs, and these were added back into the URRY gallery, helping the library evolve and reinforcing consistency across Coca-Cola’s digital ecosystem.
The Coca-Cola GIS (Geographic Information System) is a live, web-based sales management tool used by sales teams in Japan to identify and target potential clients through an interactive map interface. While the platform is accessible on desktop, the main device for sales representatives is the tablet, which they rely on daily in the field. The redesign was therefore meticulously crafted to deliver a seamless experience on tablet first, ensuring the interface was clear, responsive, and easy to use on the go.
At the heart of GIS is the interactive map, where each dot represents a business location. The colors indicate the status of Coca-Cola’s relationship with that business, whether they are an existing client, currently in negotiation, or a potential lead. Sales reps can click on any dot to open a modal with business details and its current status with Coca-Cola. They can also assign that business, whether new, in negotiation, or already a client, to themselves or another colleague for follow-up. Multiple businesses can be selected and assigned in bulk, making the platform not only a source of insight but also a powerful tool for distributing work and driving action.
Leadership assigned me to lead a major redesign to modernize the experience across desktop and tablet, simplify interaction flows, and rebuild confidence in the platform. The updated GIS launched in Q2 2024 and is now actively used by sales teams. The redesign improved usability and boosted engagement significantly, raising active usage and task completion from 45 percent to 87 percent.
The redesign was built on the component gallery I had previously created for URRY, Coca-Cola’s B2B ordering platform. GIS demanded new components to meet its specific needs, and these were added back into the URRY gallery, helping the library evolve and reinforcing consistency across Coca-Cola’s digital ecosystem.
The Coca-Cola GIS (Geographic Information System) is a live, web-based sales management tool used by sales teams in Japan to identify and target potential clients through an interactive map interface. While the platform is accessible on desktop, the main device for sales representatives is the tablet, which they rely on daily in the field. The redesign was therefore meticulously crafted to deliver a seamless experience on tablet first, ensuring the interface was clear, responsive, and easy to use on the go.
At the heart of GIS is the interactive map, where each dot represents a business location. The colors indicate the status of Coca-Cola’s relationship with that business, whether they are an existing client, currently in negotiation, or a potential lead. Sales reps can click on any dot to open a modal with business details and its current status with Coca-Cola. They can also assign that business, whether new, in negotiation, or already a client, to themselves or another colleague for follow-up. Multiple businesses can be selected and assigned in bulk, making the platform not only a source of insight but also a powerful tool for distributing work and driving action.
Leadership assigned me to lead a major redesign to modernize the experience across desktop and tablet, simplify interaction flows, and rebuild confidence in the platform. The updated GIS launched in Q2 2024 and is now actively used by sales teams. The redesign improved usability and boosted engagement significantly, raising active usage and task completion from 45 percent to 87 percent.
The redesign was built on the component gallery I had previously created for URRY, Coca-Cola’s B2B ordering platform. GIS demanded new components to meet its specific needs, and these were added back into the URRY gallery, helping the library evolve and reinforcing consistency across Coca-Cola’s digital ecosystem.
The Coca-Cola GIS (Geographic Information System) is a live, web-based sales management tool used by sales teams in Japan to identify and target potential clients through an interactive map interface. While the platform is accessible on desktop, the main device for sales representatives is the tablet, which they rely on daily in the field. The redesign was therefore meticulously crafted to deliver a seamless experience on tablet first, ensuring the interface was clear, responsive, and easy to use on the go.
At the heart of GIS is the interactive map, where each dot represents a business location. The colors indicate the status of Coca-Cola’s relationship with that business, whether they are an existing client, currently in negotiation, or a potential lead. Sales reps can click on any dot to open a modal with business details and its current status with Coca-Cola. They can also assign that business, whether new, in negotiation, or already a client, to themselves or another colleague for follow-up. Multiple businesses can be selected and assigned in bulk, making the platform not only a source of insight but also a powerful tool for distributing work and driving action.
Leadership assigned me to lead a major redesign to modernize the experience across desktop and tablet, simplify interaction flows, and rebuild confidence in the platform. The updated GIS launched in Q2 2024 and is now actively used by sales teams. The redesign improved usability and boosted engagement significantly, raising active usage and task completion from 45 percent to 87 percent.
The redesign was built on the component gallery I had previously created for URRY, Coca-Cola’s B2B ordering platform. GIS demanded new components to meet its specific needs, and these were added back into the URRY gallery, helping the library evolve and reinforcing consistency across Coca-Cola’s digital ecosystem.
My role
I was responsible for leading the redesign of the GIS platform, working closely with stakeholders and developers to align user needs with business goals, and ensuring the updated experience delivered clarity and efficiency.
I was responsible for leading the redesign of the GIS platform, working closely with stakeholders and developers to align user needs with business goals, and ensuring the updated experience delivered clarity and efficiency.
I was responsible for leading the redesign of the GIS platform, working closely with stakeholders and developers to align user needs with business goals, and ensuring the updated experience delivered clarity and efficiency.
I was responsible for leading the redesign of the GIS platform, working closely with stakeholders and developers to align user needs with business goals, and ensuring the updated experience delivered clarity and efficiency.
My key responsibilities were
Redesigning the UI for desktop and tablet, modernizing the vendor-facing platform
Building a scalable component library and custom icon set
Creating light/dark map themes with Snazzy Maps for flexible viewing
Designing point detail cards to display essential client information directly on map selection
Streamlining table filters and data flows to simplify access to sales information
Contributing to grid segmentation and legend systems for accurate zone targeting
Establishing design patterns that later supported the URRY component gallery
Redesigning the UI for desktop and tablet, modernizing the vendor-facing platform
Building a scalable component library and custom icon set
Creating light/dark map themes with Snazzy Maps for flexible viewing
Designing point detail cards to display essential client information directly on map selection
Streamlining table filters and data flows to simplify access to sales information
Contributing to grid segmentation and legend systems for accurate zone targeting
Establishing design patterns that later supported the URRY component gallery
Redesigning the UI for desktop and tablet, modernizing the vendor-facing platform
Building a scalable component library and custom icon set
Creating light/dark map themes with Snazzy Maps for flexible viewing
Designing point detail cards to display essential client information directly on map selection
Streamlining table filters and data flows to simplify access to sales information
Contributing to grid segmentation and legend systems for accurate zone targeting
Establishing design patterns that later supported the URRY component gallery
Redesigning the UI for desktop and tablet, modernizing the vendor-facing platform
Building a scalable component library and custom icon set
Creating light/dark map themes with Snazzy Maps for flexible viewing
Designing point detail cards to display essential client information directly on map selection
Streamlining table filters and data flows to simplify access to sales information
Contributing to grid segmentation and legend systems for accurate zone targeting
Establishing design patterns that later supported the URRY component gallery
Tools
Figma
Photoshop
Snazzy Maps
Figma
Photoshop
Snazzy Maps
Figma
Photoshop
Snazzy Maps
Figma
Photoshop
Snazzy Maps
Visuals
Visuals
The following screens illustrate different states of the redesigned GIS interface, showing how sales representatives can sort and target specific areas within Japan, view client details, and switch seamlessly between light and dark map modes on tablet and desktop.
The following screens illustrate different states of the redesigned GIS interface, showing how sales representatives can sort and target specific areas within Japan, view client details, and switch seamlessly between light and dark map modes on tablet and desktop.
Interface default view
User Action: The user clicks on the "Map expander icon."
Business information card modal / Default icons style
User Action: The user clicks on a business ‘dot’ on the map and triggers a modal window with the business information.
Business information card modal / Highlighted icons style
User Action: The user clicks on a business ‘dot’ on the map and triggers a modal window with the business information.
Map slider interaction
User Action: The user expands the filter ‘BAPC’ and start the interaction.
Map grid interaction
User Action: The user clicks on the ‘Grid icon’ and turns on the Grid on the Map.
Map dot selection
User Action: The user clicks on a ‘dot’ on the map, triggers the business information modal and clicks on the ‘Select Store’ button. This action enables the "Assign business" button on the header.
Table filter top bar (Multiple filters applied)
Resulting Action: When multiple filters are applied, the ‘Filter icon’ on the table changes to a selected state, and a new bar appears at the top, displaying each applied filter as a tag. Each filter tag includes an ‘X’ button to clear that individual filter. A ‘Clear all filters’ button is also available at the far right of the bar, allowing users to reset all filters with a single click. If the total width of the filter tags exceeds the available space in the bar, the tags will be hidden, and users can horizontally scroll to view the remaining applied filters.
Business information card modal / Default icons style
User Action: The user clicks on a business ‘dot’ on the map and triggers a modal window with the business information.
Business information card modal / Highlighted icons style
User Action: The user clicks on a business ‘dot’ on the map and triggers a modal window with the business information.
Map slider interaction
User Action: The user expands the filter ‘BAPC’ and start the interaction.
Map grid interaction
User Action: The user clicks on the ‘Grid icon’ and turns on the Grid on the Map.
Population Filter Legend
Resulting Action: When the legend modal window opens, a semi-transparent overlay is applied over the filters section to enhance readability and contrast. This ensures that the modal content remains the focal point while the background content is visually dimmed.
Resulting Action: When the legend modal window opens, a semi-transparent overlay is applied over the filters section to enhance readability and contrast. This ensures that the modal content remains the focal point while the background content is visually dimmed.
Map dot selection
User Action: The user clicks on a ‘dot’ on the map, triggers the business information modal and clicks on the ‘Select Store’ button. This action enables the "Assign business" button on the header.
Table filter top bar (Multiple filters applied)
Resulting Action: When multiple filters are applied, the ‘Filter icon’ on the table changes to a selected state, and a new bar appears at the top, displaying each applied filter as a tag. Each filter tag includes an ‘X’ button to clear that individual filter. A ‘Clear all filters’ button is also available at the far right of the bar, allowing users to reset all filters with a single click. If the total width of the filter tags exceeds the available space in the bar, the tags will be hidden, and users can horizontally scroll to view the remaining applied filters.
Final Reflection
Final Reflection
The GIS redesign was a task assigned by leadership to address falling adoption and unfinished tasks in a critical sales tool. By simplifying navigation and rebuilding key interactions around how sales teams actually work, the launch boosted both engagement and task completion.
What stood out to me was how much impact comes from untangling complexity and designing for clarity. Beyond providing insight, the new GIS also gave sales reps the ability to act directly from the map, assigning businesses of any status for follow-up, selecting multiple locations at once, and coordinating responsibilities across the team.
An important outcome of this project was how it strengthened Coca-Cola’s design ecosystem.
GIS was designed using the component gallery I had created for URRY, and the project demanded new components that were added back into the gallery. This not only expanded URRY’s system but also proved how work on one product can elevate the consistency and efficiency of others.
Project Bridge was an assignment from leadership, and while it never reached implementation due to a business decision, it remains an important piece of work for me. It was a chance to push the Express principle beyond creation into scheduling, making a complex workflow feel light, fast, and intuitive.
The value wasn’t only in the solution itself, but in how it demonstrated my process: framing the problem, exploring directions, and grounding every choice in clarity and flow.
The concept still sits in the backlog, and could be revisited in a future release.