City Transformer | CT1
Mobile & HMI design
2022 - Ongoing (TENA studio)
A project for City Transformer, an Israeli-based electric vehicle startup, in collaboration with Bosch International to design an electric vehicle rental service. Our goal was to create the HMI within the vehicle and a mobile app for browsing, planning, reserving, and navigating to destinations. With a focus on user research and collaboration with the City Transformer team and Bosch developers, we successfully addressed unique vehicle dimensions and features for a seamless and intuitive user experience.
Wide state
Folded state
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.
(Followed by a detailed case study)
CITY TRANSFORMER is a unique vehicle, optimizing your ride by transforming its width.
.gif)
One of our main focal points was to indicate the CT mode
while driving by using the position and colors of the dashboard elements.
Start your journey by setting
destination or choosing a CT from the map
We focused on the seamless transition
from the mobile app to the HMI when entering the CT
First drive onboarding includes interface overview
and quick tutorial about using the CT folding mechanism
Dashboard state indicates the CT mode during drive
I had the honor to be part of the integration
process between the app, the HMI and the CT itself
Finish the ride and navigate to your destination
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 maneuverability.
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.
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 analyzed data from existing rental services to understand user behaviors 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.
Different competitors type
Testing different HMI interactions
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.
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.
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.
Mobile basic UX
HMI basic UX
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.
UI concept 1
UI concept 2
UI concept 3
UI concept 4
UI concept 5
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.
Mobile concept
HMI concept
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.
Advanced wireframing
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.
.gif)
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.
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.
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.
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.
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.
