This is the Coursework of User Interface Design Subject that I have done for my BIT Degree and I've got the First Class Honours. Feel Free to use it as a reference for your coursework and wish you good luck for your education journey.

2. Table of Content
1. Introduction 4.....................................................................................
2. Analysis & Literature Reviews 4.........................................................
2.1 Standard Design Guidelines 4........................................................................
2.1.1 Choosing Design Guidelines 4.............................................................................
2.1.2 Proof of concept 5.................................................................................................
2.2 Design Guidelines of iOS and Android 7.......................................................
2.2.1 Design Guidelines of iOS 7...................................................................................
2.2.2 Design Guidelines of Android 7............................................................................
2.2.3 Choosing Guideline and Prioritising Secondary Controller 7................................
2.2.4 Proof of Concept 7................................................................................................
2.3 Design Issues 8................................................................................................
2.3.1 Issues of these Methodology 8.............................................................................
2.3.2 Choosing Design Methodology 8..........................................................................
2.3.3 Proof of concept 8.................................................................................................
2.3.4 Social, legal and Ethical issues of Dashboard 9...................................................
2.4 Theory of Colour, Font, Design Element and Layout 10..............................
2.4.1 Colour 10..............................................................................................................
2.4.2 Font Theory 10.....................................................................................................
2.4.3 Design Elements 11..............................................................................................
2.4.4 Design Layout 11..................................................................................................
3. Design 12..............................................................................................
3.1 Initial State of Design Phase 12......................................................................
3.1.1 Use Case 12.........................................................................................................
3.1.2 Form 13................................................................................................................
3.2 Alternative Design Prototypes 14...................................................................
3.2.1 Prototype A 14......................................................................................................
3.2.2 Prototype B 14......................................................................................................
3.2.3 Dashboard Secondary Control Design 15............................................................
3.2.4 Detail Explain of Prototypes 16.............................................................................
4. Evaluation 21........................................................................................
4.1 Developing an Evaluation Plan 21..................................................................

3. 4.1.1 Setting Evaluation Goals 21.................................................................................
4.1.2 Users’ Feedback 21..............................................................................................
4.1.3 Evaluation Techniques 22.....................................................................................
4.1.3 Choosing the Final Design 26...............................................................................
Conclusion 26...........................................................................................
Appendix 27..............................................................................................
Appendix A : Questionnaires 27...........................................................................
Questions Set One : Driving Skills . 27..........................................................................
Questions Set TWO : Driverless Car 29........................................................................
Questions Set Three : Driverless Car Dashboard 32....................................................
Appendix B : Design Feedback 40.......................................................................
Appendix C : Final Prototype Designs 48............................................................
Appendix D : Secondary Control Device Detail 52.............................................
Appendix E : Design for disability 57...................................................................
References 60...........................................................................................

4. 1. Introduction
This academic report is about "Driverless Car Dashboard Design" for the BIT final year of UOG
university. In this report, there will be 3 main sections.
Section 1: Analysis and literature review
Section 2: Design
Section 3: Evaluation
The necessary information for this report is collected by Questionnaires, Human centred Design
Methodology. (See More at Appendix A)
There are THREE target users for questionnaires -
Primary users - Expert Driving Skill Person (Over three years)
Secondary users - No Driving Skill Person (Just know how to drive/ less than a year)
Tertiary users - Average Driving Skill Person (From one year to three year)
“Google Form” and “Figma” are used software for this report.
2. Analysis & Literature Reviews
2.1 Standard Design Guidelines
It is necessary to have standard Guidelines for getting a better design. In this stage, there will be
design guideline which will apply for the design later.
2.1.1 Choosing Design Guidelines
There are many standard design guidelines as follow -
• Don Norman Design Guidelines
• Nielsen's Usability Heuristics and
• Shneiderman's Eight Golden Rules and many more (KMD KMD Institute 2016)
Among them using, Nielsen's Usability Heuristics will be used for this dashboard design.
1. Minimalist Design; Words/ symbols used to inform in the design are as minimal as possible and
does not have unnecessary information.
2. Help and Documentation; To know the full informations of the design if something
misunderstanding happen.
3. User friendly words; Used only the users friendly words and language to be easily used.
4. Recognition Design; The recognised design is more important than recall. So user did not need
to recall everything when they are using.

