HIT381 DR: Final Report

Team 12:
Yuanhao Zheng [email protected]

Mike Abrahams [email protected]

Eric Heng [email protected]

Gede Tomi [email protected]

Team Report on Human Computer Interaction Design Process

CHARLES DARWIN UNIVERSITY
COLLEGE OF ENGINEERING, INFORMATION TECHNOLOGY AND ENVIRONMENT
May 2022

Page 1 of 12
Contents
1. Introduction 3
2. Project Brief 3
3. Literature Review 4
4. Aim of Research 5
5. Structure 5
6. Approach 6
7. Case Study...........................................................................................................................................................
7.1 Goal 7
7.2 Questions 8
7.3 Hypotheses 8
7.4 Methodology 8
8. Results.................................................................................................................................................................
9. Discussion..........................................................................................................................................................
10. Conclusion.......................................................................................................................................................
11. Appendices......................................................................................................................................................
Appendix A........................................................................................................................................................
Appendix B.........................................................................................................................................................
12. References.......................................................................................................................................................

Page 2 of 12
1. Introduction
This report reflects the process of developing the user interfaces for an online medical video
consultation application. The idea came from people finding it difficult to attend GP appointments in
person during the COVID-19 pandemic – it highlighted a strong need for patients to attend medical
appointments online. We will discuss our the following areas of the project process viz: project brief,
to introduce the background of the project, a literature review to show the techniques we used for the
design improvements, the aim of the project, the structure of the project, the approaches we took for
the project, case studies we did during the process, results of user testings with case studies,
discussion on our design process, and finally our conclusion of the project.

2. Project Brief
The domain of our project is online medical consultations. The mobile application we have designed is
an online medical consultation application that allows patients to book and attend medical video
consultations online. During subsequent stages of our design process, an additional feature of booking
and attending rehabilitation programs was added. 

The problem context of this project is the need for booking and attending medical video consultations,
and the need for booking and attending rehabilitation programs online. The target groups for our
application are the general public with minimal technology experience, senior citizens who are
inconvenienced when going to medical centres, and people who live in rural areas. 

During the processes of developing and improving our mobile application, we started with
ethnography observations to define user needs and then developed user stories and paper prototypes
for our mobile application as an initial design phase. We then did heuristic evaluations against the
paper prototypes and then developed the interactive prototype of our mobile application based on the
problems defined in the heuristic evaluation. As ongoing improvement, we developed some
alternative solutions for certain components in our interactive prototype. We finally planned our user
testing methods - A/B test and click test, and then did user testings against the two alternative designs
of the interactive prototypes. The testing results were analysed and used to improve our interactive
prototype and finally conclude the final design for production.

Page 3 of 12
3. Literature Review
Relative to our research it was necessary as scholars to search databases for information on the
application we were going to design of which were, MEDLINE and Inspec databases where we
searched for relevant publications, concentrating on those mainly published within the past five years.
The multiple search terms we used, were a combination of “online consultation” with “health or
medical”, “remote consultation”, “e-visit”, and “video consultation”. We also used the CDU online
subject literature supplied by our lecturer which in most cases referred to online youtube videos and
websites of UX application design.

Convenience samples of current online medical consultation (OMC) web sites was derived from sites
that appeared among Google’s first one hundred results when searching for “online health/medical
consultation” or “online doctor” or “remote consultation”. We sifted through sites relative to our core
application design for video consultation and eventually were left with only a few to examined more
closely to determine the models of consultation, the intended purpose of the consultations, the
medical speciality, geographic location of the service provider and last but not least the probable cost
incursions. Data were sourced directly from the web sites of the specialist providers. We also sort data
from published books on the subject as well as application design.

