Brody Bikeservice
Brand Development & UI Design
Project overview
From a renowned E-Bike manufacturer to a specialized bicycle service – Brody stands for service readiness and repair options for every bicycle and situation. Brody Bikeservice offers various services that need to be clearly presented on a website.
Freiburg emerges as the first location where Brody Bikeservice is based. Later on, partner workshops will be added, allowing users to choose from multiple locations.
Goal
Creation of a modern, minimalist website characterized by a clear brand identity. The brand aims to convey speed, transparency, and flexibility while maintaining a youthful and professional appearance.
The booking of services is facilitated through an external iFrame provided by a Swiss agency.
Role
Brand Developer, UX & UI Designer, Visual & Motion Designer, Design- and Development team with Nikolas Klauser
Tools
Adobe Creative Suite, Miro, Figma, WordPress & Divi
Duration
June-August 2022
Logo Design & Brand Development
The color scheme and name were chosen by Brody itself to create a clear identity. The italicized logo symbolizes fast and efficient service, while the “Bikeservice” addition highlights the core competency. Two bicycle chain links serve as the key visual element and can be used independently of the logo.
With the modern Ubuntu font, Brody exudes professionalism, progressiveness, and a tech-savvy approach. The emotional aspect is primarily expressed through communication and photos, aiming to establish a strong connection with customers.
Top: Figma UI design for service overview
Bottom: First homepage UI design for implementation (As of July 2022)
Adaptation of the information architecture, restructuring of content, and prioritization based on user surveys and tests (As of February 2023)
UI Design
The UI design of Brody Bikeservice was developed in close collaboration with regular discussions and the use of Figma. Special attention was given to the booking iFrame, which needed to be easily and quickly accessible.
To make the differences between the three services (Workshop Services, Video Service, and Express Service) easily understandable, each service was given its own subpage, which was restructured in the optimization process after the launch. The content was divided accordingly, and FAQs were individually tailored to each service.
Additionally, informative pages such as “About Us” and “Blog” were moved to the footer to focus on the essentials while still providing access to important information.
Icon Design & Motion Graphics
The implementation of icons and motion graphics for Brody Bikeservice was aligned with the corporate identity to effectively convey the benefits and services and enhance the user experience.
A total of four motion graphics were created: one for the general process and one for each service, providing a visually explanatory guide. Desktop and mobile versions of the animations were developed to ensure optimal display on different devices.
Learnings
The most important insight gained was that it is an ongoing process that always allows room for improvements. It is crucial to keep usability and a pleasant user experience at the forefront. Another important aspect is careful navigation naming, as it significantly influences user guidance. These enhancements will undoubtedly be carried over to future projects as well.