Specstra 2.0 : My Experiments in Cloud Based Design Process Automation

Specstra 2.0 : My Experiments in Cloud Based Design Process Automation

 

“Automation” is one of the trending phenomenon of the current technological world. Manufacturing industry has been pioneering it for decades. Other verticals are following it. In software development , testing and deployment field, automation is popularized by Dev OPS and Continuous Integration (CI) that helps speed up the software development life cycle (SDLC). But the SDLC is not only about the So what about the software design industry? What about the design phases of any SDLC? While design is getting more and more recognition across the entrepreneur world and many industry efforts like ‘IBM Design Thinking’ and similar frameworks and associated methodologies are trying to create a synergy between the ‘Agile’ approach of SDLC and the “Design Thinking”, it is an interesting crossroad in time, that can show ways of developing more usable and meticulously designed software and similar products. So when everyone is trying to bring automation to speed up process and speed up delivery, it is really interesting as well as challenging to come up solutions and tools that help in automation of designing phase of SDLC.

In context of Software industry I always see “Design”  as an intersection between creativity and the technology where both shape each with the help from user needs and blending of these results into successful products. This also is the reason automating designing process is a lot more challenging than building solutions for automation of purely technology driven process. I accepted this challenge 2 years back during my short stint at an R&D center at Bangalore, of a leading mobile  brand, I was part of a large design team, where almost 70% of the crowd was visual designer and the rest belong to user experience and research team members. And many of these visual team who worked on different projects, complained about certain phases of the design process that involved creation of style guide of the app that they were working on. Every app project used to be developed for different flagship phones models with different resolutions as well as screen densities. And being developed in native languages for Android view-ports, designer used to develop each style guide for each project separately for each model of phone. Each style-guide has to be detailed to pixel level which the designer has to calculate and define taking calculation of the view port pixel density(PD). Many designers have to maintain different versions of the mock-up and the create specs for each version, which was more like a “drafts man’s job” with lesser creative moments for expressions and innovation than the previous phase where the designer has to follow the wire-frame and come up with pixel perfect mock-ups of the app screens.

Almost all the designers tried to grab their hands on the creative part of the job, getting engaged with the stake holders and
The senior designers prefered to avoid working on the style-guide, though they would love to review one. The not so seniors worked on the the drafting of the guide and churned out the specs document, yet do the crying that it is less creative even though it is one of the most critical part of the design process.

So I thought of calculating how much effort we are giving to a creative phase of creating a visual mock-up vs. a drafting work , i.e. creation of a specs document /style-guide. Roughly on average one view of a single screen to  be mocked up in something around 4-8 hours. creation of a very detailed spec. might need 4-6 hours of job. But if it is designed for multiple view-ports of an operating system with significant pixel density change along with varied resolutions, then this drafting time gets multiplied. So by creating 4 generations of phone models running different generation of Android might need 16- 24 hours. So the designer actually takes roughly one week of work for a view in this case from wire-framing stage to finished design with specs ready for the developer. Averagely an app can have 10 views , so the whole app would need approximately a month of work to be designed and be ready for 4 different models. Even though this is a very haigh level bare-bone calculation, it indicates a few things —

 

So in this context for a designer —
1. for the designer 1/4th of his work remains creative and gives him the scope to explore, innovate and express through his designs.
2. remaining 3/4th of his time is a purely drafts-man job.
So a designers job is actually boring as the volume of his output is not creative or inspirational.

For the organization —
1. It is paying higher fee for lower type of work. To exlain it — a creative work like that of coming of new designs is typically high paid job, where as the drafting job based on a creative guy’s is a low profile job , and should be paid less.
But interestingly this is the same designer, so the payment rate is actually based on his skill of how he performs in the 1/4th of the job where the creative juice flows and he is actually innovates.

2. Even though the 3/4th of the job is lower profile job, which could have been automated,consumes more from the delivery time. if we look at the timeline of the delivery of the design deliverables, we see that 1/4th of the delivery time is actually spent in creative way. So actually if there is a scope to automate the low profile manual work, where the designer does not need to use his right brain, then the deliverables could have been delivered in just 1 week instead of a month! Also note that time is money for industry, so the organization is actually spend 300% more than it should and that too on a higher price point.

