Web App for Self Driving Car — Wireframe

Maulana Ilham
9 min readJun 13, 2021

Intro

I created this project to answer design challenge by a robotic consulting company. They asked me to create a web-based remote driverless car interface, including the wireframes and user flows/journeys. This challenge is quite interesting for me because I had never worked on or figure it out someday will work on this futuristic project. Besides that I also only had 3 days to make it done.

Research Phase

Tesla Dedicated Panel Tutorial (https://www.youtube.com/watch?v=pliOhA6Tw0o)

At this stage I decided to quickly learn what features need to be designed. Because I don’t have this kind of car yet, I went to youtube to see content from people who are generously sharing him/her when they were driving Tesla. It really helps me understand how they are functioned. However, due to time constraints, I only noted a few features that were considered important to be included in the design blueprint.

User Persona

For this study case purpose, I will choose Tesla as our research subject. There are many manufacturers nowadays could build as good as it, but still Tesla remains on top of mind since they are the one who actually pioneering this technologically advanced car.

In order to make a character persona, I tried out to track the prices of Tesla cars. Based on the search it was known that Tesla cars could cost around USD $40,000 — $90,000 depends on models. This fantastic price definitely could only be afforded by high profile peoples. Next step, I tried to figure out what kind of job that had enough buying power to afford it. Later I discovered that people with senior positions in well-known companies could get base income over $100,000. Especially for senior VP sales positions. From here I tried to learn what professional responsibilities of VP of sales to find out his goals and motivations.

Observed from his motivation and goals, it was clear that he will focus more on maintaining his professionalism image and corporate’s dignity. Therefore, supporting tools were needed which was by having a prestigious self-driving car like Tesla because it will show him professional, luxurious and elegant impression in harmony with the professionalism image.

On the other hand, in terms of functionality, he also need a vehicle that can move safely and on time because his daily life requires high mobility to meet clients from one place to another that may be far apart. With a car that had been equipped with artificial intelligence, travel time can be estimated with precision because it is powered by robotics. In addition, it can save the mind and energy needed in driving because he has to meet clients in fit and bright mind.

Scenario & App Flows

Photo by Dylan Gillis

Once upon in a morning, Maulana Ilham was having a meeting with his junior staff in the office. In the middle of the conversation, suddenly his personal assistant approached Ilham’s desk and told him that one of his important clients wanted to meet Ilham immediately at the Maldives Café.

Photo by Laurel and Michael Evans

For a moment he remembered that his car was still in a repair shop not too far from his office. Then he checked the condition of his car through the remote web app service .

2-Factor Verifications Login

Ilham had not used the web app for a long time, Ilham was asked to re-enter his credentials by filling email or phone number form along with the password. After entering it correctly, Ilham will be asked to enter the token code sent via OTA (Over The Air). Ilham could choose whether to be sent via his direct phone number or by email. Because Ilham found it quite a hassle to open his email inbox, he finally decided to use SMS service even though it was subject to operator fees. After receiving the SMS, Ilham immediately entered the token code he had received.

Entering the home page, Ilham was immediately shown a navigation map that displaying whereabouts of his car. In the lower right corner there was an icon indicating that he has received 2 notifications.

He then tap the button and taken to the command center screen. There he got an explanation from 2 notifications that his car had been inspected and no problems were found and another notification showed Ilham a shortcut to take the car out by using autopilot to the place he wanted autonomously. Ilham also agreed to both notifications.

Upon accepting previous notification, Ilham taken to navigation address screen and asked Ilham to enter address point where the car will going. Because Ilham had previously created a shortcut by entering his office location as a favorite, Ilham easily chose his office location below without having to type in the address again. On the next screen, Ilham can see the navigation of a car that is moving towards his office and will arrive in 20 minutes later.

Photo by Headway

While waiting for his car to arrive at the office, Ilham was able to productively maximize his remaining time by continuing to lead the meeting that had been delayed.

20 minutes had passed and his phone finally made a chime which it is a sign that his car had arrived. Ilham then ended the meeting and rushed out of the room.

Then Ilham wanted to know where was the exact location of his car using the car’s built in camera. He access command center and swipe up the bottom sheet navigation, there are some suggestion commands and the rest below it. He took the suggestion to activate the air conditioner and tap the camera icon up to right bottom corner.

Photo by Leonid Mamchenkov

Finally he could locate his car outside and get inside the car, but before that he needs to unlock the doors.

Instead of repeatedly using the bottom sheet navigation, he manages to use the voice command. He quickly find the access on the top right of FAB button’s navigational screen and saying loudly that he is willing to unlock the doors. Then the doors unlocked for him.

Now ilham just easily click the address bar, type “restaurant” or completely “Maldives Restaurant” and he will find it. System will direct the car autonomously as usual since the autopilot was still turned on. Finally Ilham can reach his destination where he will had a meet with his important client.

Photo by RR Abrot

Things seems running well as planed, Ilham have deep conversations with his client for about 4 hours. After that both of them have their own way and Ilham chooses to get back to his office.

On the time when he was getting the car, he managed to save the café location because the atmosphere makes him feels chill and relax there. Now the shortcut chips was available below the address navigation.

It was getting late and the streets were getting deserted. Now Ilham desired to drive the car by himself. Then he disable the auto pilot mode that he had always used throughout the previous trip and turned on the vehicle lights. Now he has gone with his car without using navigation mode.

Photo by Clément Rémond

Remote Control Mode

At first glance I was thinking that controlling the car through our smartphone must be a crazy thing to do. Then this idea was actually manifested by Jake Paul here. But still it does not make any sense to control such big and dangerous things like a real car on street. It is not a toy to play around and would be harmful.

Even though I remembered an famous episode in Mr. Bean where he went to a shopping center and bought many furniture and put all at once on his mini cooper (why on earth he isn’t just using delivery system??). This surely will took a lot his cabin space even he wouldn’t be able to sit on his driving seat. Instead gave up, he then set up his own driving control on the roof. As result, we may know this wouldn’t going through well because he suddenly lost his control along the way.

What lesson I could take from part of episode is there will be any possibility that we as driver could not drive through along with car. Especially when it comes to risk our life. Lately I found out a real story where an American soldier has given a dangerous mission to send a logistic which contained with medicine & foods for war victims on Afghanistan. The area was still controlled by an Afghan armed factions, then he managed to delivery it by an modified civilian sedan that had been armored and drove all the way by himself.

From both story, I learned that their task will get easier and helpful if they could control the car remotely so they wouldn’t have to risk their life. Hence I manage to design a remote controller features. User could access the feature through command control or conveniently ask via voice command.

It was heavily inspired by racing simulator game where player could control the car. So how user operate the cars will be exactly the same as when they are playing racing game and they could view what lies ahead/behind of car using the built in camera. Unlike the game, user must pay attention for battery indicator at top left. For better views, user could also hides the rear mirror and map navigation.

Honda’s Ridgeline Systems

Since it was operable on the real street and user have limited views, it will also equipped by sensor to detect surrounding object. It will notify user if something approaching or blocking the way. The core principle how system works can be seen here. I hope this kind of system would decrease amount of risk. Also for safety purpose I suggest these following rules :

  1. The car should be driven below 40 KMH, there will be a notification saying the user should slow down the speed.
  2. Car will gradually increase it’s speed slower than normal driving mode in order to make user pays more attention for all objects surrounding it.
  3. Not recommend to use in extreme conditions such as heavy rain, snowstorm, tornado and so on because those could damage both censors and cameras.

--

--

Maulana Ilham

Just another blog for achieving my dream job :D (Maybe a bit clumsy, but you got the message, right?)