Once all data of relevance was collected we then followed the UX design principles advocated by
Norman an expert on the subject matter of user design. Our approach was firstly to Empathise, where
we went through a needs finding process where we interviewed people in their environment and then
analysed the information looking for solutions (Define and Ideate) and creating a paper prototype
(Prototype), which we went back to users and tested using formulated questions and walk throughs
(Testing) until we reached a phase where we were ready to produce the necessary wireframe to carry
out a few repetitive test which led to improvements until the final design and wireframe. The methods
of our testing were based on the posted process where we made replicas of our application pages and
nav bars as post-it guides and then moved to A/B testing with original vs alternates and then finalised
with the completed coloured wireframe.

All the necessary can be found in our google drive link,

https://drive.google.com/drive/folders/1F25jHFpaUQ-NIHh4AOhyGDTBijzvsLD9?usp=sharing

(If you cannot open this link just copy and paste it in your google browser and it should open)

Page 4 of 12
4. Aim of Research
After, all our team completing the HIT226 module in UX design we were in a space to now look at the
process of design need finding and improvements using the “Empathise – Ideate – Prototype – Test”
principle of Norman and create the mobile online consultation application.

We created storyboards, persona’s and prototypes and ethically evaluated our design by completing
repetitive user testing based around specific heuristic principles of “User control and freedom”,
“Consistency and standards”, “Recognition rather than recall” and “Flexibility and efficiency of use”.
The key features we worked on were the page layouts been User-Friendly with a Responsive Interface
in particular the forward and back buttons, return buttons and icons, targeted text page positions,
minimising cognitive load, predictable navigation, image consistency, and font sizes.

Refer to the following links for visuals and data:

https://drive.google.com/drive/folders/1F25jHFpaUQ-NIHh4AOhyGDTBijzvsLD9?usp=sharing

https://www.figma.com/file/yI2zxKezBgT6nTnyhxiIYG/Final-Hi-Fidelity-Prototype?node-id=0%3A1

(If you cannot open these links just copy and paste it in your google browser and it should open)

5. Structure
The project was based on front end design with no backend design for this particular unit hence the
team looked at specific areas of the front end such indicated below:

Page 5 of 12
 We concentrated on the screen size, the interface and navigation method, whether or not to have a
scroll view, single view with search facility and the most importantly the flows with respect to button
use and standard icon appearances and page navigation.

6. Approach
Our approach to this project was based firstly around team dynamics where we had a good coercive
team with specific attributes as documented in our roles and contract. After deciding on the domain,
we gathered as much literature on the domain, in particular the online medical video consultation and
rehabilitation aspects of our mobile application. We looked at publications within the last 5 years from
databases with information as well as books and websites relative to the subject matter, homing in on
only the important information regarding our specific topic. It was then the task to formulate the plan
on the approach to gather information based around user experience using mainly the UX principles
and Norman’s principles on user design experiences. Our first point of task was creating the following
and applying it:

Part 1
• Create a plan and timeline
• Create and do User Interviews
• Dig deeper in follow-up interviews
• Reframe problems
• Capture findings
Page 6 of 12
 • Needs and Insights
• Defined the problem statement
Part 2
• Ideate: generate alternatives for testing.
• Iterate based on feedback.
• Reflect & generate new solutions/alternatives
• Create Prototypes
• Repetitively test prototypes and wireframes
• Improve specific items on pages
• Finalise the design

At first we thought that HCI was boring and was not required with respect to product creation
however the important lessons learnt were that design relative to application domains is not as that of
engineering where you design and the user adapts, however this was more focussed on user
experience and continuous testing for improvement using UX principles and user experience design
principles. We learnt important it was to use heuristics to improve application usability where we used
experts for such tests then actual users of the product. We also learnt to use different design tools
such as Adobe Photoshop, Sketch, Invision, Figma etc, of which Figma was our main tool for wireframe
design and finalisation of design. Our experiences were enhanced in the area of human interaction
where we formed and normed with users and our own team and got to learn how individuals think
and react to different situations, this been a result of the continuous testing and improvements we did.
The most important of all was the testing process to make sure that we had a good design because,
users are the judge of your design and if users don’t like your design, then the design will fail. The
continuous feedback is a tool to improvement to fit user needs. We now see and feel the importance
of HCI in product creation in an evolving world and the numerous technology which is been created
and not keeping up with the processes will definitely be a negative on product market share and
business overall.