Again apart from this there are other factor that contributed to a above problem. Being in a world of rapidly changing requirements, many industry are following “Agile” or “Iterative” approach of work. Which means in the short notice things can change even to the look and feel and UI aspect which would mean a change to the style guide if view of standard control lines are affected.This has a cascading effect that flows through the style guide work. So any change in such requirement means the wastage of effort and addition of new efforts to keep the specs aligned. Imagine, if multiple design centered projects are running on mission critical deadlines due to faster time to market needs, and such kind of scenario is happening to most of the projects. Looking at these kind of need, many design firms, keep a larger design workforce, to absorb such shocks. But that means more volume of cash burn at a higher price points for the enterprise and smaller startups do not stand a chance in such scenarios.

Another aspect that I think is important to notice here is that due to time crunch, many designers prefer to avoid granularity in the style guides. Provide common documentation and provide very high level change documentations to developers. Also in some cases there are gaps left in the document that go unnoticed, which forces the developers to get in touch with the designers during development phases. Also due to lack of a complete and meaningful style guide or specs, the software testing also gets impacted due to many blur lines among what is in and what’s out. Certain things the testers take as assumptions while completing the testing phases.

Specstra is a pet prototype that I had started working on, 3 years back (around 2013) to explore a possible solution for design related automation process.
The problem of design automation is most of the process blocks are related to creative aspect of the work the designer does. So I started with the blocks that were more aligned to less creative activity so that these blocks can be removed from the creative process flow . One of such area was creation of style guide design from the selected design where the designer has to spend hours to manually define specs.

 

SAMPLE STYLE GUIDE GENERATED FROM THE PROTOTYPE
https://samirshomepage.files.wordpress.com/2016/08/sample-generated-style-guide-output1418308769-en.pdf

 

The user can upload  Adobe Photoshop (  PSD), Adobe Illustrator (.AI), or PDF formatted exported from any design tool (Corel draw, Paint etc.) and within minutes Specstra can generate style guide which other wise would have taken the user days to complete and that with prone to error.

Typical Pain-points of manual approach of style-guide or a specs document creation are:

  1.  Tedious process
  2.  Lots of manual work
    no creativity – draftsman-ship work is not fun for designer.
  3.  Time & effort consuming activity
  4.  Not scalable
    there is limit to how much a single designer can do
  5.  Comes with cost
    Creative guys are paid to do these non-creative tings – however charges   remain the same.
  6.  Threat to agile projects
    last moment changes in design can impact the software delivery

 

Specstra addressed all of these along with some additional benefits —

  1. Completely Cloud based
    N
    o software to install
  2. Not restricted to Adobe software solution
    Can support non adobe software
  3. Minimal user intervention is workflow
    Design automation is possible
  4. Quick to Delivery
    Reduces the designer time to delivery by 99% or more.
  5. Saves $$$$
    Saves money by 50% or more.
  6. Supports creativity
    Designer can save more time for creative stuffs and is saved from draftsman-ship.
  7. Multi-language support
    Helps a global team
  8. Supports Agile SDLC
    Quick iterations and design changes will not delay the time to development as style guide can be ready in a few minutes.
  9. One click User Experience
    One click GUI guide makes the workflow super easy.
  10. Automatically handles multiple device resolutions and screen densities.
  11. Scalable for any volume of works.
  12. No need to pay to reserve people for the work .

 

Overview of Features:

https://www.linkedin.com/pulse/api/edit/embed?embed=%257B%2522owner%2522%3A%2522%2522%2C%2522request%2522%3A%257B%2522finalUrl%2522%3A%2522https%3A%252F%252Fsamirshomepage.files.wordpress.com%252F2016%252F08%252F2ss.png%2522%2C%2522originalUrl%2522%3A%2522https%3A%252F%252Fsamirshomepage.files.wordpress.com%252F2016%252F08%252F2ss.png%2522%257D%2C%2522images%2522%3A%255B%257B%2522width%2522%3A1035%2C%2522url%2522%3A%2522https%3A%252F%252Fsamirshomepage.files.wordpress.com%252F2016%252F08%252F2ss.png%2522%2C%2522height%2522%3A582%257D%255D%2C%2522data%2522%3A%257B%2522com.linkedin.treasury.Image%2522%3A%257B%2522width%2522%3A1035%2C%2522url%2522%3A%2522https%3A%252F%252Fsamirshomepage.files.wordpress.com%252F2016%252F08%252F2ss.png%2522%2C%2522height%2522%3A582%257D%257D%2C%2522provider%2522%3A%257B%2522name%2522%3A%2522Wordpress%2522%2C%2522favicon%2522%3A%2522https%3A%252F%252Fsamirshomepage.files.wordpress.com%252Ffavicon.ico%2522%2C%2522url%2522%3A%2522https%3A%252F%252Fsamirshomepage.files.wordpress.com%2522%2C%2522display%2522%3A%2522samirshomepage.files.wordpress.com%2522%257D%2C%2522created%2522%3A0%2C%2522description%2522%3A%257B%2522localized%2522%3A%257B%2522en_US%2522%3A%2522%2522%257D%257D%2C%2522lastModified%2522%3A0%2C%2522title%2522%3A%257B%2522localized%2522%3A%257B%2522en_US%2522%3A%2522%2522%257D%257D%2C%2522type%2522%3A%2522image%2522%257D&signature=AWgnF1Z0hnqw6gMeblbQut9nQtaf&url=https%3A%2F%2Fsamirshomepage.files.wordpress.com%2F2016%2F08%2F2ss.png&uid=40424Multi Design file support:
Outputs from Photoshop, Illustrator, Corel Draw, In-Design, Gem  to be supported.

