Mobile

To achieve cross-platform compatibility with a single code base, the choice to use React Native has been quite straight forward. Together with the very curated packages from the Expo SDK, the framework allowed for a smooth functionality to UI integration.

React Native has been particularly useful in building the UI due to DPs and the availability of the flexbox layout. With a little bit of care, the entire UI has been made fluid and responsive. And not only by means of screen size, but also orientation, allowing to better adapt content for portrait and landscape views.

The use of the Expo SDK eased development by taking away the hassle of dealing with native platform code and binding to the JavaScript environment. It allowed us to focus on developing a smooth UX and app functionality, keeping it in the JavaScript world as much as possible.

, UI design

While developing functionality and laying out content fluidly and responsively is important for a mobile app, you must decide ahead of time the rules of it.
That's where UI design work came in, by the means of using Figma as a tool.

As the client already had a web platform available, the design choices for the mobile app tried to follow the same style.
However, while color choices match closely the background, foreground and accent colors used on the web platform, the content and its presentation had to deviate from it in many places. The information density had to be regulated, keeping in mind the diverse screen sizes on mobile devices; it had to be less verbose in order to fit in fewer rows of content; but most importantly, it needed to be organized for a mobile experience.

The design implemented took care of all those aspects, making sure to contextualize information, group it in menus, modal dialogs, and dedicated screens. Content emphasis has been achieved through different colors and layout arrangement. Careful use of loading indicators and desaturated colors has also been used to differentiate the states of asynchronous actions and available functionality.

Overall, the result is a proper mobile tailored experience, with familiar UI elements, behavior, actions placement and outcome.