Leveraging Crowd for Creating a Wireframe-based Mobile Design Pattern Gallery

The ubiquitous availability of smart phones have made it easier than ever for people to acquire information through apps. Driven by the huge demand in mobile apps, more and more designers and developers are entering the area of mobile app design. However, due to the context of use and limited screen size, it becomes difficult for novice designers or developers to design a good mobile app. In this work, we introduce Dmatch: a wireframe-based design exploration tool to help designers visually query mobile designs for inspiration. Dmatch crowdsources UI element annotations of mobile design images through crowds using Amazon Mechanical Turk. The core challenge is to facilitate crowd of non-experts to generate UI element annotations precisely. Our key observation is that “drawing UI element annotations” requires expertise to recognize and it is much more time-consuming. Therefore, we pro- vides in-hit guiding example aid to enhance their knowledge and a semi-auto intelligent annotation tool to alleviate the workload. Using the “Draw-Verify” workflow design, the experiment result demonstrates that Dmatch can interpret UI element with high precision and recall.