Super easy to use dashboard:
Dashboard that is easy to use and aligns with the design workflow.

Customized report builder:
Editor to add and remove details, renaming etc.

https://www.linkedin.com/pulse/api/edit/embed?embed=%257B%2522owner%2522%3A%2522%2522%2C%2522request%2522%3A%257B%2522finalUrl%2522%3A%2522https%3A%252F%252Fsamirshomepage.files.wordpress.com%252F2016%252F08%252Findex.png%2522%2C%2522originalUrl%2522%3A%2522https%3A%252F%252Fsamirshomepage.files.wordpress.com%252F2016%252F08%252Findex.png%2522%257D%2C%2522images%2522%3A%255B%257B%2522width%2522%3A767%2C%2522url%2522%3A%2522https%3A%252F%252Fsamirshomepage.files.wordpress.com%252F2016%252F08%252Findex.png%2522%2C%2522height%2522%3A595%257D%255D%2C%2522data%2522%3A%257B%2522com.linkedin.treasury.Image%2522%3A%257B%2522width%2522%3A767%2C%2522url%2522%3A%2522https%3A%252F%252Fsamirshomepage.files.wordpress.com%252F2016%252F08%252Findex.png%2522%2C%2522height%2522%3A595%257D%257D%2C%2522provider%2522%3A%257B%2522name%2522%3A%2522Wordpress%2522%2C%2522favicon%2522%3A%2522https%3A%252F%252Fsamirshomepage.files.wordpress.com%252Ffavicon.ico%2522%2C%2522url%2522%3A%2522https%3A%252F%252Fsamirshomepage.files.wordpress.com%2522%2C%2522display%2522%3A%2522samirshomepage.files.wordpress.com%2522%257D%2C%2522created%2522%3A0%2C%2522description%2522%3A%257B%2522localized%2522%3A%257B%2522en_US%2522%3A%2522%2522%257D%257D%2C%2522lastModified%2522%3A0%2C%2522title%2522%3A%257B%2522localized%2522%3A%257B%2522en_US%2522%3A%2522%2522%257D%257D%2C%2522type%2522%3A%2522image%2522%257D&signature=AVCKNKYP6DKNKpOixF2b5LrW0g2i&url=https%3A%2F%2Fsamirshomepage.files.wordpress.com%2F2016%2F08%2Findex.png&uid=196 https://www.linkedin.com/pulse/api/edit/embed?embed=%257B%2522owner%2522%3A%2522%2522%2C%2522request%2522%3A%257B%2522finalUrl%2522%3A%2522https%3A%252F%252Fsamirshomepage.files.wordpress.com%252F2016%252F08%252Findexww.png%2522%2C%2522originalUrl%2522%3A%2522https%3A%252F%252Fsamirshomepage.files.wordpress.com%252F2016%252F08%252Findexww.png%2522%257D%2C%2522images%2522%3A%255B%257B%2522width%2522%3A864%2C%2522url%2522%3A%2522https%3A%252F%252Fsamirshomepage.files.wordpress.com%252F2016%252F08%252Findexww.png%2522%2C%2522height%2522%3A625%257D%255D%2C%2522data%2522%3A%257B%2522com.linkedin.treasury.Image%2522%3A%257B%2522width%2522%3A864%2C%2522url%2522%3A%2522https%3A%252F%252Fsamirshomepage.files.wordpress.com%252F2016%252F08%252Findexww.png%2522%2C%2522height%2522%3A625%257D%257D%2C%2522provider%2522%3A%257B%2522name%2522%3A%2522Wordpress%2522%2C%2522favicon%2522%3A%2522https%3A%252F%252Fsamirshomepage.files.wordpress.com%252Ffavicon.ico%2522%2C%2522url%2522%3A%2522https%3A%252F%252Fsamirshomepage.files.wordpress.com%2522%2C%2522display%2522%3A%2522samirshomepage.files.wordpress.com%2522%257D%2C%2522created%2522%3A0%2C%2522description%2522%3A%257B%2522localized%2522%3A%257B%2522en_US%2522%3A%2522%2522%257D%257D%2C%2522lastModified%2522%3A0%2C%2522title%2522%3A%257B%2522localized%2522%3A%257B%2522en_US%2522%3A%2522%2522%257D%257D%2C%2522type%2522%3A%2522image%2522%257D&signature=AWcbabFWaLYRtYMCgRov7Eucfo6h&url=https%3A%2F%2Fsamirshomepage.files.wordpress.com%2F2016%2F08%2Findexww.png&uid=32501 

