City Transformer: A UI/UX Case Study on Revolutionizing Urban Mobility
As cities grow and environmental concerns escalate, innovative transportation solutions become imperative. This UI/UX case study delves into the development of City Transformer, a pioneering folding electric vehicle designed to transform urban mobility. Conducted on behalf of TENA Studio, where I worked at the time, this project addresses key challenges in urban transportation and showcases the design process, from identifying the core problems to crafting ground-breaking solutions. Explore how City Transformer is set to redefine the way we navigate our cities, promoting efficiency, sustainability, and adaptability
Overview
City Transformer, an innovative electric vehicle start-up, collaborated with Bosch International to design a comprehensive electric vehicle rental service. Our objective was to develop both the Human-Machine Interface (HMI) within the vehicle and a mobile app for browsing, planning, reserving, and navigating to destinations. By emphasizing user research and working closely with the City Transformer team and Bosch developers, we successfully addressed the vehicle’s unique dimensions and features, creating a seamless and intuitive user experience.
My role
As part of the UX/UI Team, my role involved defining and designing all of the steps in the project from start to finish. This included designing the HMI screen within the vehicle and a mobile app to allow users to rent and navigate the CT vehicle. I was also responsible for collaborating with the City Transformer team and Bosch International developers to ensure a seamless integration of the design and code.
The General problem
The main challenge we faced in this project was designing a user-friendly interface for a foldable mini-electric vehicle with unique dimensions and features, such as the ability to expand and collapse its wheelbase for better stability and manoeuvrability.
Additionally, we needed to seamlessly integrate the mobile app with the vehicle’s HMI for a smooth user experience.
Due to the tight deadline for the BCW exhibition, we had to generate a mature concept based on the current capabilities of the vehicle while facing restrictions from the physical driver environment. Furthermore, the actual vehicle was not reachable for testing, requiring us to use different models from physical to digital for solving some issues.
The BCW exhibition was the first step of the project, leading to a comprehensive POC that showcased a seamless transition between the mobile app and the vehicle’s HMI, providing users with a unique and immersive experience.
- City Transformer needed a POC to promote Bosch cloud services using CT-1 capabilities.
- The POC had to include design for the HMI screen within the vehicle and a mobile app for users to browse, plan, reserve, and rent a CT and navigate to their destination.
Research
As CT-1 was a new vehicle with unique features, we conducted extensive research to understand the needs and expectations of potential CT users. We explored relevant similar services to identify common pain points and opportunities for improvement. We conducted interviews with potential customers and analysed data from existing rental services to understand user behaviours and preferences when renting and using a vehicle. Additionally, we researched other types of vehicles and mobile-HMI integrations to identify best practices and key considerations. Through this research, we discovered that users prioritize convenience, flexibility, and ease of use when renting and using a vehicle. We also found that a seamless transition between the mobile app and the vehicle’s HMI is critical for providing users with a unique and immersive experience. This research informed our design decisions and ensured that we created a user-friendly interface that meets the needs and expectations of potential CT users.
- Explored similar services to identify common pain points and opportunities for improvement.
- Conducted interviews with potential customers and analysed data from existing rental services to understand user behaviours and preferences.
- Researched other types of vehicles and mobile-HMI integrations to identify best practices and key considerations.
Insights
Through our research, we gained several insights into the needs and expectations of potential CT users. Firstly, we discovered that users prioritize convenience and ease of use when renting and using a vehicle. This insight informed our decision to create a seamless transition between the mobile app and the vehicle’s HMI, allowing users to complete their journey with minimal effort. Secondly, we found that users value flexibility, which led us to design a user-friendly interface that allows users to browse, plan, reserve, and rent a CT on the go. Additionally, we discovered that users appreciate real-time feedback, prompting us to integrate expanding and collapsing animations and indications into the dashboard as an indicator of the wheelbase’s current state. Lastly, we learned that users desire a unique and immersive experience, which informed our decision to integrate features such as Spotify, mobile calls, and navigation, allowing users to multitask while driving the CT. These insights were critical in ensuring that our design decisions aligned with the needs and expectations of potential CT users.
- Users prioritize convenience and ease of use when renting and using a vehicle.
- Users value flexibility, which led to the design of a user-friendly interface for browsing, planning, reserving, and renting a CT.
- Users appreciate real-time feedback, prompting the integration of expanding and collapsing animations and indications into the dashboard as an indicator of the wheelbase’s current state.
- Users desire a unique and immersive experience, which informed the integration of features such as Spotify, mobile calls, and navigation.
Phase 1 — BCW
As the first step of the project, we worked on defining and designing a POC for the upcoming BCW exhibition where the collaboration between City Transformer and Bosch was to be announced. This included designing the HMI screen within the vehicle and a mobile app for users to browse, plan, reserve, and rent a CT and navigate to their destination. The preparation for the BCW was challenging, as we had to generate a mature concept based on the current capabilities of the vehicle while facing a strict deadline. However, our team was able to work together efficiently to develop a functional POC that demonstrated the capabilities of the CT-1 and Bosch cloud services.
UX
During this phase, we focused on defining the UX concepts for the HMI screen and mobile app. We worked closely with the Bosch team to understand their cloud services and how they could be integrated into the CT-1 experience. We explored various design concepts and user flows, testing them with potential users to gain feedback and refine our approach.
UI concepts
At this stage, we started defining the UI concepts for the HMI screen and mobile app. We explored various design concepts and user flows, testing them with potential users to gain feedback and refine our approach. Since we did not have access to the SDL branding material at the time of the BCW phase, we focused on creating a design that reflected the unique features and capabilities of the CT-1 while maintaining a clean and modern aesthetic. We ensured that the design was easy to use and visually appealing, creating an immersive and unique experience for potential CT users.
BCW exhibiton state
After several iterations, we were able to finalize the design for the POC and prepare for the BCW exhibition. We worked with the Bosch team to ensure a seamless integration of the CT-1 capabilities and Bosch cloud services, creating a compelling and functional demonstration of the collaboration. The POC received positive feedback at the BCW exhibition, leading to the next phase of the project, which was to develop a comprehensive POC that would showcase the capabilities of the CT-1 and Bosch cloud services in greater detail.
Phase 2 — POC
Following the successful BCW exhibition, the next phase of the project was to develop a comprehensive POC that would showcase the capabilities of the CT-1 and Bosch cloud services in greater detail. This involved a deeper focus on the HMI screen and mobile app, as well as the seamless integration between the two.
UX building blocks
Focus point — Indicator for wheelbase expansion
During this phase, one of our main focus points was to incorporate an indicator on the dashboard that would notify the driver if the wheelbase was expanded or collapsed. We achieved this by integrating expanding and collapsing animations and providing clear indications of the current state. Additionally, we included notifications for shifting between states to ensure a safe and seamless driving experience.
Focus point — Seamless mobile-to-HMI transition
The second focus point was to create a seamless transition between the mobile app and HMI screen. We wanted to ensure that the user journey from finding a CT to navigating to their destination was as smooth and effortless as possible. We worked on integrating features such as Spotify, mobile calls, and navigation, as well as creating animations for a more immersive experience.
Finalized concept
To achieve these focus points, we worked on refining the UI concepts for both the HMI screen and mobile app. We incorporated the SDL branding into our designs and created a consistent visual language across all touchpoints. We ensured that the design was easy to use and visually appealing, creating an immersive and unique experience for potential CT users.
Design
After several iterations and rounds of testing, we were able to finalize the design for the POC, creating a comprehensive and functional showcase of the CT-1 and Bosch cloud services. The seamless integration between the HMI screen and mobile app, along with the unique features of the CT-1, created an immersive and compelling experience for potential users.
Integration phase
During the integration phase, we worked closely with the Bosch team to ensure seamless communication and interaction between the mobile app, HMI interface, and the CT-1 vehicle. This was a critical phase of the project as it required a high level of coordination and collaboration between the different teams involved. We flew to Roding, Germany, where the CT-1 vehicles were located and conducted integration drive tests to maximize the seamlessness of the mobile-HMI-vehicle connection. We faced several challenges during this phase, such as ensuring that the user journey was smooth and that the CT-1’s unique dimensions and ergonomics were properly accounted for in the design. Ultimately, our efforts paid off and we were able to deliver a fully integrated and functional product that exceeded our client’s expectations.
Results and takeways
Overall, the project was a success, and we were able to showcase the unique capabilities of the CT-1 and Bosch cloud services. We gained valuable insights into designing for a new type of vehicle and creating a seamless connection between mobile and HMI interfaces. Additionally, working with the Bosch team taught us the importance of collaboration between different disciplines and the value of persistence in solving complex problems.
- Collaboration between different disciplines is crucial in solving complex problems and achieving project goals. In this case, working with the Bosch team was essential to creating a seamless connection between the mobile app, HMI screen, and vehicle itself.
- Designing for a new type of vehicle, such as the CT-1, requires extensive research and testing to ensure a safe and user-friendly experience. Our use of different models, both physical and digital, allowed us to overcome obstacles and create a comprehensive and functional POC.
- Creating a seamless transition between mobile and HMI interfaces is essential to creating an immersive and compelling experience for potential users. By incorporating features such as Spotify, mobile calls, and navigation, as well as creating animations for a more immersive experience, we were able to create a unique and engaging experience for potential CT-1 users.
