G-dragon

G-DRAGON

G-dragon is a fictional electric flying vehicle that will solve all problems with traffic jams in cities, emissions from old petrol and diesel cars.

concept

Project overview

Solo: Me

Duration:  7 days

Date: April 2021

The brief

G-dragon is a fictional electric flying vehicle that is suitable for everyone, including teenagers from 14 years. The task is to design prototypes that explore different aspects of the vehicle, as well as to evaluate users' attitudes / emotional responses towards the vehicle.

 

I chose to explore, and design the dashboard, and create a parenting app that is connected to the vehicle. With the help of the app, parents can set different boundaries that are suitable for their child, such as speed, altitude, and areas they are allowed to fly.

Tools

Group 683.png

iMovie

Group 668.png

Miro

Group 682.png

Illustrator

Group 681.png

Photoshop

Group 664.png

Figma

 

Discover

 
Learn

Research

Goal

I started by researching to understand what functions a dashboard needs and investigate functions parents may need in the app. I researched everything from a flight simulator to video games to find familiar and simple features that users need.

 

Flying on your own is a new dimension, which means that you have to use functions that are not familiar. Thoughts that I had:

What features do you need when flying?

How do I design so that users understand all the features?

 
MECHANICS, DYNAMICS & AESTETHICS

MDA framework

Goal

One of the goals of the task was to examine users' feelings towards the products. Therefore, I started by first thinking about what feelings I wanted to convey.

 

The dashboard
Negative emotions that can occur when flying: Fear, Insecurity, Stress
Therefore, it became important to focus a lot on: Safety, Control

It has to feel safe to fly with the dashboard.

The parent app
Negative emotions that can arise in the interaction with an app: Stress, Frustration

Therefore it is important to make the app: Clear, Useful

 

How do I reach my goal?

I started by determining the primary functions and objects. -my focus was on creating something safe that provides a good user experience and of course using features that are as familiar as possible.

MDA
 

Dashboard

 
InsPiration

Moodboard

Before I started drawing the dashboard, I wanted to find a theme to work with. Since the product is fictional and futuristic, it felt appropriate that the theme should be Cyberpunk; a style I love. I was inspired by the 80's Cyberpunk vintage and made it more modern with minimalist elements.

press to zoom
press to zoom
press to zoom
press to zoom
press to zoom
press to zoom
press to zoom
press to zoom
press to zoom
1/1
 
Low-fidelity sketches

Low fidelity prototypes

The shape of the dashboard had been chosen by the teacher and it was a triangular shape with round corners. Here's how I started designing the instrument panel:

Responsive design

Frame 94.png

Top

I placed the GPS screen at the top so that the driver can quickly look down at the dashboard on the go.

 

Bottom

I adapted to the round corners of the triangle by designing round elements. All warning elements were carefully grouped together as it needs to be logical and familiar.

Low-fi sketches

With the mood board complete, I quickly sketched out a variety of ideas for different scenarios in the flow using the Crazy 8s method.

 

This rapid way of divergent ideation is helpful to experiment with different solutions before any ideas are taken too far down the line of development.

 

I then dot voted the best screens to choose which would be used to move forward in the design.

 
Does it work?

User test 1

Take off
In the air
Restricted areas
Warning

I tested my low-fi prototypes. It was a Think-aloud test, with questions during the test followed by an interview at the end. The 3 respondents had to select 5 emotional words that described the product. This method is called Microsoft Product Reaction Cards.

 

I played audio files of directions and instructions to make it as realistic as possible. The test was performed digitally through Google-meet due to the covid-19 pandemic.

Here I got the chance to test the user experience from takeoff to landing with different scenarios that may arise, such as an emergency.

I wanted to find out:

If the respondents understood ALL elements of the dashboard.

If they understand how to act in different scenarios that may arise along the way.

If they understood the instructions and the audible feedback from the GPS.

What feelings they have for the product

Keyfindings

Negative 

Technologically sterile

Overwhelming elements & colours

Impersonal

Positive

Easy to use

Reliable

Helpful

My challange

Make the dashboard personal, flexible and make the elements of the dashboard feel less overwhelming. 

