the car using this system
This is the in-car solution for Opel and Chevrolet, which is targeting a 7-inch size screen.
For a screen at this size, selecting and prioritizing features is absolutely the key.
When having a lot of necessary information, how to layout them in a simple but efficient way is also challenging.
- Lead design from beginning to end
- Work with others to deliver visual
- Work with the research team to iterate based on users' feedbacks
- Work with PM, PJM, Dev, QA to deliver the final product
- Worked directly with GM internal stakeholders
- Debated and proposed innovative UX solutions
The customer has the requirements for a full navigation system. This means they don't want to sacrifice any feature for this tiny screen size (7-inch).
This is a very exciting challenge for me since it will force the team to think carefully for feature prioritization. Also, it will trigger us to be more creative when placing those features on the screen.
I only have 3 months for finalizing all the design, so within a couple of weeks, I have to come up with the first version of flows.
I had listed out all the requirements from the customer, and sorted them into two major sections, one for driving without guidance, one for with guidance.
After that, I had used previous experience from other programs to draw out the flows, for review and testing purposes.
Test turn information design
After getting feedback, I focused on the debatable parts to run some user testings.
One example is the turn information. We had a previous design from another program that is showing the turn information as a row. I designed a panel instead, with the belief that it will deliver the information faster.
This design had been challenged by the customer, since I make a bigger size design on a smaller size screen.
I run an AB testing with the research team, with two mock-up, the result shows equally. But I do believe this is because this is not tested in a real driving scenario. However, by then, we don't have the ability to test those while driving a real car.
This is the testing method I used to simulate the driving scenario. Since while driving, the average scan timing for a driver on the screen is about 0.4 seconds, I made a video that shows the mock-up only 0.4 seconds.
I put A and B versions for the same information in one video, randomize the order, testing with 16 users. Followed the question "What information did you see", and check the accuracy of them.
This method shows a significant difference between the two solutions, and be used a regular method of other designs.
I would review the wireframes with the customer and team, come up with proposals, then prove them by testing. Lots of the iteration is related to the size of the screen, below are some examples.
Bigger Turn Panel
The original design is to use a floating panel, which I think will have a better visual effect.
Although, the map around the panel is useless, and also limiting the information we can show on the panel.
Destination List with an overview
When we tested the destination list feature, I found that users were still not certain of the location, even though those are the destinations added by themselves. I added the zoom out map to associate with the list, and get positive results in later AB testing.
Search with auto suggestion
In the beginning, due to the screen size, I had removed the auto-suggestion feature. However, in out separate search testing, it shows, with auto-suggestion, the rate of finishing the search task is a lot higher.
Therefore, I negotiate with the customer to break the system visual guideline to move the input box on the title bar and give auto-suggestion some space.