For most European entrepreneurs, Teamleader needs no introduction. The Ghent-based scale-up has been helping companies work smarter since 2012 with the help of its state-of-the-art CRM system. They enlisted In The Pocket’s expertise to create a more seamless mobile experience.
Teamleader’s SaaS solution is very versatile, which makes it hard to translate to a simple mobile experience. The existing app contained much of the product’s functionality, but proved hard to navigate or expand upon. In The Pocket decided to start with a clean slate and build a fresh, seamless application from scratch.
- Build an easy-to-use mobile app.
- Allow easy feature and module extension in the future.
- Create a new API for easy integration.
Inspired by Stephan Verhelleman, at the time Senior Product Designer at In The Pocket, we based our way of working on the theories of Stanley Wood of Spotify.
According to Wood - and to us - it is important to establish some keywords that are crucial to the goal of the product and can be used as a reference throughout the whole design process. It gave us a way to validate and review the designs with the whole team and open up a discussion.
Our collaboration started with a Discovery Track. It’s a great way to get both parties to align visions and ideas. During this time we learned exactly how people are using the Teamleader application, and which of the use-cases makes most sense on a mobile device.
By involving development straight from the start, the hierarchy between the design and implementation stays in sync. This enables incremental design reviews that focus more on the usability rather than fixing visual details further down the road.
Then, we discussed the best approach for each single module: would it make sense to allow users to carry out a full flow, like time tracking or tasking, or would it suffice to show basic information, like checking up on a project status? No stone was unturned and every possible flow was mapped out.
It was also important for us to create a dynamic solution that proactively assists its users with a dashboard that changes throughout the day. Every notification or data point can be turned into an actionable follow-up action. To make sure the navigation and concept were future-proof, we created an extensive clickable prototype to fully understand how the various modules were to work together.
In order to achieve the most effective result, the same set of design principles was maintained throughout the application. By using this technique we were sure the user experience would be consistent. As mentioned before we based our work on the principles written by Stanley Wood in this blogpost, who for a long time struggled with the fragmentation and inconsistency of Spotify’s design.
That’s why he introduced Principles and Guidelines to align their design critiques and shape a collective voice across the design teams at Spotify. This is how dealt with this issue while we helped creating the Teamleader app:
- Similar patterns were used throughout the app, giving each module roughly the same structure.
- We decided to go for a component-based approach, making each of the components reusable while ensuring its versatility. As a result the same component might be used for different types of data.
- Similar items were made easy to distinguish by reusing patterns and components. Making sure users immediately see the difference between similar items, such as a personal contact or a company, is key to building a successful app.
- Very much like the Teamleader software solution this app was very easy and intuitive to navigate.
Every single screen or module was documented meticulously and clearly marked the design principles we used. This documentation served as a solid base to start development.
React Native, the cross-platform (one code-base for both iOS & Android) technology of choice for the new app, easily matches with the component-based approach. This ensures reusability is carried through, from design to code. Teamleader itself has React Native capabilities within it's engineering team, perfect for a straight-forward hand-over of the project.