Mr mirror

Despite the fact that the modern screen design software now provide a completed solution for UI and UX design, a few years earlier, it was not so easy to design for mobile devices.

By that time, designers didn’t have too much practical experience for designing mobile apps, the tools available then was also quite limited.To address some internal design challenges, we spent some spear time to implement a mirroring tool for previewing screen designs on mobile devices (especially for Android). We then added lots of team collaboration features during the iterations. Looking back, it was actually quite close to the design collaboration platforms (like inVision, Zeplin, etc.) were rushing out in recent years — only that ours were years before them!

Photoshop was the king

There’s no doubt that Photoshop had ruled the design industry for decades. You can do almost any kind of visual designs with it. It was our choice by default when started to design for mobile apps 10+ years ago.

The pain points came out shortly — mobile screens are so different with the computer ones. The size, the color, the touch-based interactions are totally different with what we’d learned from designing desktop applications. One thing we had to do from time to time, was to send the screen design to the real devices to preview the effects.

Now if you still remembers how complicated it was to send an image to the original iPhone (via iTunes!), you can imagine how it slowed down the design flow dramatically.

The world isn’t flat

As a global team, we have team members in different geo and time zones, sync up with team members on the other end of the planet was another big challenge for us. The 12 hours time difference made the communication even more difficult.

We needed some solutions to simplify our communications between different design teams.

Exploring options

There were some solutions trying to mirror the screen design on the mobile devices. We tried all of them and despite the fact that they worked ok in simply networks settings, they all tend to fail from time to time when using inside an enterprise-level, encrypted network environment.

It was also a shame that they all only support Mac and iOS, while we were also doing lots of Windows and Android design. We needed a reliable solution which works cross different platforms.

Building the solutions

We starting with building our own mirroring tool, which worked on both Mac and Windows, iOS and Android. It wasn’t difficult to create the basic version. However, the network stability issues appeared to be a real tough challenge. It required too much efforts than we could afford.

Just as we would do with our real products and real users, we sat down and reviewed our own requirements. We realized that our true need was to improve our productivity, having a live mirroring tool was just one way to achieve that.

We ended up with a concept that different designers can “check-in” their designs like the ways developers are doing everyday. Then we can review the designs at anytime on any devices, for ourselves or for each other.

The platform

The solution not only helped us to review our own designs on the real devices, it also for the first time, created a bridge between our designers based in different locations.

Now we can communicate with each other simply by checking-in what we’ve done everyday, and leave comments as necessary.

It could also serve as a digital whiteboard when we were having remote meetings.

Design-to-development, and a lot more

It didn’t just stop as a designer-only platform. We realized that since we’ve put all the design assets on it. It could also become a great platform for designers to communicate with developers and the rest of the team.

We added projects, versioning controls, documentation delivery and a lot more features, it became a collaboration platform where the whole team can participate in the design-to-development process.