# CS374 Design Project | DP 4 : Design Iteration | 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**

---

## Prototype iteration

### Prototype for DP4

> https://www.figma.com/file/xiVShUubdLgai1XD8TAaEO/HCI-Project?type=design&node-id=189%3A1677&mode=design&t=TWi0hjqtIFwhrSfg-1

We use same Figma project file, but create new page 'DP4' and develop our prototype at there. Please use the prototype at page 'DP4', not at 'DP3'.

### Heuristic Evaluation Request Form

> https://docs.google.com/document/d/1XYNExRq6Ew5XJ-JZld9-giiV1WgYOEEcSmD6Irv6kJY/edit

### Improvements

At the previous prototype, we only implemented ticket reservation progress. However, we implemented login with phone number and payment request process, which are more specific about seniors. Also, we improved the progress bar design, redesign some process of ticketing, and unified colors according to the function.

<center><img src="https://hackmd.io/_uploads/ry97JMKGA.png" ...></center>
<center>Figure 1. Log in. </center>

* Sign up is one of the reasons why seniors avoid using the app. We made this app available without a separate account creation procedure, using phone numbers and messaging features familiar to seniors.

<center><img src="https://hackmd.io/_uploads/By1O76OGC.png
" ...></center>
<center>Figure 2. Payment request </center>

* Adding a payment method is a big burden to seniors no matter how implemented. At this time, seniors can ask their children or acquaintances to pay for the tickets they reserved.

<center><img src="https://hackmd.io/_uploads/S1f5yzKMR.png
" ...></center>
<center>Figure 3. Progress bar improvement </center>

* The existing progress bar had the disadvantage that it was difficult for seniors to observe and the font size was also small. Also, seniors could not check the information selected in the previous step until just before booking a ticket. On these feedbacks, we separated the progress bar into a separate window based and modified the design so that seniors could recognize the informations at a glance.

<center><img src="https://hackmd.io/_uploads/SkVoNT_G0.png
" ...></center>
<center>Figure 4. Redesigned processes </center>

* We have modified the design of processes that are incomplete or require correction. Among them, the calendar has also added a function to move to the previous/next month.

<center><img src="https://hackmd.io/_uploads/BkiOrTuzC.png
" ...></center>
<center>Figure 5. Unified color </center>

* We modified the color of the prototype according to each function. For example, light gray indicates clickable functions, dark gray indicates functions that are not clickable or not yet completed, and green indicates selected or completed functions.

### Scinarios

We added one persona and supplemented the existing scenarios. Therefore, we wrote two scenarios.

* Scinario A
> moon-hee Na is trying to go down to Daejeon by KTX to see her family for Chuseok. However, it is difficult to book a seat on the day because there are many people using KTX on Chuseok. So she would like to make a reservation in advance through the app.
She tried to book a train using an existing app, but the function is so complicated that she doesn’t know how to book it.
Next day, her husband said he would go down with her. She would like to move to a seat close to the entrance for her husband and make an additional reservation.

* Scinario B
> Young Sim is living in Daejeon. He is trying to go to Seoul by KTX to meet his daughter and her family. He needed help with the payment because the payment process was too difficult during the ticket reservation process. But it was also difficult for his daughter to explain the payment process remotely. So he was looking for an easier way to do payment than pay directly.

### Tasks & Instruction

As two types of new functions were implemented, two tasks were added to suit them. In addition, we decided that reviewing the contents of the ticket was an extension of ticket reservation and excluded it from the task. As a result, our task has been set at four.
>Task 1. Using your phone number, log in to the application.
>Task 2. Book a train from Daejeon to Seoul where you will ride alone.
>Task 3. Modify the ticket you booked according to the new information provided by the guide.
>Task 4. Ask an acquaintance to buy a ticket instead of using your own payment method.

Task 1 of DP3 became task 2 of DP4, task 2 of DP3 was removed, and task 1 and 4 were added.

There are two types of tickets available for reservation in this prototype.
> Ticket A: Daejeon -> Seoul, 1 Senior, 2024.05.15, 14:30, 6-1B
> Ticket B: Daejeon -> Seoul, 2 Seniors, 2024.06.15, 11:00, 3-1C & 3-1D

You can't choose any other option than the above two, so you can't book another type of ticket.

>Task 1. Using your phone number, log in to the application.
<center><img src="https://hackmd.io/_uploads/ry97JMKGA.png" ...></center>
<center>Figure 6. Task 1 </center>

* There is no need to enter a number keyboard one by one, and you can move to the next by pressing the enter button. If you press the back button below while logging in, it will return to the start page.

>Task 2. Book a train from Daejeon to Seoul where you will ride alone.
<center><img src="https://hackmd.io/_uploads/Byj9sTdMR.png
" ...></center>
<center>Figure 7. Task 2 </center>

* Ticket A must be reserved during this process. In other words, the number of seniors in the passenger process must be 1. You can check the selected information by pressing the progress bar at any time, and you can return to the finished process by pressing the edit button. Also, you can return to the privious process by pressing prev button or back button at the bottom.

>Task 3. Modify the ticket you booked according to the new information provided by the guide.
<center><img src="https://hackmd.io/_uploads/BJ66hTOMC.png
" ...></center>
<center>Figure 8. Task 3 </center>

* After returning to ticket reservation by pressing the edit button at my tickets, you can continue to press the prev button or back button at the bottom, or use the progress bar to move to the passenger process. Ticket B can be booked by setting the number of seniors to 2.

>Task 4. Ask an acquaintance to buy a ticket instead of using your own payment method.
<center><img src="https://hackmd.io/_uploads/By1O76OGC.png
" ...></center>
<center>Figure 9. Task 4 </center>

* Similarly to task 1, you can move to the next by just pressing the enter button at the number pad. If you sent a request, you have completed all tasks.