Geolocation Map

JOOR is a data exchange wholesale platform that takes away the cumbersome, time-consuming tasks and processes associated with wholesale selling and buying. Brands and retailers no longer have to live in spreadsheets, experience delayed timelines, and work with out-of-date information.

Role

UI/UX Product Designer

Business Objective

Create an interactive way for sales leaders and sales reps to make strategic decisions by pinpointing the under-performing and best-selling styles based on each location's performance.

Overview

The brand dashboard was a premium feature for our JOOR PRO customers. Sales leaders and sales reps could get quick updates about their orders, top styles, connection requests, and top retailers by volume. 

Problem

There was nowhere on the JOOR brand platform that brands could get the wholesale values by locations.

Pain Points

Sales reps managed data of hundreds of rows and columns across reports in Excel daily. It was time-consuming to find the wholesale values of particular styles by locations to identify sales performance and strategize plans to increase sales.

Discover

I looked into a few international and domestic brands' sales reports to learn what data types were in them, how the data were displayed, and in what order. While I wasn't an Excel expert, but reading through a large amount of data in tiny text sizes to find the needed data wasn't a pleasant experience.

Explorations

Given the graph and chart on the dashboard were implemented through a third-party service, my product managers also wanted to explore the service provided's map options. To create the best map interaction experience, I expanded my research to map-based apps, websites, and design communities.

Map Options

With over 20 maps to choose from, I filtered out most of them with 3 user goals in mind, 

  • Display value on hover.
  • Compare the values of multiple selections.
  • Global and domestic map views.

User Types

  • Brands who work with international retailers.
  • Brands who work with domestic retailers.
  • Brands who only work with retailers in one small region.
chosenmap

Explorations

Once we locked down on a map for the project, I thoroughly evaluated its functionalities and learned the possibilities. 

The map's selection highlighted in nature green and its information shown on the right side with a small text hint to Shift + Click on the map to compare countries.

default-single-selection

Single selection

The graph changed slightly with 2 selections to present the information differently.

default-two-selections

2 selections

Group-43
default-multi-selections

How did the colors assign to selections?

I selected several countries on the map and noticed a repeated 10 color pattern.

What's the logic of the selection order?

The selection order logic seemed confusing because the last selected country on the map became the first in the list on the graph.

Design

Once I figured out the selection order logic and the color palette. I began looking for ideas and inspirations, and design to visualize different color combinations.

map-search

Scope Change

The engineering team worked in an agile environment of a 2-week sprint. The initial product requirement was to launch the map with the comparison feature. But due to the complication of the development work would require 2 sprints to complete it, including QA. So the team decided to launch the map for phase 1.

From the design perspective, I needed to adjust the layout for 3 breakpoints and simplify the color options so that the dashboard UI could look like a whole. 

Map_Default_Global

Global map

Map_Default_USA

Domestic map

Design QA

As the engineers built out the feature, I provided design feedback to ensure the production work matched the final designs.

  • The legend's height – there was some limitation to reduce the legend's height, I mocked up a horizontal legend layout to maximize the map view for users to easily navigate.
  • Mismatched colors – I provided correct colors by wholesale values to match the overall UI.
design-QA-1

Live Demo

geo-map

Results

We first launched the feature to a few selected brands for user feedback on what they like and what they would want for phase 2.

What's the best part about the geographic map of sales?

"Quick access to the total amount sold per country." 

"Sales analytic per sales rep territory." 

What could be improved about the geographic map of sales?

"Comparison would be helpful to see the figures for each country at the same time."

Back to top Arrow