The respondents felt that the dashboard felt safe and that was my biggest requirement.

They understood all the elements and the test was very rewarding where I got a lot of information.

Technologically sterile = personalize the screen - Make the screen adjustable in three different positions. It will also release the feeling of being overwhelmed.

Personalize it with a “Welcome Name” for example, a personal login.

How?

Finals

High fidelity prototype

 

Log in 

Quick and easy login using a fingerprint or voice search.

Personal settings.

Possibility to call and use a contact list.

Switch off / turn on GPS or delete predetermined routes.

Welcome
Login

GPS screens 

3 different screen modes (full screen, windowed and minimized).

Night and day mode.

GPS with countdown.

Turn on / off voice instructions from the GPS.

The Respondents thought that my low-fi prototype was impersonal and overwhelming. I then redesigned the screens and made them adjustable where you can choose different screen modes. 

 

A minimized window will develop into a full screen when warnings occur. For example, when an object approaches the vehicle.

 

My challenge has been to place all the elements in the right place. Elements must be grouped correctly.

Full screen
Windowed mode
Minimized mode

Full screen mode

Full screen mode

Windowed mode

Windowed mode

Minimized mode

Minimized mode
Prohibited area

Prohibited area

Warning

Warning

Parenting app

 
 
Mobile VS Tablet

Examination - Straw poll

I started by designing the app for a tablet but became unsure if I had chosen the right interface. Is the mobile perhaps more suitable? Because I was unsure of my choice, I interrupted the sketching process and chose to investigate which interface was most appropriate. The survey consisted of a Straw poll, which I sent out to friends and acquaintances.

25 people participated in the voting and the majority voted on mobile.

Doing an examination with the help of a straw poll is a cheap and effective way to save time.

Straw poll
 
Low & MiD FIDELITY 

Wireframe sketches

Home
Register
Vehicle status
Search trip
Restricted area
Saved trips

Low fidelity

Mid fidelity

Skärmavbild 2021-04-19 kl. 00.33.06.png
 
Does it work?

User test 2

I tested my low and mid-fi prototypes. It was a Think-aloud test, with questions during the test followed by an interview at the end. The 3 respondents had to select 3 emotional words that described the product. This method is called Microsoft Product Reaction Cards.

I wanted to test:

If the navigation was easy to understand and predictable.

The user experience.

The usability. Was it difficult or unclear to use?

Keyfindings

Negative

Some titles were difficult to understand

Positive

Easy to use

Clear

Interactive

My challange

Use clearer titles.

All 3 respondents felt that the app was easy to use, and no one wanted to add/remove anything in the app. There were also no oddities in the navigation.

I asked for suggested names for all the titles towards the end of the test.

They gave good name suggestions, which I used for the Hi-fi prototypes.

How?

Finals

High fidelity prototype

 

Log in 

Quick and easy registration/login.

Register fingerprints.

Vehicle information

See the vehicle status.

Close/open the vehicle with the app.

Add/remove vehicles.

Vehicle status
Home

Add a restricted account

Determine the speed, ground level, allowed areas and time that the vehicle is allowed to fly.

Restricted account
Profiles
Feedback
Restricted account
Restricted account

Search

Search for trips.

Save your trips.

Send your trip to the  GPS in the dashboard.

Search
Search
Search

Hamburger menu

View your saved trips.

Set personal settings.

For help, reach support.

 
05:31 min

Product demo

What is next?

Conclusions

 

Future

Learnings

Because the G-dragon is a fictional vehicle, it is difficult to apply this in today's vehicles. However, the dashboard fits into a user interface for games, and in this way, I would test the user experience.

1.MDA supports a formal, iterative approach to design and tuning. It allows me to reason explicitly about particular design goals, and to anticipate how changes will impact each aspect of the framework and the resulting
designs/implementations. 
In addition, it allows me to control for undesired outcomes, and tune for desired behavior.

2.Straw poll is a cheap and effective way to save time.

3.Using audio recordings and images in the digital usability test was necessary to create as realistic scenarios as possible.

hifi hundbrun_edited.png
lap1 1.png