scroll

A global energy group

Building an internal tool for custom chart creation

When an American creative agency, Schema, sought to weave innovation into a data visualization tool for a global energy and petroleum concern, they approached the Apptension team for a collaborative endeavor. Our team was meant to develop a sophisticated, user-friendly chart builder designed to seamlessly integrate with a custom-built CMS.

Expertise

Project management 

Frontend development

Industry

Energy

Requirements
Challenge
Process
Technical Requirements

Our collaboration started with discussions with the client to enable our team to understand the visualization needs. We recognized the potential of using a custom-built CMS, so we strategized its development and integration with the chart builder for diverse data access. 

The CMS we used was SchemaCMS, a Contentful-like tool we built earlier specifically for Schema agency. The tools main purpose is to enable the client to upload data through CSV files, Google spreadsheets, or API integration with other tools. Later, the data could be used for building and manipulating the pages built using SchemaCMS.

Our design team then developed wireframes and prototypes, ensuring functionality and intuitiveness. Next, using Vue, D3, and StyledComponents, the developers transformed the designs into a dynamic tool. Rigorous testing followed, leading to deployment and training sessions. We remained receptive to feedback, refining the tool to align with the client's evolving needs.

The Challenge

Our client required a versatile chart builder to handle diverse data sets, from furniture images to intricate financial metrics. The tool had to support various chart types and tables, with markdown rendering in cells. A user-configurable filtering mechanism was essential, and once a chart was crafted, its configuration needed encapsulation in a shareable URL. Additionally, the client sought a solution that would be easily embeddable across web pages without complex technicalities.

Our Process

Our solution hinged on three tech pillars: Vue for dynamic user experience, D3 for charting, and StyledComponents for appearance. Integration with the CMS we built ensured the versatility of the options. 

The tool allowed users to weave data stories through various chart types, supported by a robust filtering mechanism. Each chart's essence was captured in a URL, facilitating easy sharing. Embedding these visual stories became effortless, making the tool not just a utility but a powerful storyteller for the client's narratives.

what partners say about us?

Apptension fared well in our project, working with our bespoke CMS and complex requirements. The designs were implemented well and the schedule was kept tight.
Christian Marc Schmidt
Partner at Schema
The code and the work were good quality and really what we were looking for. They were able to bring technical design thinking to the project. Project management was tight and I always knew what was happening.
Daniel Kiyoi
CEO & Founder Magic Dust
Apptension was flexible and professional. When I needed to quickly add capacity, it took a week or two at worst - often days. The cooperation enabled me to slowly scale up my own IT team, and the company was very helpful until the last moments of the transition.
Mateusz Oleksiuk
CEO LESS_
The technical creativity delivered by the team at Apptension was invaluable in the formation of our mixed reality start-up Hyper.
Nathan Sparshott
Co-Founder & CEO of Hyper
The SaaS Boilerplate Apptension built was a huge reason we were so successful, because all these little seemingly unrelated tasks and integrations needed to happen. If we had been working with anybody else, It would have probably taken months to do the same work.
Kwame Nyanning
CEO blkbx.
We needed their help to build the backend services and capabilities needed to deliver a production level on demand. Their ability to produce high-quality work with consistency while dealing with a new type of project was impressive.
Kelly O’Conor
Product Lead, Siberia
The project’s success has resulted in a long-term partnership for design and development. Apptension is a fantastic partner, who is willing to go above and beyond in order to deliver what the client needs.
Catarina Rocha
p(r)oud solutions
Apptension fared well in our project, working with our bespoke CMS and complex requirements. The designs were implemented well and the schedule was kept tight.
Christian Marc Schmidt
Partner at Schema
Looking for similar outcomes?

recent case studies

A global energy group
Building an internal tool for custom chart creation
About
When an American creative agency, Schema, sought to weave innovation into a data visualization tool for a global energy and petroleum concern, they approached the Apptension team for a collaborative endeavor. Our team was meant to develop a sophisticated, user-friendly chart builder designed to seamlessly integrate with a custom-built CMS.

Expertise

Project management 

Frontend development

Industry

Energy

Technology, vue.js, d3, styled components