5. 2.1.2 Proof of concept
1. Minimalist Design
T h i s w e b s i t e l o o k t o o m a n y
unnecessary information and look
massy. It is a good example to show
without following the consequences of
the design guidelines. (Jesus Velunza
2019)
2. Help and Documentation
Dashboard of Tesla Model X has the user's manual, however,
it is not included as the help section/documentation in the
dashboard. (Tesla 2019)

6. 3. User Friendly words
This website does neither use user
friendly words nor a simple
language and the design is look
too complex to read.
(Ascio Technologies, Inc.
Danmark - Filial af Ascio
technologies, Inc. USA 2005)
4. Recognition Design
The showing website has the
abnormal design layout and have
to recall to use.
(Superior Web Superior Web
Solutions 2019)

7. 2.2 Design Guidelines of iOS and Android
Here is the design guidelines of TWO mobile platforms(to design the mobile application) and
prioritise ONE among them.
2.2.1 Design Guidelines of iOS
(Apple Apple Inc. 2019)
2.2.2 Design Guidelines of Android
(Google 2019)
2.2.3 Choosing Guideline and Prioritising Secondary Controller
From above guidelines, iOS design guideline will be followed for this dashboard design as the iOS
guidelines make the app more consistency. As the dashboard design will follow iOS rules, the FIRST
priority for the secondary controller will be the iOS application.
2.2.4 Proof of Concept
Google Chrome Application
The chrome of iOS app is more consistency and
the app layout is better due to the design
principle differences.
Number Description In detail
Guideline ONE: Aesthetic Integrity Application are function correctly as it is appearance
and behaviour
Guideline TWO: Consistency “Used general icons, design elements, uniform
terminology and standard text styles”
Guideline THREE: Feedback Response feedback to users’ actions
Number Description In detail
Guideline ONE: Clear “Clear design layout with distinct calls to actions”
Guideline TWO: Robust App design are suitable for various users
Guideline THREE: Specific “Support assistive technologies specific to the
platform”

8. 2.3 Design Issues
There are two types of UI design making methodology; responsive design and adaptive design. The
following is the issues of these TWO.
2.3.1 Issues of these Methodology
Responsive Design Issues
One of the biggest issues of this is that it can no go beyond the Template Design/ Framework. In
other words it has the Design Limitation.
Adaptive Design Issues
Adaptive design does not have design limitation, however, it needs Time, Professional Designer and
Budget for a design. Also the final design is depend mainly on the DESIGNERS.
2.3.2 Choosing Design Methodology
Although Responsive design has limitation, the final design from it does not depend on the
DESIGNERS. So it is more likely to get the recognised and consistency design. Thus the design will
be drawn with “Figma”, a responsive prototype drawer.
2.3.3 Proof of concept
arngren.net
When unprofessional designer design a
website, there can be an inconsistency
design as from the figure. (arngren 2019)

9. 2.3.4 Social, legal and Ethical issues of Dashboard
Social Issues
The design will be designed for everyone including disability person. Sightlessness can be
controlled by voice and the colour of the design will be chosen even for colour blind.
Legal Issues
For the dashboard, the icons and fonts used for the design are legally created or bought by the
original owners. Moreover, the created design will register as own copy right, after creating it.
Ethical Issues
The information show in the help and documented section will only show the honest informations.
The current car location will only show to the dashboard and the phone with application, which
has the access to use. There will be no other places to see or store data for the records.

10. 2.4 Theory of Colour, Font, Design Element and Layout
2.4.1 Colour
From questionaries, most of the users choose the background colour BLACK with the text colour
WHITE. However, this will not suitable to use in day times. So the colour of background WHITE
and text colour BLACK is reconsider to be more consistency design .
Proof of concept
Mrbotttle.com
The colour dark BLACK with
the text colour WHITE is not
compatible well.
(mrbottle 2019)
2.4.2 Font Theory
There are two main types of font design; serif and san-serif. From Questionnaire, “GOTHAM”, a
san-serif font is chosen most. (See more at Appendix A)
Proof of Concept
virginaustralia.com
In this website, fonts are
used by “Helvetica”; a san-
serif’s family and it seem
more clear than others.

