From Product to Wireframe

Wireframe goal should be to focus on the “why” of the product. The design and UX should focus on the “how”.

Recently I was planning to clean up the UX and add some new features to an old mobile app of mine: Bike Plus NYC iOS | Android.

I started by taking some screenshots of the current app and then importing them in Sketch.

After few iterations and new artboards and I realized I needed add phone frame around those to give a little bit more perspective.

I had 3 options:

• Manually edit each artboard. Tedious and boring activity. And not easy to switch from an iPhone case to an Android case. No go;
• Write a Sketch plugin that parses each artboard, add a new layer, apply the case and then skew all other layers to fit into the screen area. Overkill;
• Write a simple script that just combines 2 images. Computers are good at this tasks. Yes go;

I opted for a simple script.

The script had to combine the artboard and a phone case:

I wrote a quick script which magically handled the work:

I just had to export the artboards and run a script. All artboards were stored in ./composite folder and wrapped in a nice phone frame.

The colors were distracting. So I applied a filter to the artboards to remove the colors.

convert has a nice grayscale filter out of the box. I just had to add these few lines:

Here the final result:

I can keep working in Sketch and import these new images in a presentation or on storyboard like this one:

See you next time.

I currently work at Zillow. “Opinions expressed are solely my own and do not express the views or opinions of my employer.”