Radfix

Providing repair and maintenance services for cyclists at train stations is a great way to make using green transport methods even easier. Even better, this project brings local bike workshops new customers, supporting the local economy.

Using Radfix, cyclists can bring their bike to one of the Radfix bike lock stations in the morning, book a repair simply on their phone, then pick up their fully-serviced bike at the end of the workday from the same location.

We were super happy to be working with Deutsche Bahn to bring the first of their Service&Stations AG project to life. This product involved every team at bitcrowd, working together to design & build every aspect of the service.

The Radfix team came to us with a well-formed high-level idea of what their product would be, and wanted that idea to become a fully-defined and refined product. We guided this process, leading a series of workshops using established techniques of brainstorming, ideation, sketching, and wireframing to explore the way Radfix could work, and how it could fit into the lives of our customers.

We held online workshops in shared video calls, together with a shared online “infinite canvas”. Participants could draw freely on this digital whiteboard, sharing and expanding their ideas, while discussing and giving feedback, and judging reactions, through the video call.

At the end of this ideation process, we had a clear and precise definition of the product — what features it would have, exactly how they should work, its limitations, and how the user would move through the main functionality.

We refined the rough lo-fi wireframes we had sketched collaboratively with the Radfix team, giving us a specification of the content and functionality of screens of the app. With these wireframes , and the other diagrams we had created, we could start building each aspect of the application.

Our backend team built the server-side functionality and database that’s needed to support the application’s functionality. Our design team took the wireframes, and applied layout, color, and branding, step by step creating the UI that the app’s users will see. This is a highly iterative process, where we rely on guidance from the clients — clients know their customers and their brand, and are best-placed to validate choices made here.

Once the client gives the visual designs the “OK”, our frontend team can build the app, knowing that they have a stable, fixed specification of the UI they will build. Any changes from this point on are normally minor, normally only needed for technical reasons. Of course not everything is foreseeable, and sometimes we have to deal with last-minute requirement changes from clients due to legal advice or business reasons.

The backend team designed the server-side logic to handle each of the Deutsche Bahn projects that we knew would follow Radfix. Each project shares much of the same code & functionality, making implementation quicker and the products more reliable.

Our design team learned their way around the Deutsche Bahn styleguides and design systems. DB gave us access to their styleguide and design system documentation, and even provided some (remote) face-to-face time with their design team. This meant we could create fitting new UI elements for Radfix, extending their design language. These components would be applied to all the incoming DB projects, including the customer-facing webapps and the marketing landing pages.

The frontend team chose the tech stack and designed an app & repo structure that would work well for Radfix and for each of the coming DB projects. With each project, we expanded and refined the component library we built for Radfix, sharing these advances with each project.

We built the customer-facing webapp on react & tailwind, and handled the data and data bindings with graphql and apollo. We used storybook for organising and QAing the beginnings of our new component library. That included components such as a date-picker, slider, and hamburger-menu sidebar.

The webapp is a mobile-first app, with adaptions to work larger-screened devices. For the technical and usability advantages we normally build mobile-first; on this project mobile users were the focus, so we needed few desktop adjustments for the MVP.

Radfix needed an engaging branded landing page to inform both cyclists and bicycle workshops about the advantages of the service. Based on their specifications we designed each of the required pages, creating a variety of visually interesting layouts to present different blocks of content. The pages are editable using the user-friendly Apostrophe CMS.

DB employed a branding agency to create illustrations and text content for the site. We collaborated with them, giving content specifications and visual designs. This was an iterative process, with the Radfix team giving feedback at each round. We published the new UI components as a Sketch component library, making them accessible in the design software for DB designers to try out layouts of new pages before building them in the CMS.