11. 2.4.3 Design Elements
Most of the peoples want the NEW design elements for the dashboard design(See more at Appendix
A). So this dashboard design will be used the new design elements along with the old one.
Proof of Concept
Tesla Model X Dashboard
There is both NEW design elements(which
is easy to understandable) and the OLD
one. (Louis Moody 2018)
2.4.4 Design Layout
Design layout of the dashboard, should not be twist, clear and standard as possible to get the
consistency design and Recognition design.
Proof of Concept
Tesla Model X Dashboard
There are more than ONE
layout in this figure, but this is
not confuse and easy to use.
(Louis Moody 2018)

12. 3. Design
3.1 Initial State of Design Phase
There will be TWO sections; use case and form in this phase.
3.1.1 Use Case

13. 3.1.2 Form

14. 3.2 Alternative Design Prototypes
There are TWO alternative design which the first one is created by the result of the questionnaires
and the second one is from the combination of questionnaires and the designer vision.
Here is the prototype designs of “Home Form”.
3.2.1 Prototype A
3.2.2 Prototype B

15. 3.2.3 Dashboard Secondary Control Design
iOS App Design (Home Form) Android App Design (Home Form)

16. 3.2.4 Detail Explain of Prototypes
Description ONE: Background Colour
Background colour of prototype “A” got from the questionnaires and “B” is from developer vision.
Prototype “A” Prototype “B”
Description TWO: Text Colour
Prototype “A” Prototype “B”
Description THREE: Font
“Gotham” is the most popular choice(Questionnaires), but “Helvetica Neue” is better looking than
“Gotham”. However “Helvetica Neue” has to buy to avoid having the legal issues of the design.
NOW PLAYING NOW PLAYING

17. Description FOUR: Design Element

19. Warning Signs
The following figure will show the warning signs included in the dashboard.

20. Description FIVE: Layout
As there are TWO prototype, there are also TWO layouts for this report and these are as follow

21. 4. Evaluation
In this report, there will be used “Formative Evaluation” along with Heuristic Evaluation and
GOMS Evaluation Techniques.
4.1 Developing an Evaluation Plan
There are THREE stages for this section -
1. Evaluation Goals
2. Evaluation Techniques
3. Get the Final Design analysing with users’ feedback and design guidelines.
4.1.1 Setting Evaluation Goals
The design must meet the following evaluation goals -
1. Visionary Goal - to know the users’ vision
2. Efficiency Goal - to know the design functions is efficiency
3. Effectiveness Goal - to know design’s functions meets the users’ needs (S. I. M. I. Smart Insights
(Marketing Intelligence) Ltd 2019)
4.1.2 Users’ Feedback
As “Formative Evaluation” is used, users’ needs have to be researched. Detail in Appendix B
Feedback Summary Table
Questions Prototype “A” Rating Prototype “B” Rating
Text and Background Colour * * * * * * * *
Font Use * * * * * *
Clear Layout * * * * * * *
Clear Visionary * * * * * * * *
Desire Function * * * * * *
Icon Design * * * * * * *
Easily understandable * * * * * * * *
Choice Between “A” and “B” * * * * * * *

22. 4.1.3 Evaluation Techniques
Heuristic Evaluation Reports
Report ONE
Prototype Task Symbols
Prototype “A”
Check the Emergency Sign
Prototype “B”
Rules : Minimalist Design : Show the emergency sign with only necessary informations
Recommendation
• Finding:
Emergency sign in prototype “A” has many unnecessary informations.
Report TWO
Prototype Task Symbols
Prototype “A”
Search the meaning of emergency signs
Prototype “B”
Rules : Help and Documentation : Show the result of the meanings of emergency signs
Recommendation
• Finding:
Prototype “A” Search box is a little smaller and need to change the place.

23. Report THREE
Prototype Task Symbols
Prototype “A”
Look the overall prototype’s words
Prototype “B”
Rules : User Friendly words : Show the users with friendly words
Recommendation
• Finding:
Both of them are used friendly words
Report FOUR
Prototype Task Symbols
Prototype “A”
Check design is recognise/ need to recall
Prototype “B”
Rules : Recognition Design : Show recognition design thus users do not need to recall each action
Recommendation
• Finding:
For Prototype “A” the design is need to recall in the emergency sign sections whereas “B” does
not need to recall

