Native developer's look on building cross-platfrom mobile apps using Flutter, based on our recent project with Folx.
Our App Distribution Tool Open-Sourced! Shuttle Case Study
Shuttle makes easy, secure and fast mobile apps distribution possible. It covers web service and mobile application and was created by Polidea as an internal tool, which allows delivering iOS and Android mobile applications to all stakeholders. Developers may release new builds and check them “live” while project managers may oversee the work and update clients with the final versions. Different levels of permissions and the visibility of information are the key features of Shuttle ecosystem. When you add a seamless integration with CI systems, it makes project configuration simple and quick.
From our perspective, It was also a project that made it possible for us to cooperate, develop and test as many ideas as we wanted on a safe ground. That’s why we asked our lead developer and designer to shed more light on both sides of the story.
But just before we delve into details—we felt that we needed to share our solution with the community and all those who are interested in the app, by open sourcing the app’s backend. To try out our solution, simply use our code and if you need frontend and mobile app—contact us directly! We’ll be more than happy to help, integrate the solution or create a brand new frontend.
So, why did we create Shuttle?
The initial idea of creating Shuttle predecessor—Polidea Store—came from our developers themselves. They were in need of a service that would help to distribute new versions of the applications we had been currently working on to our testers and clients. In Shuttle the general idea remained the same but we definitely wanted something more. Something that would not only be a proof of concept but a fully functional, well-thought product.
From a developer’s perspective, Shuttle was a unique project. First of all, there was no client to deal with. Of course we designated one of us to be a product owner and eventually make final decisions, but the ideas of what to do and which possible way we could go came from the team. We knew that the core functionality, which was installing apps from our own ‘store’, was possible to implement but the rest left us a lot of space for exploring new territories. The ability to try out new technologies and trending libraries gave us a great possibility to choose the best solutions to our problems. Quite frankly, we were not afraid of trying new approaches and going back in case we didn’t like the end result. That’s what made—in our opinion—Shuttle a very well-engineered application.
Secondly, it was the team itself that made the whole process quite unique. As we had to develop mobile apps for iOS and Android, backend app to feed them with data and frontend to let project administrators manage the whole system, we needed a big team of developers specializing in various platforms as well as designers. Whoever within the company wanted to join the team and had some time to spare— they could do so. We just had to make sure that the code was well maintained and easy to access to newcomers. Organizing the work and taking care of a big and constantly changing team was an interesting challenge itself. The project’s workflow had to be adjusted many times as the team grew.
The redesign of Polidea Store started with workshops conducted with its most frequent users. Our participants analyzed the user flow and commented on what could have been done better. The results led us to rebranding, implementing additional features and changes in the information architecture. We were ready to make a brand new, more usable and more attractive Polidea Store.
Straight after workshops our Trello was full of new, exciting ideas, which we had to evaluate and prioritize. We agreed on what had to be done in the MVP version, which included renaming and rebranding the whole product. After a brainstorming session the team chose ‘Shuttle’ to be the new name for our ‘Polidea Store’.
Being designers, we focused on the new application structure and information architecture first. By going from Lo-Fi wireframes to Hi-Fi wireframes and consulting our decisions with the Product Owner, we prepared first deliverables for the development team.
At the same time we were working on the app’s rebranding and its key visual elements. Our brief stated that both iOS and Android applications should be built from native components and stick to the most popular patterns. With that in mind, we decided to highlight the look and feel of Shuttle by illustrations and animations, keeping all interaction elements standard and well known for the users. The ‘visual extremes workshop’ tool helped us define what kind of visual impression we want to build. Our obvious choice for the theme was space and so it became our inspiration for the logo and the illustrations.
Having our brand figured out and the app architecture specified, we proceeded to visual design of all screens for both iOS and Android. By working together with developers and updating each other during stand-ups and meetings, we’ve created a product that is visually attractive, usable, intuitive and at the same time neatly programmed with the high quality code.
From the first implemented screens we knew that Shuttle should represent a high quality of all the products we deliver. Keeping that in mind we had to make sure that both iOS and Android apps were accessible for everyone. Shuttle turned out to be the perfect project to try out all accessibility features. We not only implemented descriptions for screen readers for both iOS and Android but also worked on the interactions, making sure that the whole user experience is translated from visuals to voice.
- JoannaCommunication Lead
- AgnieszkaUX/UI Designer
- RafałSenior Software Engineer