Logo

Scott's Portfolio

Github Profile LinkedIn Profile Go home

Quick Mocks - Features

Back to original article here


Designed for Devs

Love writing dev specs? Me neither. Specing even the simplest of forms can become verbose when written down. Quick Mocks (QM) can take an existing form, add some fields, update some labels, change an icon or two, and you’re done. A picture says a thousands words and QM lets you make them in seconds.

QM was loved by devs for specing up tasks, screen designs, bug fixes etc. Managers even complained that the mocks looked too real! So I created a ‘mockify’ filter to make images look more mock-like.

As the company expanded, QM became a key tool for me and other devs who often worked with offshore developers. Communicating through mocks became necessary to effectively manage our time when outlining requirements.

Adopted by Designers

Why use Photoshop or Balsamic to recreate screens you already have? Simply load an existing page and use QM to refine it. This saved designers’ time and effort from replicating every design in our ever growing suite of products. Users could save fully editable pages to collaborate and iterate on designs too!

Unexpected Users

To my surprise QM broke out of the R&D bubble and was adopted throughout the company. Marketing and Sales teams became frequent users and used them for videos and live demos.


History

The original version was built in a single day for the first ‘Hack Day’ at a prior company of 1000+ employees. It placed 2nd and was released for general use soon after. Over the following months it was adopted by 300+ employees through which I gained valuable feedback.

A year later Quick Mocks 2 was released offering dozens of powerful new features including draggable elements and fully editable page saves. The release was the primer for two additional awards - a second ‘Hack Day’ win and the ‘Innovation of the Year 2018’ award.

As the QM guru I often ran small workshops to teach users how to use it. This helped expand its usage and gave me instant feedback from users. Some users even turned into fans and helped other employees adopt it.

No QM-like utility existed at the time but similar tools have since popped up.

I believe that this concept worked particularly well at this company for one reason: we had thousands of screens with a generally consistent design.

Building a new product? The general layout and UI components probably existed. QM simply let you paste in the components you wanted, tweak some labels, and you were 90% there. Any dev/designer/tester could then envision the objective and get up to speed quickly. For this reason QM was a hit at first sight.


Back to original article here