24. GOMS Evaluation
GOMS Report ONE
Prototype “A” Prototype “B”
Goal Call Police Station for Emergency
Operators - touch Emergency Calls Button
- The Emergency Calls Form will be appeared
- Touch “Call Police Station”
Method USE DASHBOARD
- Step 1 : Hole the finger pointed to Emergency Calls Button
- Step 2 : Touch the Emergency Calls Button
- Step 3 : Touch “ Call Police Station Button”
OR
USE PHONE’s APP
- Step 1 : Open App
- Step 2 : Touch the Emergency Calls Button in Home Form
- Step 3 : Touch “Call Police Station Button”
Selections IF the dashboard is under normal condition USE DASHBOARD
ELSE USE PHONE’S APP
GOMS Report TWO
Prototype “A” Prototype “B”
Goal Set Destination
Operators - Touch “Set Destination” button
- Type/ Choose Destination Place
- Time will be set automatically
- Touch “Done” and the route will be automatically appear
Method USE DASHBOARD
- Step 1 : Touch “Set Destination” Button
- Step 2 : Type/ Choose Destination Place
- Step 3 : Touch “Done”
OR
USE PHONE’s APP
- Step 1 : Open App
- Step 2 : Touch “Set Destination” Button
- Step 3 : Type/ Choose Destination Place
- Step 4 : Touch “Done”
Selections IF the dashboard is under normal condition USE DASHBOARD
ELSE USE PHONE’S APP

25. GOMS Report THREE
Prototype “A” Prototype “B”
Goal Increase the car temperature to TWO degree
Operators - Touch “Setting” button
- Touch “Hotter” button in car
temperature
- Touch again for more degree
- Touch “Hotter” button in
temperature
- Touch again to increase the
another degree
Method USE DASHBOARD
- Step 1 : Go to the setting
- Step 2 : Touch heat increase button
in temperature section
- Step 3 : Touch again to increase the
temperature more
OR
USE PHONE’s APP
- Step 1 : Open App
- Step 2 : Go to the setting
- Step 3 : Touch heat increase button
in temperature section
- Step 4 : Touch again to increase the
temperature more
USE DASHBOARD
- Step 1 : Touch heat increase
button in temperature section
- Step 2 : Touch again to increase
the temperature more
OR
USE PHONE’s APP
- Step 1 : Open App
- Step 2 : Touch heat increase
button in temperature section
- Step 3 : Touch again to increase
the temperature more
Selections IF the dashboard is under normal condition USE DASHBOARD
ELSE USE PHONE’S APP
Recommendation Prototype “B” design has less steps and make the users more easy to use
GOMS Report FOUR
Prototype “A” Prototype “B”
Goal Pause and Replay the music
Operators - Touch “Pause” symbols in music player
- Touch again to “Replay” the music
Method USE DASHBOARD
- Step 1 : Place finger to the music section in the HOME
- Step 2 : Touch “Pause” symbol in music player
- Step 3 : Touch again to “Replay” the music
OR
USE PHONE’s APP
- Step 1 : Open App
- Step 2 : Place finger to the music section in HOME
- Step 2 : Touch “Pause” symbol in music player
- Step 3 : Touch again to “Replay” the music
Selections IF the dashboard is under normal condition USE DASHBOARD
ELSE USE PHONE’S APP

26. 4.1.3 Choosing the Final Design
Form the users’ feedback and TWO evaluation methods, prototype “B” is chosen as the final design
and the detail design will be shown in Appendix C.
Conclusion
In the report, there are THREE main parts. The analysis and the guidelines are set in the first section
from getting to avoid the BAD design. These analysis and guidelines will be implemented in the next
sections “Design”.
In design, both dashboard design and the mobile app, as secondary controller is created. As the
design is based on human centred Design Methodology, the necessary informations to draw
dashboard are got by the users. In the design section, there are alternative dashboard design to have
options.
These TWO designs will be evaluated by the users’ feedback and the evaluation techniques. With
GOMS evaluation, there is no much different whereas with heuristic evaluation, prototype “B” is
better. After evaluating and choosing, the detail design will be drawn in the Appendix C and the next
pdf file in zip.
In Appendix C, not only there is the detail design of the choosing prototype by evaluation but also
there is figures of how the design will be shown for colour blind person.
To sum up, this dashboard design has been thinking in every visions and everyone including
disability can be easy to use. Moreover the design is based on the users’ needs from the real world
with local people. Thus this design can even apply for the real world to use locally.

27. Appendix
Appendix A : Questionnaires
There are THREE main questions sets in this section - Driving Skills, Driverless Car and Driverless
Car Dashboard. All the answerers are from LOCAL.
Questions Set One : Driving Skills .
The First Question
The Second Question

