Project 1
Volvo Autonomous Drive
Development of an understandable, trustworthy and elegant interface and experience for the first generation of Volvo autonomous cars
my tasks
*Introduce iterative research and design process to deliver meaningful solutions faster.
*Improve collaboration within the team and with stakeholders.
position: Senior Designer
role: UX and Team Lead
team: 5 people
stakeholders: 10+
time: 10 months
Previous concept
MGMT feedback:
* The purpose of the Driver Information Monitor (DIM) is to indicate status and capability of the AD system.
* The purpose of the center screen (CSD) is to let the user interact with the infotainment system.
* Both DIM and CSD need to be designed together to be able to create a coherent design. They also need to more clearly indicate that you are in AD.
* The AD system needs to be more aligned with the design of the SPA2 UX, this includes Pilot Assist, while ensuring that we don’t cause mode confusion.
* The take-back sequence needs to be clearer and support the user better.
Impactful activities
Listening
The team needed to be heard. This helped me to understand why and how troubles in communication are entangled with the lack of progress.
Grounding
A thorough analysis of the project state and background knowledge as well as resources adjustments helped to plan and kick start the improvements process.
Iterative loops
Analyse - Conclude - Design - Prototype - Test. A true iterative process with test-drives was established and each iteration had clear goals to achieve.
Grounding
- Analysis of legal and functional requirements
- Benchmark
- Summary of user needs and behaviours
- A review of internal and external research
- Design of the user journey with focus areas
- Definition of the design intent and design drivers
Design Intent and Design Drivers
A precisely choreographed experience where every piece of the journey is crafted towards a defined goal.
DRIVERS: Guiding / Clear / Motivating / Smart / Intuitive / Easy to understand / Easy to use / Pleasurable / Calm
ANTI-DRIVERS: Stressful / Patronising / Overwhelming / Nervous / Fragile / Pushy / Ambiguous
First iteration
Activation and deactivation of the autonomous drive were the most prioritised elements of the interface. Firstly, we focused on the logic and draft design.
Second iteration
Concept improvements based on test drives and internal reviews.
Third iteration
Adjustment towards the Volvo visual direction and sound experience.
Focus on details
Below is a detailed concept description of Autonomous Drive deactivation. The highlighted element is an example of how we took care of the choreography, guidance and lowering the stress while deactivating AD.
The final product
Safe, guiding and elegant interface for the autonomous drive.
We achieved the autonomous drive interface design to be an intriguing new element and at the same time an integrated part of the assisted drive journey. The design was thoroughly tested to first provide usability in a form of an understandability and guidance. Secondly, with a beautifully crafted visual and sound interface we achieved an elegantly choreographed experience.
Head of User Experience at Volvo introduces the new Volvo interface with Assisted Drive being a prominent part of the full experience.
My responsibilities
Project 2
Utopia Music
Utopia Music delivers solutions for the music market according to their mantra: Fair Pay for Every Play.
my tasks
* strategic research
* customer lifecycle management
*UX/UI Design
position: Senior Product Designer
role: UX/UI Design & Reserach
team: 2-8 people
stakeholders: 5+ teams
time: 10 months
Solution: Heartbeat
It has its origins in the Fortunes app which has been successfully serving the creators to democratise access to the streaming data.
Strategic research
The team consisted of the Fortunes previous team members and a few new colleagues, including me.
To deeply understand the product and ambitions for the app development I guided internal workshop to establish a common ground and produce hypothesis for the user interviews, which we performed next.
Outcomes
These activities led to the introduction of the new functions (e.g. release planner), simplification of the tool (e.g. more intuitive navigation) and new UI designs.
New UI examples
The app users were expecting more modern design. Below are the some of the re-design screens:
- Welcome screen
- Successful verification
- Home screen
Solution: Accelerate
Accelerate was a second tool within the Utopia universe which I had a chance to work on.
Here, we utilised the Customer Life-cycle Map to define what happens at the functional and emotional levels of the interactions. We defined touch points and success metrics at every stage of the cycle.
Design principles and design drivers
Design principles and design drivers were defined to unify messaging which we directed towards our customers through the different channels (app, social media, website, etc).
We deliver fair offer to every customer
drivers: transparent, confident, solid, secure
Fairness is in the core of our every action and product. We strive to build solutions which our customer can use without hesitation. We assess carefully if we can advance your royalties. When we sign the deal there is no small-print, the ownership of your work stays with you, and the money is delivered to you in 2 to 3 days.
We deliver trustworthy solution to support your life and career
drivers: healthy, supportive, zero stress, well-paced, personalised, guidance
We know that the music industry is tough. We don’t want to add any extra worry. The journey is well-paced so you can go through it in your own time and get support at any time.
We are the partners in your career growth
drivers: inspirational, aspirational, empowerment, inviting
Be proud. The money you receive is yours. We encourage you to invest in your career, grow your music portfolio and realise your creative dreams.
Outcomes
Those activities helped every employee understand our goals and make the interaction between different departments smoother. It helped product, marketing, brand and design departments understand each other’s intention and boosted efficient collaboration. Out customers were also faced with unified messaging.
Referrals
My experience of working with both Heartbeat (Fortunes) and Accelerate inspired me to connect those bringing the first one as a touch point at the Awareness stage of the Accelerate CLM.
This design had to be implemented immediately and it has been designed based on the Utopia’s then-current design system.
50% sign up rate despite the quick and dirty design.
Ultimately, the goal was to unify all the Utopia tools based on the new, more modern design system.
Project 3
VF3 Digital Interface
Development of a full digital in-car experience for a modern, simple and affordable mini-EV to provide safe and fun experience.
challenges
*Cultural differences and expectations
*Three major markets
*Tight schedule
*Small screen
position: UX/UI Lead
role: Strategist, PM, and lead designer
team: 3 people
stakeholders: 10+ (or endless 😉 )
time: 10 months
Vinfast
The first and only Vietnamese car manufacturer with bold ambitions and start-up like speed of delivery of the product to the market.
What a ride!
Development of the first market-ready VF3 screen lasted approximately 7 months. What a ride it was! I took it under my wings while the mother concept has been developed in parallel. The task, in short, was: Justyna, just take what we have and make it fit 🙂 But the base was not fully ready and the fun begun.
Impactful activities
Quick reaction loops
Parallel development of different parts of the car demanded continuous adjustments and quick reactions to represent changes properly within the design domain.
Future proofing
To avoid costly re-designs the components and frameworks were build in an adaptive manner and included future needs of different markets.
Cleaning & Simplification
Small screen, simple car, clear communication. The home screen (and the whole system) was polished with the minimal philosophy in mind.
What have we done?!
Designing a screen for a car is rather comparable to designing a full operating system than one app or a website. For each car needs to be decided what content should be included and functionalities and apps should accessible through the screen.
Stakeholders included in this process:
- chief engineers
- system architects
- function owners
- developers
- chairman’s visions and dreams 🙂
I held strategical meetings and workshop to make sure we included properly the requirements and expectations set for this car. Chief engineers, system architects, function owners provided lists of elements, which then had to be analysed from the user perspective:
- Why do we need this function?
- What user should understood based on the display?
- Are there any settings attached?
- Does it need physical or digital controls?
- Which market is it applicable to?
With developers we discusses the best design and handover strategies to make sure our solution is delivered on time. The limitations of the system had to be carefully analysed to avoid unnecessary waste of time. As every element of this car was built in parallel we had to be flexible and response promptly to any changes.
Outcomes: lovely excels full of juice.
Future proofing
To avoid future costly structural redesigning of the screen we analysed needs of all the markets where car was planned to be released. Especially different legal requirements
In a very confined space it’s better to design for the most demanding market. It helps to keep the design consistent and saves time of re-designing all when a new element needs to be introduced.
Presented visualisations are only examples. They are not the exact VF3 screens.
VF3 has the smallest screen amongst all the Vinfast car screens (10 inch). It had to be strategically built to contain both driver information and full infotainment system.
Due to legal and safety regulations some of the info can not be covered by anything else at any point which is challenging when screen is so small.
Touch areas and fonts must stay big enough to provide glanceability and safe interaction while driving.
🎨 Design
We first secured space for the most important information which can’t be covered by anything else. Graphic presents general structure highlighting the main framework of the screen with exemplary indications of the positioning.
To make information and interaction points accessible in an easy way we introduced swipe-able and contextual menus and widgets. It allows to always give relevant info and don’t clutter the space when not needed.
Apps were in parallel designed for different sizes of the Vinfast screens in adaptive manner. One of the apps which I designed was Driver Assistance, which provided structure for the open app window.
Physical controls are easier to interact with without looking at them. They are always in the same place and are not being replaced by anything else while driving. They have always been designed to be reachable. Replacing them with touch screen has its consequences which must be taken care of.
Since user can’t rely on the recognition by touch, all the important controls, especially while driving, must be glanceable and allow for the inaccurate taps. Soooooo…we must go big.
Our new design system, which I partially designed, followed the JD Power recommendations on the touch and font sizes. With those we could built more glanceable and clear settings apps. While my colleague performed research on the Information Architecture I designed the cards, the building blocks for the settings.
A summary of the improvements:
- Framework and guidelines for the cards design
- Adaptive design for different screen sizes (depending on the car mode)
- Enlarged sizes of the buttons to make it complaint with the requirements while driving. Some of the components had added invisible touch area to make it even easier to tap.
- Unified way to clearly spot the main ON/OFF buttons (previously a segmented button within the card, now – a switch)
- The video thumbnail took unnecessary amount of space as it was only an access point (a button) to open the movie. Its size was decreased but stayed still big enough to make it easy to tap
- Descriptions to the chime controls were added so the user could actually understand what the sound will inform about.
Below is a visual comparison between Legacy UI and new designs. All are just examples and not the final designs delivered to the market. On the left is legacy UI, the second refreshed UI for the car models with bigger screens and the last one is VF3 new UI design.
…and many more elements designed.
Final notes
This project was one of the most challenging and at the same satisfying. Vinfast is an extremely ambitious company with bold goals. Developing a car projects in such a speed was very stimulating and in many situations quite stressful. I successfully wore many hats: from planning the design development, building strategies, discussing solutions with developers, and designing the digital experience of the VF3. We delivered a solid product, ready to be life-tested.
