The Grund team was looking for a professional partner who could turn their idea into an app that would hold up commercially as well as functionally, and could therefore succeed nationally. It was clear after the first meeting that we were not thinking merely about developing a platform, but about designing and building a dynamic, innovative bridge that would bring the amateur football community together and help it develop.
The realization behind the original idea was this: football, one of the world's most popular sports, also conceals a complex and scattered world at amateur level. Grund set out to help in that territory with a platform tailored to the needs of the amateur football community. Through the product development workshops we organized together, we created the structure and the process that let us turn that vision into reality.
The problem
Mapping amateur football and its participants, we found that they meet a number of challenges day to day:
- Players find it hard to find company and an opportunity to play,
- Teams organize themselves with difficulty,
- Maintaining the pitches is precariously funded,
- Support for running a pitch works on paper, where it works at all,
- Pitch booking does not meet modern expectations and is under-digitized.
Working with Grund, we set out to answer those challenges fully and at the same time create new opportunities for the amateur football community.
Our audience
Together with Grund we identified the two main audiences the platform had to serve best: B2B partners looking for reliable commercial solutions, and amateur footballers looking for somewhere nearby to play. For both audiences our goal was a platform that makes the amateur football experience easier and richer.
Pre-design — business advisory
As Grund's professional partner, our job was to shape and build the foundations of the product jointly. Before moving into the delivery and development phase, we aligned Grund's vision with the current needs of users and the market. At that point it became entirely clear which audiences we had to target and which features would serve them best. For those looking for teammates and somewhere to play, for example, we designed a shared pitch-rental system and a simplified team finder, while for those organizing events we laid down streamlined event management tools. On the pitch operator side we put the emphasis on easier administration and better utilization of the pitches.
To make the platform sustainable we worked out a viable financial model and designed a fully transparent digital payment system that helps bring contributing partners on board.
With Grund we laid the commercial foundations together, from forming the vision through identifying the audiences to functional design. Over the course of the collaboration we held a number of workshops in which the product concept was thoroughly outlined and refined. Members of both the Grund team and ours took an active part in every step of the product design process, joining forces in the interest of success.
Preliminary research
During the preliminary phase we began thorough, comprehensive branding research to understand the market and what it offered visually and functionally. That research let us create a relevant, competitive brand and feature set that reflects Grund's values while holding its own alongside the solutions available today.
To survey the digital market we identified and analysed comparable applications that had already implemented some of the MVP features we had designed. That let us learn the best practices in the market and optimize our own product strategy by learning from them. In the analysis we looked not only at their strengths but at their gaps too, avoiding potential pitfalls and making MVP development more efficient still.
App flow design
We started the app flow design from the feature list produced during pre-design and the defined scope. The resulting diagram illuminated the various user interactions and transactions, and provided a solid basis for development estimates and the actual coding work. Once the first version was ready we held an internal review in which representatives of the various teams, from designers to developers, examined and verified the flows thoroughly. That internal audit produced the final version of our project documentation, which we then took as the basis for starting development.
We also worked closely with our in-house developers to make the development process more efficient. We discussed the concrete options for building the application with them, to be sure the planned functionality was technically feasible while the application stayed intuitive and user-friendly.
Wireframing
From the finished app flow we produced high-fidelity wireframes. Creating detailed, high-quality drafts mattered particularly to Grund, so that our partner could see precisely how the individual screens would look and what interactions they would support. The wireframes did not only illustrate the design direction. They gave the client a chance to verify the implementation and ensure it was fully consistent with the original vision.
We again submitted the finished designs to an internal review, in which our development team went over the completed screens. In those discussions we paid particular attention to which technical solutions would be needed to build the planned screens and functionality. That kept design and development closely aligned through delivery.
Prototyping
After the high-fidelity wireframes were successfully completed, the next step was building the precise prototype. Based on the wireframes, it contained the most important gestures and user interactions, but without animation or other supplementary visual elements.
With simple but effective gestures and interactions, the prototype served not only to present the application's design and functional elements but also let the client get close to the intended user experience. That optimized the design process and also ensured the resulting product would genuinely meet the client's needs and expectations.
UI design
One of the most important phases of the project was UI design, in which we produced the application's final visual designs, drawing on what the wireframes and the prototype had taught us.
The design process was built on the Extended Atomic Design System, a comprehensive modular methodology. That system let us follow every step of the design logically and efficiently, and it supported collaboration between designers and developers. Applying it, we created interface elements that were easy to build, modify and extend, and that delivered a consistent, unified user experience.
Above all we are proud that we used our most advanced design system to date, incorporating all the proven practices and innovations we had learned on earlier projects.
In the closing phase of the project we presented the finished UI designs to the client and coordinated with the development team, so that everything would be built as intended.
The design in numbers
Statistically the design phase was highly productive. In total we created close to 150 UI pages, every one of them fundamental to the development process. Those pages derived from more than 200 wireframes, which also covered every possible and material change of state. And the complete design system was assembled from 24 atomic UI elements, usable across every surface of the application.
The goals achieved
Over the course of our work with Grund we reached the goals we had set, and the results speak for themselves. The product created at the close of the project met not only our own expectations but was received positively in the feedback from Grund's clients and investors. The solution we built was ready to enter the market, and it demonstrated the kind of valuable results that joint work and thorough preparation can lead to.
Lessons and room to improve
Naturally, as with every project, there were lessons here too. A perfect project does not exist. The thoroughness and detail of the app flow contributed to the project's success on one hand, and on the other showed that it had turned out too complex. Less data displayed conveys more information, because the project's participants then have fewer but more important details to attend to.
In functional design the client had countless good ideas about where the project could be taken next. On MVP functionality, though, it is worth striving for minimalism and focusing on delivering a single group of features that validates the core idea. Learning from this case, we would define the scope of MVP functionality more strictly, so that the project becomes more measurable and can be shipped faster.
Fundamentally, wireframing and prototyping are warranted when you want to experiment with the interfaces. Those two tools make fast, effective and cheap iteration possible. In an MVP-based project they were used here only for presentability and the early involvement of investors. As a rule that is not recommended.
Following those lessons, the experience gained on the Grund project improved not only the results of that particular engagement but raised our team's effectiveness and professional knowledge over the long term.