28. The Third Question

29. Questions Set TWO : Driverless Car
The First Question
The Second Question

30. The Third Question

31. The Fourth Question

32. The Fifth Question
Questions Set Three : Driverless Car Dashboard
The First Question

33. The Second Question
The Third Question

34. The Fourth Question
The Fifth Question

35. The Sixth Question
The Seventh Question

36. The Eighth Question
The Ninth Question

37. The Tenth Question
The Eleventh Question

38. The Twelfth Question
The Thirteenth Question

39. The Fourteenth Question
The Fifteenth Question

40. Appendix B : Design Feedback
The First Question
The Second Question

41. The Third Question
The Fourth Question

42. The Fifth Question
The Sixth Question

43. The Seventh Question
The Eighth Question

44. The Ninth Question
The Tenth Question

45. The Eleventh Question
The Twelfth Question

46. The Thirteenth Question
The Fourteenth Question

47. The Fifteenth Question
The Sixteenth Question

48. Appendix C : Final Prototype Designs
Home Error Message
When the users is in home form and press again the home button the following message will be found.
Car Speed Message
In normal condition, the speed number will be green and if the speed is overly fast, it will be RED.

49. Car Speed Message - 2
If the car is driving so fast for a while, the error message will be appear and call police department
automatically for safety reason.
Music Form

50. Map Form
In set destination, there are THREE parts; “From” current car location, “To” the destination to go.
“Duration” of the trip. There is the plus sign(+) and minus(-) to add and remove the desire
destination.
Emergency Calls Form

51. Help Section
Setting Section

52. Appendix D : Secondary Control Device Detail
Home Error message

53. Music Form

54. Set Destination Form and normal condition
In second picture the size button on the right is green which means there is no error in the car.
The RED button on the right middle means there is something wrong with the car condition and if it is
click the following form will be appear.

55. Emergency Form with and without errors

56. Emergency Form

57. Appendix E : Design for disability
Sightlessness Design
For sightlessness, the dashboard will be tell the number with the function and the person have to
listen what it is saying. After dashboard done speaking, the users need to tell the number to function.

58. Colour blind
The dashboard does not have the exclusive colour blind mode, since the background and text colour
are already consider for them.
Here is the testing of the design with some colour blind mode.
Red-Weak/ Protanomaly
Green-Weak/ Deuteranomaly

59. Blue-Weak/ Tritanomaly

60. References
LTD, S. I. M. I. 2019. Goal setting and evaluation | Smart Insights [Online]. Available:
https://www.smartinsights.com/goal-setting-evaluation/ [Accessed 29 Oct
2019].
GOOGLE. 2019. Material Design [Online]. Available: https://material.io/design/
usability/accessibility.html#understanding-accessibility [Accessed 22 Oct
2019].
ASCIO TECHNOLOGIES, I. D.-F. A. A. T., INC. USA. 2005. James Bond 007
Museum / Exhibition [Online]. Available: http://007museum.coms [Accessed
23 Oct 2019].
VELUNZA, J. 2019. Gate Openers Gate Operators Driveway Gates Wrought Iron
Aluminum Gates [Online]. Available: http://www.gatesnfences.com [Accessed
23 Oct 2019].
OLUTIONS, S. W. 2019. Home Page [Online]. Available: http://superior-web-
solutions.com [Accessed 3 Nov 2019].
MRBOTTLE. 2019. mrbottle [Online]. Available: http://www.mrbottles.com [Accessed
22 Oct 2019].
MOODY, L. 2018. Interface concept for Tesla in - car dashboard — a UX case study
[Online]. Available: https://uxdesign.cc/interface-concept-for-tesla-
model-3-1b127384b472 [Accessed 25 Oct 2019].
KNIGHT, A. 2019. 27 of the Best Website Designs to Inspire You in 2019 [Online].
Available: https://blog.hubspot.com/marketing/best-website-designs-list
[Accessed 23 Oct 2019].
INSTITUTE, K. 2016. User Interface Design, Yangon, Myanmar.
INC., A. 2019. Human Interface Guidelines [Online]. Available: https://
developer.apple.com/design/human-interface-guidelines/ios/overview/themes/
[Accessed 22 Oct 2019].
ARNGREN. 2019. Home Page [Online]. Available: www.arngren.net [Accessed 23
Oct 2019].