Evolution of Gramener Design Toolset

Earlier this month, I had written an article in our company blog. I'm reposting it here again:

At Gramener, we have been continuously evolving our Design process over the past years. These improvements have been to stay in tune with the emerging trends in design, adopt industry standard tools and create a custom Design framework that helps us deliver outstanding visualizations.

This post covers the ‘tools’ aspect of the design improvements we’ve implemented, and it discusses the challenges faced and considerations on coming up with a pertinent toolset to cater to Gramener’s core offering of Information Design & Data Visualization.

Earlier Process brief and toolset used:

Until a year back, the primary tool we used during the design phase was paper-pencil for creation of Design concepts, while the actual designs were created on Powerpoint. For most engagements we had a low-fidelity design as deliverable, wherein the paper sketches were translated to a basic representation on MS Powerpoint using snipped images of charts and other basic dashboard components.

In certain engagements, when there was a need to show a closer-to-actual representation, a high-fidelity design was created, again on Powerpoint using imported SVG objects or drawn chart elements. There was almost no prototyping or demonstration of interactivity, save the occasional powerpoint slide transitions. The need for an internal Design library was met by having all designs stored on the Gramener file server and exposed on a searchable, minimalistic UI, that was spruced up with basic previews and meta-tags.

Given the ability of Gramex, Gramener’s platform to quickly pull out charts from the engine’s library and setup a basic, working version of visual dashboards, historically, there was not much of a need for a standardized design tool. Hence, Powerpoint was a quick and light alternative that fit in well with the skillset of Data Consultants, which is a role comprised of functional analysts, who had innate comfort with MS Office rather than the Adobe suite of products.

Evolving needs:

With the evolution of projects done by Gramener and the rapid scale-up in clientele and team size, the need was felt for a rethink of the above mentioned stack. With a large number of first-time visualization adopters amongst clients, we sensed their comfort in reviewing solutions with a high-fidelity design that showed visual design aspects as close to the final solution as possible.

With increasing functional complexity and data size of our visual solutions, Data Consultants had to spend more time in the solution conceptualization and data analysis phases, whereas there was an increased need for additional support during the Design phase.

Challenges faced:

In summary, the key challenges faced with the above simplistic process & toolset were:

• Variation in quality, finesse and look-and-feel of designs created on Powerpoint
• Long cycle time for design creation, with an often cumbersome process for putting together the occasional high-fidelity versions
• Teething challenges in development handover & translation of the design
• Need for multiple design reviews during development phase, coupled with rework
• Difficulty in demonstrating state transitions, interactivity and user flow within a visual application concept

Alternate Solution:

Given these challenges and the additional considerations of scalability & rapid replicability, we went about evaluating changes needed in the process, toolsets & framework. We spoke to the design community and took first-hand advice from experts in these areas. From the tools perspective, we evaluated a variety of visual design and prototyping tools including Adobe Photoshop, Illustrator, Balsamiq, Axure and Pinegrow, amongst others. Based on considerations of fitment to our visualization lifecycle, availability of complementary skillsets at Gramener and ability to address the challenges outlined, we zeroed in on the following:

Sketchapp – for Visual Design:

The vector graphics editor from Bohemian Coding has been rapidly gaining popularity and has quickly built its own community of loyal users. With addition of new role of Information Designer at Gramener, this tool helped us in the following ways:

• We found that the tool was very easy to pickup due to its intuitive usability, perhaps closer to Powerpoint. It also had ample tutorials and a robust support ecosystem
• By design, the tool was meant to create vector objects and naturally fit in better for dashboards and web applications, while other tools were heavily skewed towards graphic design
• Has a thriving ecosystem of plugins for productivity improvement, and importantly provides for easy export of style sheets to aid development translation
• Comes at a relatively economic price compared to popular options, Apple hardware prices notwithstanding

Invision – for Workflow, Prototyping and Design library:

A leading prototyping, collaboration and workflow platform used by several design houses around the world, this tool checked-off multiple items in our requirements list:

• Provides an end-to-end design workflow solution with useful admin features
• Has native integration with Sketch and hence it automatically syncs, imports and stores assets from Sketch files. Automatically creates style sheets & enables direct look-up
• Supports basic prototyping needs to show interactivity and transitions
• Has useful collaboration & commenting features, and integrates live design presentation and review capability
• Doubles up as a repository with versioning & hence can be used as a design library

In Summary, below is the overall process that we have arrived at, which has been working well for us and has addressed most of the above-mentioned issues we faced: