# CS374 Design Project | DP 3 : Low-fidelity Prototyping | Report
---
### Project : Build the train mobile ticketing service for elderly people.
**Team Name : EasyKORAIL:station::ticket:**
**Team Members : Hyunseo Lee, Jinwoo Lee, Daekeon Song, Youngmin Yang**
**[Presentation Slides](https://docs.google.com/presentation/d/1v-IuwiwnHBKMdPMMMbVw9xXtWaYLnlW31t62sl6Uq6Y/edit#slide=id.g36a5ce4e75_0_0)**

---
* [POV](#POV)
* [Updates on DP2](#Updates-on-DP2)
* [Tasks](#Tasks)
* [Prototype](#Prototype)
* [Observation](#Observation)
* [Studio Reflections](#feedback)
- [Students' Feedback & Reflection](#students--feedback---reflection)
- [TA's Feedback & Reflection](#ta-s-feedback---reflection)
- [Feedback & Reflection Summary ](#review-feedback)
---

## POV
> From TA's feedback and discussions, we modified POV to eliminate the problems.

**We met** seniors who try to book train with the remote ticketing service.
**We were amazed** to realize that want a train ticketing process that they can get used to right away when they see it for the first time.
**It would be game-changing** if seniors overcome their fear of using unfamiliar technologies.

---

## Updates on DP2
**We have made the following changes in DP2:**
- We had received the feedback that 'HMW guide and inform seniors to board the train safely after completing their booking?' is too broad, so we have changed HMW question to 'HMW allow seniors to reverse the wrong choice right away?'
- As the question has changed, we have also changed the solution to 'Segment the process to give immediate access to everything.'

___

## Tasks
> Here, we develop 3 tasks to evaluate our prototype. Each task is connected to DP2 HMW and solutions through, so we can see if the problem we found is actually solved.
* Book a train from Daejeon to Seoul where you will ride. Do not think deeply about what to do at this time and act intuitively.
- Supported HMW: HMW motivate seniors to learn and understand how the functionality of the booking system works?
- Supported Solution: Borrow design features of the application that seniors are familiar (e.g. KakaoTalk, Youtube) with as much as possible so that it can guarantee learnability and reduce possible errors due to misunderstanding.
* Review the information you have written before booking a ticket. Check and compare the information after booking a ticket.
- Supported HMW: HMW assist seniors in easily recognizing that they are successfully completing the ticketing service?
- Supported Solution: Create a system where seniors can review if they have reserved tickets correctly at the last step before making the purchase so that seniors doesn’t have to worry about whether each step is being correctly processed.
* Modify the ticket you booked according to the new information provided by the guide.
- Supported HMW: HMW allow seniors to reverse the wrong choice right away?
- Supported Solution: Segment the process to give immediate access to everything.

---

## Prototype
> https://www.figma.com/file/xiVShUubdLgai1XD8TAaEO/HCI-DP3?type=design&node-id=54%3A667&mode=design&t=fTsqCYTTwWMUY7Rz-1

### Design Choices
> We excluded processes that are not directly involved in ticket reservation, such as login or payment, from the prototype. It also ruled out keyboard input.
* Instead of implementing these things, we think that it was important to implement the senior-friendly ticketing process more elaborately.
* Login and payment system requires connection between other systems such as user-database and bank account.
* Login system : All detailed functions related to the login system were excluded. Such as entering personal information when signing up for membership, finding ID and password, and loading the data based on ID and password from the database.
* Payment system : All detailed functions that require connection with external systems other than activities that can be done in our app, such as virtual account connection through personal information input, password input, payment confirmation, and payment method change were excluded.
* Typing system : Seniors type significantly slower than younger people. If word or sentence input was necessary, the process would take a lot of time, so we tried to exclude such input.

### Screenshot
<center><img src="https://hackmd.io/_uploads/Skle_95WC.png" ...></center>
<center>Figure 1. Seniors can see the process through the progress bar at the top. </center>
<br>

* The progress bar at the top displays what process the user is currently going through in ticket reservation. Also, user can rewrite the information from that point by clicking on the process they have already done.
<center><img src="https://hackmd.io/_uploads/S1Ebt95WR.png" ...></center>
<center>Figure 2. Seniors can easily adapt to the use of the app through familiar designs. </center>
<br>

* We actively used designs such as calendars and KakaoTalk chat lists that are familiar to seniors. The process description at the top and the familiar design keep seniors from wandering around while booking tickets. Since seniors can trace the color of each part of the bar changes as they proceed, they can learn from repetitive process. It guarantees the learnability of our design.
<center><img src="https://hackmd.io/_uploads/Sy_xGVobR.png" ...></center>
<center>Figure 3. Chromatic colors were used to highlight the necessary functions. </center>
<br>

* Most of the designs used achromatic colors. The chromatic colors were used for the available functions or selected items, and through this, users can easily find what they should do. By avoiding the desaturated colors, we can guide the users into the right direction, ensuring the safety.

### Instruction
Task progress is:
> 1. Reserve ticket A.
> 2. Check the information of ticket A.
> 3. Edit ticket A to reserve ticket B.

Unfortunately, users cannot act freely in this prototype. Users can reserve tickets through training reservation when there is no reserved ticket, and when there is a reserved ticket, they can modify the ticket through ticket confirmation.

> Ticket A: Daejeon -> Seoul, 1 Senior, 2024.05.01, 14:30, 1B
> Ticket B: Daejeon -> Seoul, 2 Seniors, 2024.05.11, 11:00, 3C & 3D

There are two types of tickets available for booking. The ticket available for reservation change according to the number of people selected by users in the passenger.

User behavior inside the flow is relatively free. When the user clicks on the selected item again, it is deselected, and they can move to the previous process through the prev button or the back button of the underbar. In addition, when a user presses a completed process in the progress bar, they can go to that process and rewrite the information. When the user completes all the tasks in one process, the next button is activated and can be moved on.

When the user completes all the processes, ticket information is displayed immediately before booking the ticket. At this time, if the user clicks the reserve button, the ticket is reserved, and ticket information may be checked at ticket confirmation.

---

## Observation

### Participants
> There are 4 participants.

- **A. 65 years old senior**.
- Interviewed by Youngmin.
- He takes the train to manage his parents' graves once or twice a year.
- He is good at using the Internet compared to his peers, but he has never booked online.
- **B. 74 years old senior.**
- Interviewed by Daekeon.
- She takes a train regularly to travel. Her destinations are quite restricted to few cities.
- She tried using the KORAIL mobile ticketing application when booking the train tickets, but, it takes relatively longer time compared to the face-to-face booking.
- **C. 68 years old senior.**
- Interviewed by Jinwoo.
- He takes a train regularly and tried to use KORAIL application, but his employees help him make the booking.
- He tried to book the train using the KORAIL mobile ticketing application, but he failed due to the complicated payment process and booking process.
- He rarely uses other smartphone application other than KakaoTalk, Youtube and Naver Map.
- **D. 75 years old senior**
- Interviewed by Hyunseo.
- She rarely used train but kept used other public transportation and intercity bus.
- She only used two applications including kakaotalk and Tmap.

### Usability Issues
> There are 10 usability issues.

* Some Seniors didn’t notice the existence of the progress bar and only relied on their intuition and trial-and-error during the test.
* High critical, from B and D
* Seniors can not see the previous information during reservation so that had hard time memorizing some details of the ticket before looking into the confirmation page. (The user C even tried to go back to the previous stage for the confirmation multiple times.)
* High critical, from A, B and C
* At the beginning of the test, seniors tried to click on the progress bar that designates each step to proceed rather than clicking on the “next”.
* High critical, from C and D
* When adjusting the number of the passenger, seniors tried to click on the number rather than clicking on “plus/minus” button.
* Medium critical, from A, B and D
* During the reservation process, seniors were confused about what does the color (yellow, green, gray) of the progress bar mean and could not infer their meanings.
* Medium critical, from B and C
* Seniors were not able to know the additional information, such as the direction of the train and the rating of the seat when they are choosing the seat.
* Medium critical, from A and C
* Seniors could not refer to the arrival time of the train throughout the reservation process.
* Medium critical, from B and D
* Seniors felt uncomfortable with the way the city names were arranged and wandered for a long time finding the designated station name.
* Medium critical, from A and D
* Seniors pressed the train time selection several times because of the writing “Select”.
* Low critical, from B
* After finishing the train ticket reservation, seniors were confused what does “edit” mean when he was asked to make changes on the booked ticket.
* Low critical, from C

### Plan for Improvements

* Clarification of the functionality of the progress bar.
* Rather than previous progress bar component, replace it with narrower bar with floating caption that indicates each steps, thereby, avoid the misunderstanding about the functionality of the bar.
* Improve a design that ensures intuitive behavior for more information.
* There's a way to create an additional tab and click it to see more information or take slide input to see a long list.
* Emphasize the button more with indicative design feature so that users can easily know what to do next.
* We thought that using emphatic line or highlight signal, animated arrow can be helpful.

- Include and summarize the necessary details during the booking process that seniors can refer to.
- Without being verbous, we plan to add interactive display or display that can summarize the necessary details about the booking that seniors can refer to.
- Support more organized design for selecting the arrival and departure station.
- Include graphics with map that seniors can easily get access to the desired train station when choosing the arrival and departure station. Also, we can adopt organization algorithm based on users' personal information. (e.g. preference, current location)

---

## Studio Reflections
> Thanks to students and TA in the CS374 design studio, we could collect following invaluable feedbacks about our work.

### Students' Feedback & Reflection
> What if you provide concrete examples of what functionalities have not been implemented.
* We tried to explain the constriant of the functionalities in "Design Choices" part of the slides and report. Reflecting the feedback on our project, we thoroughly explained the limitations of our Lofi-prototype on the report.
> If you want to change the number of people you have to go to the very front. What if you just want to book another seat right next to your original seat? Also, how does your app provide ways to book from different platforms?(열차 칸)
* We wil add functions that can change the platforms(열차 칸) in train. In addition, we will reflect opinions related to the convenience of the app and revised to increase the convenience of the app.
> What if increasing the font size, and reducing the highlights so that seniors can focus on the most important parts without losing focus?
* We are also trying to make it easier for the seniors to recognize the it. We are considering increasing the font size, and we will decide whether to increase or decrease the highlight after experiments and investigations.
> I think the progress bar on the top has very small text considering your target user.
* It's a high priority usability problem. We will try to improve it. Please refer to the "Plan for Improvements" part for the direction and details.
> I wonder why 3rd high critical user issue is high critical. I think using just the progress bar instead of the next button is not that much of a problem.
* This is because the action is something we didn't expect and it would result in a lot of hassle during the usage. We originally designed this feature to help seniors recognize the progress of the booking steps, not to help them move on to the next step. We will change the app function or design so that there is no confusion.
> The confirmation tickets section sounds like you must have to go there while its optional. (reviewing ticket in real life is optional)
* In our prototype, we aim to "help seniors to review / ensure the validity of the ticket" during and after the reservation. (Relevant HMW question : HMW assist seniors in easily recognizing that they are successfully completing the ticketing service?) Therefore, it was core task to be included in our prototype. Of course, after reservation, ticket confirmation is optional and users can refer to it only if they're needed.

### TA's Feedback & Reflection
> Refactor the tasks to be more relevant to the seniors than others. (senior specific task)
* We agreee that the current tasks are relatively more general-purpose. Since we tried to tackle the problem that "seniors are reluctant to use remote booking system for the train travel", we have articulated the proposed POV and tasks to support overall functionalities that booking system should have. We realized that there are some limitations on creating the tasks that are senior-specific based on the current POV. Thereby, we currently plan to extend the scope of our project and rather focusing on the booking process, we try to delve into sovling the difficulties that seniors face with before boarding the train. (e.g. finding the route for the train station, carrying heavy baggages, finding the expected time that takes to the platform) We may make some revisions on the POV and refactor the tasks based on that POV. We will discuss on this agendas before working on DP 4 and plan to get some constructive advises from TAs.

### Feedback & Reflection Summary
> To organize the feedbacks in a high-level theme, core ideas that were addressed are given as follows. We reflected invaluable feedbacks on our report and our next prototype.
- **Adjust the task and feature according to our POV**
- **Make the design clear so that seniors do not wander during ticket reservations.**
- **Based on the feedbacks, we plan to make revisions on the POV to be more user (seniors) - specific and refactor the tasks based on that POV**