Creating a Dynamic Digital Experience for a Technology Giant's Customers

Building with the future in mind

To make sure we were building a product that could evolve, we had brainstorming sessions around the flow of the experience, product roadmap, underlying architecture, local storage, error messaging, and bailout states.  

We built a robust system of components using React.js, which allows for great flexibility. It was an exercise in component-driven development, emphasizing that building small, sustainable applications is the best solution for long-term viability. This approach also allowed our teams to manage the scope of the project in bite-sized deliverables and schedule project milestones in a modular and scalable manner.

Extending the IBM Carbon Design System

Our design team worked closely with the design teams at IBM to extend the Carbon Design System appropriately for this new tool. Following a world-class, detailed style guide for the world's largest tech company is not for the faint of heart, but we felt right at home.

Flexible component development

The use of Storybook allowed not only for simple accessibility checks and testing variations of components for QA but also provided a means of quickly prototyping components in isolation or together for testing and conducting demos. 

We built functional code as separate, pluggable utilities that can be repurposed in a variety of ways across multiple kinds of applications. This work serves to not only deliver on the immediate project need but also takes flexibility and scalability for future projects into account.

Freedom to live anywhere

IBM has the freedom to place this widget on any Drupal page throughout its site. Using Drupal's content embedding tools allows the end product to live anywhere, on any page. At the same time, the design and marketing teams can tweak the underlying recommendation logic to meet their individual needs.

A highly collaborative team

Working closely with the IBM team, we helped to define and build the back-end logic through the use of score mapping. We also designed the front-end user experience in a highly collaborative and iterative process. The team shared ideas in low-fidelity sketches and diagrams, iterating to higher-fidelity wireframes, visual designs, and HTML prototypes. Weekly demos helped the team be able to identify areas where changes and adaptations needed to happen along the way.

Tugboat enabled front-end developers and designers to collaborate easily and quickly as they worked to refine and QA the design vision for the project. We also used Tugboat previews to communicate progress with client stakeholders for review and feedback, speeding the development process and creating a stronger design in collaboration with those stakeholders.