More about:
Electric SUV Re-design Wireframes
WHEN
2023
MATERIALS
Figma
BACKGROUND
This re-design was done based off of the Rivian R1T with the goal of designing a more user friendly interface that takes into account the intended uses of the car. The Rivian R1T was designed to be an EV off-roading truck, for this reason, actions and features should be easily accessible even when on rough terrain.
WHY
The goal of this project was to get familiar with auto UX as well as tracing screens while improving the usability of the car and all of the features it has to offer.
RESEARCH
RESEARCH
First step was to figure out what needs the intended user of the Rivian R1T had. The Rivian R1T, which is marketed as an electric off-roading truck, has many features focusing on different terrains and other off-roading needs. So, in my redesign I wanted to really look into the needs of a user when it comes to off-roading but also be conscious of its electric needs as well as the accessibility of these features. I did research on the R1T and other off-roading trucks and electric trucks to see what was similar across them all. On top of that, I also looked at normal ICE trucks as well as other EV’s to see what features they could have also included as well. From there, I made a list of key design decisions I wanted to focus on and moved on to wireframing.
Main design considerations:
1 Controls placement
As well as bigger buttons, the placment of important controls was something I wanted to consider. By keeping most actions to the left of the center screen, the driver won’t have to reach as far and with bigger buttons they are less likley to miss their target on bumpy roads.
2 Off-road settings
When off-roading, it is important to stay up to date with the cars condition without having to search through pages to find it. For this reason, I added an easy to access off-roading page where users can find all of the important information they might need to make sure the car is good to keep going.
3 Charging suggestions
The last thing I wanted to add focuses more on the electric car aspect. I decided to add a shortcut to find near by charging stations within the navigation page to limit the chances of range anxiety.
DEFINING THE PROBLEM
Drivers of electric off roading trucks need their screens to be distraction free when off roading while also allowing them to keep an eye on their battery life and near by places to recharge.
IDEATION
SKETCHING
Before starting on my design I had to figure out what size to make my screens in Figma. To do this, I found the screen specs of the R1T and converted the inches into pixels and created the frames. I then made sure that they fit within my reference photo and then continued to sketching.
The cluster ended up being 763 by 432 pixels and the center screen was 979 by 457 pixels.
For my sketches I decided to focus on the placement of content. Since a few of my key design considerations had to do with placement, I wanted to focus most of my attention there for the beginning steps before designing. As you can see these were very plain and simple, but they did the job especially when it came to experimenting.
DESIGN
LO-FI WIREFRAMING
Since the goal of this project was to just come up with some lo-fi wireframes, this was the final step. After my sketching, it was easy to just go back and style it since all of the actions were in the right places.
Again, since they were just wireframes and I didn’t prototype them, I had to decide what screens I wanted to design. I ended up with 1 cluster and 5 center screens.
KEY DESIGN FEATURES
For my final design, I decided to add some color. Although looking back I should have created a style guide as well as some components, for my first ever auto UX project I felt I did pretty well and was able to reach the design goals I had set at the beginning.
To help me reach my goals, I used a mix of market research and UX principles.
1 Important controls large and to the left
Frequently used buttons placed to the left to make it easier to press by driver.
Larger buttons make it easier for driver or passenger to press without missing or pressing the wrong button on bumpy roads.
2 Easy to locate off-road status page
Easy, large button to change screen to an off roading setting.
limits distractions.
Always accessible on home page.
Gives users important information keeping them up to date with the shape of the car.
3 Charging station suggestions
Eases the driver if they are worried about the range of their truck.
If planning on going on a long trip, they are able to map out and keep in mind what is near by.
Fast and easy to find.
REFLECTION
Although I am happy with the outcome, this was my first time designing for car screens. I felt that I was able to understand the process of including the actual needs for the truck but I want to work more on the designing. There is a lot more I would like to learn design wise and would not mind coming back to these wireframes in the future to create a hi-fi version.
I have a few more projects similar to this and am excited to see how this one compares to the last one of the semester. I enjoyed this particular assignment because I have always been interested in car design and liked the research aspects of it for this reason.
To see my progress throughout this course, press “Final Project” to see how I have improved as a designer.