Evolution of Gramener Design Toolset

At Gramener, we have been con­tinu­ously evolving our Design pro­cess over the past years. These im­prove­ments have been to stay in tune with the emer­ging trends in design, ad­opt in­dustry stand­ard tools and cre­ate a cus­tom Design frame­work that helps us de­liv­er out­stand­ing visu­al­iz­a­tions.

This post cov­ers the ‘tools’ as­pect of the design im­prove­ments we’ve im­ple­men­ted, and it dis­cusses the chal­lenges faced and con­sid­er­a­tions on com­ing up with a per­tin­ent tool­set to cater to Gramener’s core of­fer­ing of Information Design & Data Visualization.

Earlier Process brief and tool­set used:

Until a year back, the primary tool we used dur­ing the design phase was paper-pencil for cre­ation of Design con­cepts, while the ac­tu­al designs were cre­ated on Powerpoint. For most en­gage­ments we had a low-fidelity design as de­liv­er­able, where­in the pa­per sketches were trans­lated to a ba­sic rep­res­ent­a­tion on MS Powerpoint us­ing snipped im­ages of charts and oth­er ba­sic dash­board com­pon­ents.

low-fidelity1

In cer­tain en­gage­ments, when there was a need to show a closer-to-actual rep­res­ent­a­tion, a high-fidelity design was cre­ated, again on Powerpoint us­ing im­por­ted SVG ob­jects or drawn chart ele­ments. There was al­most no pro­to­typ­ing or demon­stra­tion of in­ter­activ­ity, save the oc­ca­sion­al power­point slide trans­itions. The need for an in­tern­al Design lib­rary was met by hav­ing all designs stored on the Gramener file server and ex­posed on a search­able, min­im­al­ist­ic UI, that was spruced up with ba­sic pre­views and meta-tags.

high-fidelity1

Given the abil­ity of Gramex, Gramener’s plat­form to quickly pull out charts from the engine’s lib­rary and setup a ba­sic, work­ing ver­sion of visu­al dash­boards, his­tor­ic­ally, there was not much of a need for a stand­ard­ized design tool. Hence, Powerpoint was a quick and light al­tern­at­ive that fit in well with the skill­set of Data Consultants, which is a role com­prised of func­tion­al ana­lysts, who had in­nate com­fort with MS Office rather than the Adobe suite of products.

Evolving needs:

With the evol­u­tion of pro­jects done by Gramener and the rap­id scale-up in cli­en­tele and team size, the need was felt for a re­think of the above men­tioned stack. With a large num­ber of first-time visu­al­iz­a­tion ad­op­ters among­st cli­ents, we sensed their com­fort in re­view­ing solu­tions with a high-fidelity design that showed visu­al design as­pects as close to the fi­nal solu­tion as pos­sible.

With in­creas­ing func­tion­al com­plex­ity and data size of our visu­al solu­tions, Data Consultants had to spend more time in the solu­tion con­cep­tu­al­iz­a­tion and data ana­lys­is phases, where­as there was an in­creased need for ad­di­tion­al sup­port dur­ing the Design phase.

Challenges faced:

In sum­mary, the key chal­lenges faced with the above simplist­ic pro­cess & tool­set were:

  • Variation in qual­ity, fin­esse and look-and-feel of designs cre­ated on Powerpoint
  • Long cycle time for design cre­ation, with an of­ten cum­ber­some pro­cess for put­ting to­geth­er the oc­ca­sion­al high-fidelity ver­sions
  • Teething chal­lenges in de­vel­op­ment han­dover & trans­la­tion of the design
  • Need for mul­tiple design re­views dur­ing de­vel­op­ment phase, coupled with re­work
  • Difficulty in demon­strat­ing state trans­itions, in­ter­activ­ity and user flow with­in a visu­al ap­plic­a­tion con­cept

Alternate Solution:

Given these chal­lenges and the ad­di­tion­al con­sid­er­a­tions of scalab­il­ity & rap­id rep­lic­ab­il­ity, we went about eval­u­at­ing changes needed in the pro­cess, tool­sets & frame­work. We spoke to the design com­munity and took first-hand ad­vice from ex­perts in these areas. From the tools per­spect­ive, we eval­u­ated a vari­ety of visu­al design and pro­to­typ­ing tools in­clud­ing Adobe Photoshop, Illustrator, Balsamiq, Axure and Pinegrow, among­st oth­ers. Based on con­sid­er­a­tions of fit­ment to our visu­al­iz­a­tion li­fe­cycle, avail­ab­il­ity of com­ple­ment­ary skill­sets at Gramener and abil­ity to ad­dress the chal­lenges out­lined, we zer­oed in on the fol­low­ing:

Sketchapp – for Visual Design:

The vec­tor graph­ics ed­it­or from Bohemian Coding has been rap­idly gain­ing pop­ular­ity and has quickly built its own com­munity of loy­al users. With ad­di­tion of new role of Information Designer at Gramener, this tool helped us in the fol­low­ing ways:

  • We found that the tool was very easy to pickup due to its in­tu­it­ive us­ab­il­ity, per­haps closer to Powerpoint. It also had ample tu­tori­als and a ro­bust sup­port eco­sys­tem
  • By design, the tool was meant to cre­ate vec­tor ob­jects and nat­ur­ally fit in bet­ter for dash­boards and web ap­plic­a­tions, while oth­er tools were heav­ily skewed to­wards graph­ic design
  • Has a thriv­ing eco­sys­tem of plu­gins for pro­ductiv­ity im­prove­ment, and im­port­antly provides for easy ex­port of style sheets to aid de­vel­op­ment trans­la­tion
  • Comes at a re­l­at­ively eco­nom­ic price com­pared to pop­ular op­tions, Apple hard­ware prices not­with­stand­ing

sketch-high-fidelity

Invision – for Workflow, Prototyping and Design lib­rary:

A lead­ing pro­to­typ­ing, col­lab­or­a­tion and work­flow plat­form used by sev­er­al design houses around the world, this tool checked-off mul­tiple items in our re­quire­ments list:

  • Provides an end-to-end design work­flow solu­tion with use­ful ad­min fea­tures
  • Has nat­ive in­teg­ra­tion with Sketch and hence it auto­mat­ic­ally syncs, im­ports and stores as­sets from Sketch files. Automatically cre­ates style sheets & en­ables dir­ect look-up
  • Supports ba­sic pro­to­typ­ing needs to show in­ter­activ­ity and trans­itions
  • Has use­ful col­lab­or­a­tion & com­ment­ing fea­tures, and in­teg­rates live design present­a­tion and re­view cap­ab­il­ity
  • Doubles up as a re­pos­it­ory with ver­sion­ing & hence can be used as a design lib­rary

invision

In Summary, be­low is the over­all pro­cess that we have ar­rived at, which has been work­ing well for us and has ad­dressed most of the above-mentioned is­sues we faced:

design-process

Leave a Reply