7. Case Study
7.1 Goal
The goal of this test is to assess if the interaction with our website is effective relative to a
user’s observation or opinion to ensure we have a quick and reliant online service or assistance,
involving making appointments and attending online video consultations, as well as the minor
rehabilitation programs.
Page 7 of 12
 7.2 Questions
Questions explored included:
1. Is the concept of the application understandable when looking at the home page?
2. Did the “Book an Appointment” button function.
3. Can the user book a complete video consultation?
4. Can the user enter the meeting room of the video consultation at the scheduled time of the
appointment (probably wait for the doctor to join)?
5. Can the user book a complete rehabilitation appointment?
6. Can the user go to the specific exercise program booked?
7. Can the user reschedule an appointment?
8. Can the user cancel an appointment?

7.3 Hypotheses

1. The users will at first glance of the Home page understand the concept of the application.
2. The users will find it easy to schedule an appointment.
3. The user will find it easy to book a video consultation
4. The user will easily find and know how to go into the meeting room
5. The user will have no problem in understanding and booking a rehabilitation appointment
6. The user will understand and know how to go to the exercise program scheduled
7. The user will know how to reschedule an appointment
8. The user will understand and know how to cancel an appointment

7.4 Methodology
We used the A/B method of testing. A wireframe click test using Figma software tool was used
to conduct a navigation flow to see how fast users were able to complete tasks within various
timeframes (in minutes) as well as give a rating to the various functionality observations when
completing the tasks. The results gathered in these online tests were used to determine
whether the hypothesis will be accepted or refuted. We used excel 2010 as the main tool to
gather and document our data received. We utilized a slide rule on ratings from 1 to 5 in excel
and had the users note and document the times it took them to fulfil each testing task.

8. Results

Page 8 of 12
 We use a confidence level of 95 on each of our hypothesis
Hypothesis 1:
95% of the users will be able Login and understand the concept of the application within 2 minutes.

Hypothesis 2:
95% of the users will be able book or schedule an appointment within 2 minutes.

Hypothesis 3:
95% of the users will be able book or schedule a video consultation within 2 minutes.

Hypothesis 4:
95% of the users will be able know how to enter the meeting room within 2 minutes.

Hypothesis 5:
95% of the users will be able book or schedule a complete rehabilitation appointment within 2
minutes.

Hypothesis 6:
95% of the users will be able to go to the exercise program they scheduled within 2 minutes.

Hypothesis 7:
95% of the users will be able reschedule an appointment within 2 minutes.

Hypothesis 8:
95% of the users will be able book or schedule a video consultation within 2 minutes.

Page 9 of 12
 According to the data given above, 20 people responded on this particular test, with all the people
almost finishing each task within the estimated time. We can argue that 95% of people finished the
tasks within the estimated time except for 3 people not been able to complete task 3 within the
estimated time thereby dropping the percentage down from an estimated 95 % to 80. This data meets
the hypothesis however there was a little improvement required regarding the interaction flow
particularly in the scheduling of the video appointment (See Appendix A & B for raw data & analysis).

The process used indicated that through continuous user testing using UX principles and user
experience principles, huge benefits are obtained relative to continuous improvement to enhance
user perception and use of the product. The initial prototype posted process approach worked up to a
certain point and then we had to use a different tool and produce wireframes which were then used
further for improvements and also added colour and made the design product more real with respect
to feel and use of the application. Our final prototype link is:

https://www.figma.com/file/yI2zxKezBgT6nTnyhxiIYG/Final-Hi-Fidelity-Prototype?node-id=0%3A1

(If you cannot open these links just copy and paste it in your google browser and it should open)

Our final improvements were:

1. Insert a button to go back to Home Page.
2. Insert icons on each page as escape to Home or other necessary pages like profile editing or
schedules.
3. Make all buttons functional for Rehabilitation booking.
These changes were improvements which improved the aesthetics, made standardised appearance on
each page as well as improved functionality and navigation.