Detailed Report:
Font, Shape, Color, Grid, Absolute, Relative positioning. In every iteration the report  is complete in all respect.

https://www.linkedin.com/pulse/api/edit/embed?embed=%257B%2522owner%2522%3A%2522%2522%2C%2522request%2522%3A%257B%2522finalUrl%2522%3A%2522https%3A%252F%252Fsamirshomepage.files.wordpress.com%252F2016%252F08%252Findex2.png%2522%2C%2522originalUrl%2522%3A%2522https%3A%252F%252Fsamirshomepage.files.wordpress.com%252F2016%252F08%252Findex2.png%2522%257D%2C%2522images%2522%3A%255B%257B%2522width%2522%3A816%2C%2522url%2522%3A%2522https%3A%252F%252Fsamirshomepage.files.wordpress.com%252F2016%252F08%252Findex2.png%2522%2C%2522height%2522%3A461%257D%255D%2C%2522data%2522%3A%257B%2522com.linkedin.treasury.Image%2522%3A%257B%2522width%2522%3A816%2C%2522url%2522%3A%2522https%3A%252F%252Fsamirshomepage.files.wordpress.com%252F2016%252F08%252Findex2.png%2522%2C%2522height%2522%3A461%257D%257D%2C%2522provider%2522%3A%257B%2522name%2522%3A%2522Wordpress%2522%2C%2522favicon%2522%3A%2522https%3A%252F%252Fsamirshomepage.files.wordpress.com%252Ffavicon.ico%2522%2C%2522url%2522%3A%2522https%3A%252F%252Fsamirshomepage.files.wordpress.com%2522%2C%2522display%2522%3A%2522samirshomepage.files.wordpress.com%2522%257D%2C%2522created%2522%3A0%2C%2522description%2522%3A%257B%2522localized%2522%3A%257B%2522en_US%2522%3A%2522%2522%257D%257D%2C%2522lastModified%2522%3A0%2C%2522title%2522%3A%257B%2522localized%2522%3A%257B%2522en_US%2522%3A%2522%2522%257D%257D%2C%2522type%2522%3A%2522image%2522%257D&signature=AYVSZR7YVAVBsqk-LDK-jB1CNEJt&url=https%3A%2F%2Fsamirshomepage.files.wordpress.com%2F2016%2F08%2Findex2.png&uid=417205-10 minutes delivery  :
All reports will be generated in 5-10 minutes of upload.

 

 

Feature #1 – Complete details of the objects

 

  •  Supports text/font, shape, image objects
  •  Resolution dependent (Screen Pixel) units
  •  Resolution independent (Point) units (Auto conversion based on target pixel density of the device ) – example iOS Retina, Non-Retina, Android (LDPI, MDPI, HDPI, XHDPI, XXHDPI, XXXHDPI etc. ), PC Screen standard web resolution  etc.
  •  Font formatting information – size , family, style, color,

 

Feature #2 — Complete details of color, shapes, images & font

  • Supports text/font, shape, image objects
  • Font formatting information – size , family, style, color,
  •  Web safe / Non-web safe color analysis

 

SAMPLE STYLE GUIDE GENERATED FROM THE PROTOTYPE
https://samirshomepage.files.wordpress.com/2016/08/sample-generated-style-guide-output1418308769-en.pdf

 

LINK1:
https://www.behance.net/gallery/41228843/Specstra-2-Cloud-Based-Style-Guide-Automation

LINK2:
https://www.behance.net/gallery/26346085/Specstra-Extract-CSS-Assets-Info-from-PSD-Design-

Advertisements