-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathself-driving-dashboard.html
163 lines (144 loc) · 9.26 KB
/
self-driving-dashboard.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jbaileystudio - Autonomous Car Dashboard</title>
<link rel="stylesheet" href="./style.css">
<link rel="icon" href="favicons/favicon-32x32.png" type="image/x-icon">
<!-- Tracking -->
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-219530537-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-219530537-1');
</script>
<!-- End Tracking -->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<style>
img {border: solid 1px lightgray;}
</style>
<body>
<div style="background: #f7f7f7;">
<div class="header_div">
<a class="back_to_home" aria-label="J Bailey Studio Home" href="index.html" style="text-decoration: none; color: black">← Back Home</a>
<h1 style="padding-bottom: 30px;">Autonomous Car Dashboard</h1>
</div>
</div>
<main class="inner_main">
<p>A short concept project for an automotive job interview.</p>
<img src="self-driving-dashboard-photos/IMG_5585.png" alt="Final Dashbboard Render" width="100%" height="auto"/>
<figcaption class="fig_caption_hero" style="padding-top: 16px;">The Final Dashboard Render</figcaption>
<h2>Prompt</h2>
<p>We’re 10 years in the future and autonomous vehicles have become the main mode of transportation. An autonomous car company has hired you to design a new digital experience for a car dashboard."</p>
<h2>Inspiration</h2>
<p>I wanted to read about how people were thinking about use cases for self driving cars before I would begin to think about what the inside of the car is used for. If I could identify a use case I could base the dashboard project around expanding on it.</p>
<img src="self-driving-dashboard-photos/valet_parking.png" style="width: 100%;" alt="Autonomous Valet Parking" />
<figcaption class="fig_caption_hero" style="padding-top: 16px;">Autonomous Valet Parking</figcaption>
<p>"The driver saves the time of finding a parking spot as well as of walking to/from a remote parking spot. In addition, access to the vehicle is eased (spatially and temporally). Additional parking space is used more efficiently and search for parking is arranged more efficiently.” Source: <a href="https://link.springer.com/chapter/10.1007/978-3-662-48847-8_2#Fig3">Autonomous Valet Parking</a></p>
<img src="self-driving-dashboard-photos/vehicle_on_demand.png" style="width: 100%;" alt="Autonomous Vehicle On Demand" />
<figcaption class="fig_caption_hero" style="padding-top: 16px;">Autonomous Vehicle On Demand</figcaption>
<p>"The driving robot drives the vehicle autonomously in all scenarios with occupants, with cargo, but also completely without any payload. The driving robot makes the vehicle available at any requested location. Passengers use the travel time completely independently for other activities than performing the driving task. The cabin is designed completely independently from any restrictions of a driver workplace whatsoever." Source: <a href="https://link.springer.com/chapter/10.1007/978-3-662-48847-8_2#Fig7">Autonomous Vehicle On Demand</a></p>
<h2>Direction</h2>
<p>I decided that the best dashboard I could visualize was for the process of an autonomous car getting onto a highway and ramping up to speed. Here are the steps I planned to visualize:</p>
<ul>
<li>On Highway</li>
<li>Option to fast travel</li>
<li>Changing Lanes</li>
<li>Fast Travel</li>
</ul>
<img src="self-driving-dashboard-photos/dashboard_use_flow.png" style="width: 100%;" alt="Highway fast travel use case flow" />
<figcaption class="fig_caption_hero" style="padding-top: 16px;">Highway fast travel use case flow</figcaption>
<h2>User Interface</h2>
<p>To fit my needs of the highway fast travel use case I needed to sketch icons and screens out to decide on UI elements.</p>
<img src="self-driving-dashboard-photos/ui_1.png" alt="Essential screen elements" style="width: 100%;" class=centerImage/>
<figcaption class="fig_caption_hero">Essential screen elements</figcaption>
<img src="self-driving-dashboard-photos/ui_2.png" alt="Arrows, Icons, and Travel States" style="width: 100%;" class=centerImage/>
<figcaption class="fig_caption_hero">Arrows, icons, colors, and travel states</figcaption>
<img src="self-driving-dashboard-photos/ui_3.png" alt="Element arrangements and changing modes" style="width: 100%;" class=centerImage/>
<figcaption class="fig_caption_hero">Element arrangements and changing modes</figcaption>
<img src="self-driving-dashboard-photos/ui_4.png" alt="Overall panel shape" style="width: 100%;" class=centerImage/>
<figcaption class="fig_caption_hero">Overall panel shape</figcaption>
<h2>Wireframes</h2>
<p>After sketching my ideas out I put together some wireframes to help visualize what this dashboard could look like.</p>
<img src="self-driving-dashboard-photos/Wireframes_1.png" alt="On highway screen and option to fast travel" style="width: 100%;" class=centerImage/>
<figcaption class="fig_caption_hero">On highway screen and option to fast travel</figcaption>
<img src="self-driving-dashboard-photos/Wireframes_2.png" alt="Fast travel selected and lane merge" style="width: 100%;" class=centerImage/>
<figcaption class="fig_caption_hero">Fast travel selected and lane merge</figcaption>
<img src="self-driving-dashboard-photos/Wireframes_3.png" alt="Fast travel screen state" style="width: 100%;" class=centerImage/>
<figcaption class="fig_caption_hero">Fast travel screen state</figcaption>
<h2>Compositions</h2>
<p>After pulling together all the elements of each screen state in wireframes, I crafted some realistic color compositions.</p>
<img src="self-driving-dashboard-photos/Visual_Designs_1.png" style="width: 100%;" alt="Default highway screen" />
<img src="self-driving-dashboard-photos/Visual_Designs_2.png" style="width: 100%;" alt="Option to fast travel" />
<img src="self-driving-dashboard-photos/Visual_Designs_3.png" style="width: 100%;" alt="Fast travel pressed" />
<img src="self-driving-dashboard-photos/Visual_Designs_4.png" style="width: 100%;" alt="Changing / merging lanes" />
<img src="self-driving-dashboard-photos/Visual_Designs_5.png" style="width: 100%;" alt="Fast travel active state" />
<h2>Summary</h2>
<p>All that remained was to sketch out the interior view of what a rider would see from the inside of their self driving car and overlay one of the compisitions to finish off the concept.</p>
<img src="self-driving-dashboard-photos/IMG_5585.png" style="width: 100%;" alt="Final Dashbboard Render" />
</main>
<footer>
<p>
Interested in this project and want to learn more? <a href="mailto:[email protected]">Reach out to me</a>
</p>
</footer>
<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
<script>
// Get the button
let mybutton = document.getElementById("myBtn");
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>
<!--Lightbox Carousel Script-->
<script>
function openModal() {
document.getElementById("myModal").style.display = "block";
}
function closeModal() {
document.getElementById("myModal").style.display = "none";
}
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
captionText.innerHTML = dots[slideIndex-1].alt;
}
</script>
</body>
</html>