Blurring the lines between design and code

At the start of the year we began a conversation with Billogram - a Swedish start-up with the ambition to improve cash flow for small to mid-size companies by streamlining the invoicing procedure. In early discussions we saw a massive opportunity in making their service mobile, allowing their customers to manage invoicing anywhere and at anytime. billogram-logo

Both parties believed strongly in the mobile proposition and agreed to enter a joint venture on the mobile side, where ustwo would gain equity as well as take part of the revenue incurred from the users acquired via mobile.

The baseline for the collaboration was to create an MVP (Minimal Viable Product) with the ambitious target to have something launch ready within a month. This would allow us to test our Lean Design & Development processes as well as our team setup, all with defined targets and a clear incentive in place. clover

The core team building this MVP consisted of one visual designer (me), one UX designer, one developer and one tester. The perfect multi discipline quartet where all team members worked closely together with Billogram on a shared vision for the product.

Three weeks into the project the design tasks were already starting to decrease, yet the development workload was quickly increasing. At this point we decided to be bold and try a new way of working, to increase the speed of our workflow to the level we needed to meet the ambitious deadline.

We agreed that, as a visual designer, I would take on the task of learning how to use interface builder with the storyboard feature, in Xcode in order to relieve the developer’s workload. I would take over the responsibility of design related front-end tasks in Xcode, like building the layouts for the different views and adding styling to all these elements according to the design that I had previously made in Photoshop. This would then allow the developer to focus on what he does best i.e. the logic behind the solution as well as bug fixing, rather than implementing design. BillogramDesigningInXcode

At a few points during the project we also changed design direction and needed to re-think or re-style certain parts of the app, and because of the way we were working it meant the developer didn’t even have to worry about the re-design, since it was already taken care of by the person best suited for the job - the designer. re-design-example

By doing this we effectively eliminated a lot of miscommunication that previously would have become an issue, and it felt we put our individual strengths to best use.

A simple task such as adding icons to buttons could now instead be delegated to a designer. The time saved on this, could then be used on other development tasks, such as figuring out how to calculate taxes on a payment, etc. BillogramHoldingPhone

As a designer this made me feel empowered and more immersed into the creation process of the actual product. After implementing the design and then building it on my iPhone, I could “feel” the design and also explore different alternatives in the actual product itself. Without even going into Photoshop I could make design decisions by exploring options straight in Xcode.

This innovation of our workflow proved to be a real time saver and it helped push the team to become even more collaborative whilst having fun throughout the process.

It’s worth quickly noting that there’re still many limitations as to what you can do in Xcode without having coding skills. But even if it’s only half way there, it’s still a big leap forward for our designer/developer collaboration.

If you’re based in Sweden you can download Billogram HERE.