Dream Gem


Designing for React Native: Sketch + Zeplin

Recently, our company decided to move the Android product to React Native, in order to reach both Android and iOS audiences. So, what did that mean for UX?
Below is the approach I took and the account of what I have learned so far during the process.

Style: The Hybrid of Brand and Multi-Platform:
As far as the design approach, I needed to take into consideration both - the usability and the fact that we are building a new brand. Therefore, I opted for a mix of brand-based design and multi-platform design. (Bene Studio describes both design approaches very well in this article)

High-Fidelity Mocks and Assets:
One of the problems I was presented with was exporting assets for each platform. As far as I can find so far, there's still not a software that does the same thing for React Native as Zeplin or Avocode and a few others do for the web, iOS, and Android. Which is to export assets for that particular platform in the right format. (You can now export code snippets from Zeplin and Avocode)

In order to support different resolutions and sizes on the respective platforms, iOS and Android have different models for supporting images and assets. As far as assets go, the difference is iOS requires assets in three sizes, while Android in five. After discussing this with our developers and some trial and error, we ended up going with the iOS's three-asset model. With that in mind, I designed the high-fidelity mocks in Sketch at 1x for the smallest device we were supporting, which is iPod/iPhone 5, and exported the mocks to Zeplin for iOS at 1x. Essentially, building for iOS. (It's worth mentioning here that we were optimizing for phones only, not tablets.)

System Differences:
There will be cases where systems work differently and therefore will need a different UX approach. For example, we wanted to link from inside an App to Bluetooth in settings in case it got disconnected while the feature was in progress to avoid interrupting the user as much as possible. Although Android allowed it, in the case of iOS, we had to provide the messaging to the user to go to settings etc.

This is the one area where I see React Native lacking the most so far. As it's a new platform, there're still not many components out there to help with animations and transitions. We ran into issues with buggy components, where we had to simplify and modify animations and interactions. In addition, there's a low level of support for some basic styling elements, like shadows. Although React Native gives you some control over opacity, color, and angle in iOS, for example, it only allows elevation for Android. I had to modify the UI by removing shadows in most places and replacing them with other design elements.

In my opinion, React Native will continue to gain popularity and mature as it provides an efficient way to reach both iOS and Android markets. As it matures, we are starting to see platforms like Zeplin and Avocode adding React Native to their list of supported devices (although not completely yet). Meanwhile, exporting assets for iOS works.

I'm particularly looking forward to having more control over transitions, micro-interactions, shadows and other UI details. For now, we can embrace the ability to publish to both platforms at a fraction of a cost, however, expect some limitations when it comes to the finesse of the UI and micro-interactions. 

Helpful Links:

Lana Sidorovskaya