A data visualization tool for enterprise marketing teams
Hover over the map to see quick cost-benefit analyses with configurable dimensions.
Every record is ready-to-print and export with a single click. Perfect for decks and reports
Get a quick report of all your marks in a region. Then quickly generate a report for later.
Tropicana came to my team with a massive organizational problem: they’re keeping track of over 3,000 trademarks across 6 continents with a single Excel spreadsheet. Surely, there was a better way! But Tropicana had further ambitions, too. They also wanted to be able to leverage their trademark data to cross-compare sales volume by geographic region against the cost of maintaining trademarks in that area. It turns out that’s a really convenient way to identify high-value markets that’re ripe for expansion: what geographic regions have a high demand for Tropicana products but also don’t charge too much to keep trademarks registered there?
Develop a streamlined data visualization app that satisfies the following acceptance criteria:Makes it easier to see where trademarks are locatedLets users see what trademarks are registered in a given countryHelps marketers quickly check to see if they have IP rights in a given jurisdictionHelps sales teams identify opportunities for growth
To fully understand the needs of the project, I flew to Boston to meet with the head of our firm’s IP Practice Group. There, my team and I spoke with her, her senior associate, and a team of database managers.
However, our limited team resources prevented us from talking to a proper focus group. Instead, we gleaned the anecdotal feedback from Tropicana’s original stakeholders as well as our internal sponsors, i.e., the IP practice group.In the absence of aspirational references, we looked at what our stakeholders often find easier: telling us what they don’t like.
Excel
That keyword kept coming up over and over again, too. Visualization. Our users didn’t like seeing data just on a table, but instead wanted the freedom to explore a map and visualize their opportunity zones that way.
When we asked users why they wanted it, they simply said that it “feels better.” So we drilled down for more specifics. We asked if being able to easily export screenshots of map views, for example, would make it easier to prepare slide decks for their supervisors. They agreed. We asked if it would take less time to train new analysts on using an app with a map interface they’d be more familiar with from Google Maps? Also yes.
Slowly but surely, we realized that the ultimate utility of this app had far-reaching effects outside the immediate app itself. An improved research experience would have cascading, positive improvements on other workflows too.
Therefore, we set out to establish a list of essential user stories and profiles.
A competitor for Vizbridge would be any app that visualizes data on a map. If we get any more specific than that, we realize that the “trademark-on-a-map” niche is so small it practically doesn’t exist. Therefore, we had to be a bit more essential about it.
That’s why we cross-referenced data visualization apps in general. We started with a long, long list of any app we could think of that incorporated a map at all. From there, we narrowed it down to those whose use cases seemed the most similar to ours.
Many product teams would go to a SWOT analysis here. My opinion is that they’re not the best planning tool for design teams. SWOT encourages strategists to think about Opportunities and Threats, external factors that impact a given product’s business goals. Designers should not be concerned with that. At this stage, the designer should only be focused on the Strengths and Weaknesses of a competing product’s User Experience and UI Design. I wanted to keep the team’s focus on the product itself as much as possible.
So I simply had us split our list of competitors into two categories: the ones with good UX, and the ones with bad UX. From there, we reduced further to get the 3 best and the 3 worst user experiences of our sample size.
By making UX the focal point of the competitor analysis, we encourage designers to start critiquing those designs in their heads long before any real design work starts happening. It gets us focused on tangible elements rather than abstract feelings, enabling an evidence-driven approach to UI design. And by focusing on accessibility, both evergreen and ADA-compliance, we guarantee that UI improvements
The lack of direct competitors turned out to be a good thing for us, by the way. It forced us to start thinking about scalability from the very beginning. In other words, it encouraged us to design an app that could handle any type of structured data, as long as it made its way into the app via CSV import.
We identified 3 distinct user profiles which are listed below in descending order of prevalence (the most common user type appearing first).
Vizbridge would primarily be used by mid-level market researchers. In addition to mundane, small tasks like retrieving trademark registration numbers and checking up on a trademark’s status, they would need Vizbridge to make cross-comparisons between Sales Volume & IP Cost easier to visualize. Vizbridge would save them countless hours generating reports, and it’d do so with beautiful graphic illustrations.
The app serves as a quick source of truth for available IP data. Lawyers and legal professionals would use the app for quick lookups, primarily. Generating more standard, tabular reports would also be a key use. For them, speed and clarity is most important. They don’t want to have to bury through menus to conduct a simple query, and they need precision. A simple interface that loads faster and proves easier to use.
Though uncommon, the CFO will be the final decision maker when it comes to strategic choices. So they’ll want easy access to do their own broad-level exploring too.
Vizbridge is designed using the Material 3 Dynamic Color palette, but with some manual modifications. In addition to the standard scheme, our color system adds tonal swatch sets for Info, Warning, and Success. We also modified the values of neutral swatches to have a complementary tone to the purple: a floral white cream color derived from Yellow.
The benefit of this color system is hat it’s based on tokenized color roles. Instead of naming swatches after the hue groups like red, blue, or green (as in Tailwind), you name them after the role that color should play in the UI. By using it, you can give users the ability to customize their own themes. Unsurprisingly, the Material 3 or “Material You” color system is most popularly used on Android apps and operating systems.
Dynamic color is no mere party trick, though.
It helps us personalize the user experience and make it feel more catered to each individual client. While the original client for this project is Tropicana, we knew we would eventually want to repurpose a commercial version of the app that could be offered to many more clients. The idea is that each client’s UI would be themed according to their primary brand color.
We used GoldenType, a type system derived from applying golden ratio coefficients to a hierarchy similar to that employed in the Human Interface Guidelines. The chosen font family, Inter, leverages its creator’s letter spacing algorithm to keep tracking consistently legible and visually pleasant.
Layout scales responsively in increments of 0.129em, 0.272em, 0.618em, 1em, 1.272em, 1.618em, 2.618em, and 4.235em based on the computed line height of the text element with the largest font size among all direct children.
Within containers, we use margins to create ad hoc spacing between elements.
Margin values come from golden ratio quotients on the computed line height of the text element, not its raw size. But for Large and Extra Large margins, this results in excessively large spacing. Hence, the following values:
Firstly, the space between any. two text elements of different sizes should come from setting a margin property on the larger element.
At scale, a proper application might look like this.
When the whole layout uses relative units, it opens the door to reliable optical corrections on container spacing, giving layouts that oh-so-polished feel.
Firstly, we always organize into containers. Containers are scaled according to the largest font size within the container. Padding, gutters, and border radius within the container follow special rules for optical alignment. See the following infographic.
I used a nuclear model for component organization that organizes them from least to most complex.
Claire is a marketing assistant who needs to quickly double-check if a specific trademark is registered in the United Kingdom, then get back to work as quickly as possible.
Since she’s looking for a specific trademark, we can assume she knows the trademark’s name or ID number. Her first instinct is going to be to look for a search bar. We’ve placed one prominently for her in the toolbar.
Enter a query. The search live-filters the country list below and reveals which countries contain matching records.
Click on the record you want to view.
The trademark record she’s selected opens as a drawer from the right. Search does not auto-clear, in case Claire clicks the wrong one by accident.
Heinrich is a financial strategist who’s been asked to figure out if it’s worth maintaining a brand presence in Australia. He decides to use Vizbridge to help him kickstart his research.
Heinrich uses the interactive map to pan over to Australia.
On hover, a summary card appears that gives a very quick overview of the return on IP spend. This will help Heinrich explore, by allowing him to quickly mouse over countries to get a general idea for abnormalities.
If Heinrich clicks the country, the detail drawer opens with all of that country’s data in it.
Desmond needs to update the trademark data in the app with a more recent version of the source data.
Desmond selects the Data screen from the top app bar.
Desmond goes to the Trademarks tab and drags a new CSV onto the upload area.
Back-end functions validate the structural integrity of the uploaded CSV. It returns an error if it detects column mismatches.
Once the import is complete, updated data will now display on the main screen.
The first iteration of this app looked completely different from what we eventually released. Not only in color palette, but in overall structure.
When a user first logged in, they’d be taken to the trademarks screen.
You can see the trademarks are nested directly underneath the countries in the sidebar. At the time, we felt this combined interface saved the user a few clicks, but hiding them behind accordions wound up sort of defeating the purpose.
Notice that the Owners filter is currently set to All Owners.
Here’s what happens when you filter by a specific owner.
Version 1 of the app left a lot to be desired. Let’s take a look at this screen to dissect some of the problems.
Take a look at the top-left quadrant of the screen. Here, we have 3 different data tables: Owned Trademarks, Contested Matters, and Restrictions. So, why is Restrictions in the Nav Rail?
Although it looks like a rookie mistake, there was a certain logic to it at the time.
You see, we were experimenting with having one nav rail item for each unique data set. So, one for each table. And then we’d use the horizontal tabs to allow users to toggle between different views (Map View, List View, etc).
As you can see, the first version didn’t even have tabs at all.
Unfortunately, one stakeholder insisted upon “pre-set filters.” They felt some filters would be used so commonly that we should have baked-in shortcuts for them, instead of requiring them to manually set the “All Owners” and “All Trademarks” filters themselves. But they felt the filters still needed to stay.
As a result, we wound up with these tab links. Yes, “Trademarks” and “Contested Matters” are not different tables. They’re different pre-set filters.
Needless to say, a lot had to change.
Version 2 improved the app in numerous ways.
Ultimately, we reduced the scope of the MVP to only have a single visualization: Map View. In doing so, we removed a layer of complexity from the navigation problem and came up with this more streamlined solution.
The result offers numerous benefits.
Provident error cum. Magni earum voluptates provident. Quia neque et libero rem ea. Fuga repellat eum autem officiis est molestias. Quaerat tempora eaque neque magnam.
Ad veritatis voluptate odit officiis numquam nostrum deserunt. Maxime aperiam praesentium. Excepturi exercitationem et ratione fugiat voluptatem.
Fuga aliquam culpa numquam incidunt quam. Ut alias qui dolorum sed culpa fuga impedit. Consequatur et omnis qui. Odio voluptatibus animi. Et sunt est dolorem ullam assumenda velit.
Nihil ratione eum quasi eius aspernatur. Perspiciatis eveniet aliquam doloremque. Eveniet quod eveniet porro et consequatur voluptatem odio.
Et animi ea unde nobis ab voluptas eius quisquam eum. Nulla esse non cupiditate sed nisi velit itaque. Et rem velit voluptas. Sed modi quisquam sequi odit dolor non excepturi.
Velit omnis aliquid quae et similique et sapiente. Exercitationem optio aspernatur. Consequuntur provident voluptatem deserunt magnam sit earum. Voluptas facere autem quis. Numquam repellendus est voluptate ad magnam. Sit quidem non illo aut repellendus maiores possimus cumque.
At quasi est ea nostrum. Soluta modi perspiciatis pariatur magni. Facere excepturi dolore. Eius itaque eos ut minima facere occaecati earum cumque et.
Sed mollitia dolorem. Illo velit inventore et reprehenderit optio nisi odit occaecati. Consectetur possimus sapiente fuga ex vero minima nemo accusantium et. Libero quia aliquid quos fuga delectus fugit ut nobis. Iure ut labore libero est totam.