django
flask
react native
node.js
next.js
python
gatsby.js
vue.js
react.js
javascript
aws
docker
serverless
figma
photoshop
illustrator
after effects
firebase
blender
graphql
nuxt.js
Scss
typescript
apollo
saas boilerplate
styled components
D3
bigcommerce
bigquery
Wagtail CMS
Django Rest
redux
gsap
i18next
kubernetes
Google Cloud
Platform
rabbitmq
celery
Before
After
Prerequisites
Challenge
The challenge

Our client required a versatile chart builder to handle diverse data sets, from furniture images to intricate financial metrics. The tool had to support various chart types and tables, with markdown rendering in cells. A user-configurable filtering mechanism was essential, and once a chart was crafted, its configuration needed encapsulation in a shareable URL. Additionally, the client sought a solution that would be easily embeddable across web pages without complex technicalities.

Requirements
The process

Our collaboration started with discussions with the client to enable our team to understand the visualization needs. We recognized the potential of using a custom-built CMS, so we strategized its development and integration with the chart builder for diverse data access. 

The CMS we used was SchemaCMS, a Contentful-like tool we built earlier specifically for Schema agency. The tools main purpose is to enable the client to upload data through CSV files, Google spreadsheets, or API integration with other tools. Later, the data could be used for building and manipulating the pages built using SchemaCMS.

Our design team then developed wireframes and prototypes, ensuring functionality and intuitiveness. Next, using Vue, D3, and StyledComponents, the developers transformed the designs into a dynamic tool. Rigorous testing followed, leading to deployment and training sessions. We remained receptive to feedback, refining the tool to align with the client's evolving needs.

Roadmap
Solution
The solution

Our solution hinged on three tech pillars: Vue for dynamic user experience, D3 for charting, and StyledComponents for appearance. Integration with the CMS we built ensured the versatility of the options. 

The tool allowed users to weave data stories through various chart types, supported by a robust filtering mechanism. Each chart's essence was captured in a URL, facilitating easy sharing. Embedding these visual stories became effortless, making the tool not just a utility but a powerful storyteller for the client's narratives.

WHAT The CLIENT Said ABOUT this project?

What partners say about us?

Apptension fared well in our project, working with our bespoke CMS and complex requirements. The designs were implemented well and the schedule was kept tight.
Christian Marc Schmidt
Partner at Schema
Apptension fared well in our project, working with our bespoke CMS and complex requirements. The designs were implemented well and the schedule was kept tight.
Partner at Schema

what partners say about us?

The code and the work were good quality and really what we were looking for. They were able to bring technical design thinking to the project. Project management was tight and I always knew what was happening.
Daniel Kiyoi
CEO & Founder Magic Dust
Apptension was flexible and professional. When I needed to quickly add capacity, it took a week or two at worst - often days. The cooperation enabled me to slowly scale up my own IT team, and the company was very helpful until the last moments of the transition.
Mateusz Oleksiuk
CEO LESS_
The technical creativity delivered by the team at Apptension was invaluable in the formation of our mixed reality start-up Hyper.
Nathan Sparshott
Co-Founder & CEO of Hyper
The SaaS Boilerplate Apptension built was a huge reason we were so successful, because all these little seemingly unrelated tasks and integrations needed to happen. If we had been working with anybody else, It would have probably taken months to do the same work.
Kwame Nyanning
CEO blkbx.
We needed their help to build the backend services and capabilities needed to deliver a production level on demand. Their ability to produce high-quality work with consistency while dealing with a new type of project was impressive.
Kelly O’Conor
Product Lead, Siberia
The project’s success has resulted in a long-term partnership for design and development. Apptension is a fantastic partner, who is willing to go above and beyond in order to deliver what the client needs.
Catarina Rocha
p(r)oud solutions
Apptension fared well in our project, working with our bespoke CMS and complex requirements. The designs were implemented well and the schedule was kept tight.
Christian Marc Schmidt
Partner at Schema

other success stories

Conversational AI Avatar
Building a real-time conversational AI avatar
Riyadh Air
Building a microsite with a 3D plane model
Feelit
A SaaS mobile app designed to bridge the gap between event attendees and event makers
Creative agency
Developing an eCommerce website for a luxury brand
Mojo
A website solution for an AI-based fertility tester
mTab
Building a full-stack data analysis, visualization and storytelling platform