Future Proofing our Technology – Improving the UX of our Data Web Store


Table Of Contents

New UX for the Data Web Store

Technology Improves, So Does The GOLD Platform

As new technologies keep surfacing, we keep our eyes peeled for innovative ways of doing things that improve the user interface of the GOLD Platform.

We’ve implemented new frameworks, described later, that allows us to quickly develop new screens and to streamline the debugging process. Our approach to building new pages on the web store changed and became component-based. Instead of building a web page the traditional way, we would simply take a component and break it down into small, functional units. We unified the three elements of a page that were previously separated; the code, the visual aspect and the layout. This makes it much easier to change a part of the code on the page.

We learned that optimizing the front-end of the Enterprise Data Web Store brought on a lot of improvements without touching the core functionalities and the back-end. For example, one impressive result is that the web store now loads 4x faster than it did previously.

The Enterprise Data Web Store features an interface that end-users will use to shop for data and purchase it. Because your data web store represents your company, it has to be great looking, functional and as fast as possible. Remember, there are no second chances to make a good first impression.

We have to stop optimizing for programmers and start optimizing for users. — Jeff Atwood

Using Open-Source Technology

The modernization plan for the web store interface was two-fold. First, the user experience was inspired by user flows from mainstream e-commerce sites. To implement an improved user flow, we updated the front-end technology from DataTables (a JQuery-based system) and migrated to React– a JavaScript library for building user interfaces. At the same time, we also migrated our APIs to Spring Boot. Finally, we spruced up the system data model, so clients can easily enter and organize data products uploaded to the site.

For the UI framework, we chose React, so that we could create component libraries and have a faster loading website. This resulted in the loading speed being quadrupled! Our initial aim was to get at least 2x speed optimization, so our development team really deserves a pat on the back for their hard work in keeping the code light on the front-end.

The original code was done in JavaScript, however, we migrated everything to a new language- TypeScript. It was a big move that was mainly motivated by fewer bugs. Having a compiled language means that we could catch errors before they would get deployed on the front-end. Another benefit of TypeScript is that it’s easier to facilitate the integration of code between our front-end and back-end developers.

We migrated our APIs to Spring Boot to benefit from the ecosystem, and to have more control over the database connection. With this migration, we’re able to create APIs quickly on swagger for our development team, our client’s development team, and our client’s client’s teams. The optimizations were necessary because the data distribution platform must be flexible, and we allow for layers of development to occur between these teams.

We sourced the latest out-of-the-box tools to make the front-end look prettier. We had to be creative to get some sleek designs for the web store interface. We looked into UI libraries to help us out, and our top three contenders were Material-UI, Ant Design and Blueprint. We ended up opting for Blueprint by Palantir as it was clearly made for the data management industry.

Extreme coffee and coding. (Don’t try this at home.)

Using Open-Source Technology

We re-worked the user experience to improve product browsing and made it more aligned with an e-commerce site. Our goal with UX is to guide users to what they need with ease and grace. Clients also brought to the table the need for improvement when it comes to packaging their data products.

For example, prior to the updates, data consumers of CME DataMine had to enter the data set into the cart before seeing the prices. One simple UX design change was to make the pricing more transparent by showing the prices upfront.

The data is packaged so the buyer is now able to see all the data sets and the meta details that are available from the get-go. The final result is that the navigation of the web store is refined to be better susceptible to browsing.

Watch the Video!

What is an Enterprise Data Web Store?

Learn More

TickSmith – A Leader in Data Monetization

We offer a unique solution for those who need to sell data– a full end-to-end web store infrastructure powered by the Enterprise Data Web Store solution. This includes everything from gathering and centralizing data to entitlements in accessing data at scale. We’re on the cutting edge when it comes to data management and constantly tread new frontiers.

Our future goal is to facilitate data distribution and monetization in all industries. Right now, our specialty is in the intersection of the financial industry and capital markets. However, as the user experience and the technological design of the Enterprise Data Web Store evolves, we’re working towards data distribution and monetization to be accessible to all types of businesses.

Think back to the late ‘90s when e-commerce started. Only the big players could support an e-commerce site. Now everyone, from big to small businesses, can set-up an e-commerce store in one day.  With our combined technology and expertise, we can help you set up a shop for selling your data. If you’re a data producer, we can help you build an easy to use system to distribute and sell your data at scale.

Content Contributors:
David Lauzon, Raisa MacLeod