9. Discussion
Overall the process was a well thought out and followed process however considering it was our first
project of this nature, we could have done things a little differently which could have improved the
process, where the sampling population size for testing could have been increased and also done more
initial field research and created more questions, based around testing which could have eradicated
some of the initial faults. We could have also explored the paper prototyping process using the
window/slide process. Due to constraints of the team working etc, we could not do visits to existing
operations and discuss user issues and issues found by staff regarding consultations. There are many
more tools which could be explored and used during application design and once again this was not
utilised properly and a lesson for the future. There is also room for improvement for students when
doing design and user experience on products by consulting experts in this particular field and
discussing approaches to design. More surveys could have also been done online and field based as
Page 10 of 12
 well as using more user testing methods. In conclusion we believe that all the above points are
considered lessons learnt and must be used in the future to ensure process improvement and
application design and testing.

10. Conclusion
In conclusion, the final interactive prototype of our online medical consultation application is with
full functionality and high usability after numerous improvements based on the user testing and
results analysis. Our general design process and testing approach are proven effective according to
what we’ve achieved at the end of this project. In the future, with more research projects or
industry projects, we will do the following to ensure our design process and testing are optimal -
firstly, before we start our designing, we will use a sufficient number of methods to collect the user
needs, including ethnography observation, surveys, and interviews, so that our determination of
project scope can be matched to what user wants in the highest extent. While we started the
designing and developing our paper prototype and interactive prototype, we could have determined
various other user testing methods to test the prototypes along the way. We will in future make
sure the testing methods can cover all aspects of the functionalities and user interactions, hence any
problem that exists in the initial and final stages of design can be identified and improved. Last but
not least, we will need to do numerous tests to collect a huge amount of user data in order to do
the quantitative and qualitative analysis, and have the more accurate results. By following the above
measures, the design process and testing will be optimal in application modelling and design.

11. Appendices

Page 11 of 12
 Appendix A

Appendix B
A TEST B TEST

Task Ratings Task Ratings

Ratings 1 to 5
Ratings 1 to 5

6 4.6 4.5 4.45

4.9
4.3 3.8 4.4 3.9 4.1 4.2 4
3.2 3.7 3.4
3.9 3.7 4 3.1 3.4
4
2 2

0 0

Tasks Tasks

12. References
Use CDU APA Style

Booth, UX. (2018) Complete Beginner’s Guide to Interaction Design.

https://www.uxbooth.com/articles/complete-beginners-guide-to-interaction-design/
Carroll, John M. (2010): Conceptualizing a possible discipline of human-computer interaction. In
Interacting with Computers, 22 (1) pp. 3-12. https://www.sciencedirect.com/science/article/B6V0D-
4XT3HKD-4/2/4aa81f63799d0e19738ea0c4b5956d07, retrieved 14 March 2022
CDU Lecture Notes (2022): S122 Hit381 Human Computer Interaction Design
Chen J, (2019): Designing a Wallet in 2 Hours. https://medium.com/swlh/designing-a-wallet-in-2-
hours-50c939c5e5f1, retrieved 14 March 2022.
Friis Dam R, (2021): 5 Stages in the Design Thinking Process.
https://www.interaction-design.org/literature/article/5-stages-in-the-design-thinking-process,
retrieved 14 March 2022.
Nielsen, J. (1994). How to Conduct a Heuristic Evaluation.
https://www.nngroup.com/articles/how-to-conduct-a-heuristic-evaluation/
Nielen, J. (2000). Why You Only Need to Test with 5 Users.
https://www.nngroup.com/articles/why-you-only-need-to-test-with-5-users/
Stevens, E. (2022). What is User Experience (UX)? Everything You Need to Know.
https://careerfoundry.com/en/blog/ux-design/what-is-user-experience-ux-design-everything-you-
need-to-know-to-get-started/

Page 12 of 12