Design Driven Mobile Development

Tom Brodhurst-Hill on how to let designers work straight on the final product, while the developer are still coding?


This is part of a series of notes from from YOW! Connected conference where leading experts presents their thoughts on all things mobile and IoT.


Classic problem: waterfall model, business requirement change, management engages new agency to refresh brand image, designer need to rework artwork, project blowout nightmare.

Tom’s team at CBA adopted an approach where the designer and developer can work in parallel by a modified agile workflow. The UX and design are separated as two different deliverables.

The UX flow is completed upfront as a Xcode prototype. No high fidelity artwork, but there are enough interaction for user testing.

The team upskilled the designer to do the designing in Xcode Interface Builder using Auto Layout. The designers love the freedom to create an adaptive interface that responds appropriately to changes in screen size and device orientation.

This practice encourages good MVC design. Build class and reusable components with it’s own display logic implemented therein.

Source high fidelity visual directly from designer using PaintCode. Designer place vector in canvas and assign a name. StyleKit class has a convenient API to access all the assets made in PaintCode. That means all of the defined and named colour gradients, shadows, icons and images are available to developers in Xcode.

The design elements are continually fluid and automatically update the app without rework by the developer. The designer can change colours, gradients, shadows, drawings, icons, sizes and even animations at any time, with the next build of the app showing the iterated changes.

This mechanism gives the team graphics that work on both iOS and Android, at all resolutions. For iOS, vector graphics that are drawn at runtime for the device resolution, desired colour and size, greatly reducing the number of assets required.

Takeaway from the talk: Test early and fail early using interactive prototype. Adopt a workflow which incorporates modular UI, where the design will be updated automatically without needing rework by developers.