# CS374 Design Project | DP 6 : Project Showcase | 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**

---

## Quality argument

In this project, we interviewed seniors continuously to find out what part of the online train reservation was uncomfortable. Most seniors wanted to book train tickets online, but technical barriers, especially complicated procedures and dense information, caused them to suffer greatly. Thus, our prototype focused on classifying the information in as much detail as possible and simplifying complex procedures.

<div style="text-align: center;", "display: flex;">
<img src="https://hackmd.io/_uploads/H1tDnynER.jpg" alt="Description" width="250"/>
<img src="https://hackmd.io/_uploads/rkqj21h40.jpg" alt="Description" width="250"/>
<img src="https://hackmd.io/_uploads/SJbqn12VR.jpg" alt="Description" width="250"/>
<p>[Figure 1] Reservation Progress Bar. The progress bar records the current process location and information entered so far and supports the quick edit.</p>
</div>

The biggest feature of the contents planned from the beginning is the **progress bar** of ticket reservation. The ticket reservation process was divided into five distinct processes, and the previous processes were implemented to be always correctable. Instead of understanding a lot of information at once, seniors can solve each process sequentially, which helps improve learnability.

<div style="text-align: center;", "display: flex;">
<img src="https://hackmd.io/_uploads/SJnpnk3EC.jpg" alt="Description" width="250"/>
<img src="https://hackmd.io/_uploads/B1BR212V0.jpg" alt="Description" width="250"/>
<p>[Figure 2] Log In and Payment Request. These functions replace complex functions that are problematic for seniors and improve usability.</p>
</div>

Membership registration and payment methods are the biggest barriers to preventing seniors from booking online. We replaced these with a procedure that is familiar to seniors and simple. First, this prototype allows each individual's information to be stored only with a mobile **phone number** instead of a complicated membership registration procedure. In addition, one of the unique features of this prototype, **payment request**, is the function for seniors to send ticket payment requests to acquaintances instead of paying directly.

<div style="text-align: center;", "display: flex;">
<img src="https://hackmd.io/_uploads/SyUOluxBA.png" alt="Description" width="250"/>
<img src="https://hackmd.io/_uploads/B17Ye_xHR.png" alt="Description" width="250"/>
<img src="https://hackmd.io/_uploads/HyAKldeSR.png" alt="Description" width="250"/>
<p>[Figure 3] Quick Assistance. Seniors can get a lot of help even in actual boarding situations after booking tickets.</p>
</div>

**Quick Assistance** is a function that helps the seniors at the train station, beyond simple ticket reservations. Seniors can simply request personalized help by tagging NFC at the assistance hub installed in the station. Seniors can request 4 types of help, Medical Help, Mobility Impairments, Heavy Baggages, Can Not Find the Designated Platform. Through the quick assistance function, our prototype provide same conditions to users even if users have mobility impairments, the environment issues, or even if users are on the train for the first time. In other words, our prototype keep universality through a 'Quick Assistance' function.

<div style="text-align: center;", "display: flex;">
<img src="https://hackmd.io/_uploads/rkY7TkhVR.jpg" alt="Description" width="250"/>
<img src="https://hackmd.io/_uploads/r1GNp1h40.jpg" alt="Description" width="250"/>
<p>[Figure 4] The clean and concise design improves the efficiency of the seniors to the prototype.</p>
</div>

The design of the prototype was thoroughly aimed at seniors. Most of the writing was used in large sizes over 24px. Most of the prototype's colors were achromatic, and the parts representing completion were emphasized in green to enhance the intuition of seniors. In order not to give seniors complex tasks, all functions except direct payment are possible only by touch and numpad input. This neat design and easy operation make it easy for seniors even who are new to this prototype to use.

All of these advantages are maximized by writing prototypes in HTML. By storing and fetching information entered by seniors on the site, the prototype can be used freely away from a fixed path. Seniors can book as many kinds of tickets as they want, and they can check all of these at once on the ticket list. All tasks are not clearly divided but organically connected, and seniors can move between each task as they wish. This ensures that seniors feel similar to real-world apps and naturally familiarize themselves with this prototype. Therefore, we have concluded that our prototype is well designed for the seniors.

## Iteration
In DP6, We first improved our prototype to be more senior-specific. We made new function "Quick Assistance", that allows users to request personalized help from staff by simply tagging their phone on the NFC at the assistance hub in the station. We also added QR code and platform map that expands when user click them.

Moreover, we focused on increasing visibility and accessibility while adding additional senior-specific features. To increase visibility, we add confirmation animation and alert message of Reservation, Payment Request, and Payment. Informing that senior's action worked correctly helps seniors become confident in their action. To increase accessibility, we showed simple description about Payment Request function and added the home button in the reservation progress bar. In the end, our UI, which is more accessible and easier to use for the seniors, should not only be simple and intuitive, but require direct explanation at all.

During design process, we received a lot of feedback from TA, students, interviewees. We tried to reflect the feedback as much as possible, but it was not easy. Some feedbacks had conflict with others, Some feedback said that the changed part was not good. In addition, there was feedback that required the production of features that were difficult to implement. In this process, we thought sometimes it can be harmful to reflect 'all the feedback' because sometimes they had different directions. We found the importance of choosing and accepting appropriate feedback because receiving all feedback can lead to rather bad results.

In this way, we added a new feature that was senior specific to the dp6 period and improved our prototype by reflecting feedback. These changes will provide a more convenient training mobile ticketing service for the seniors.

## Individual reflection - Hyunseo
I added a new function to the interface and contributed to the completion of the team's interface by modifying the prototype according to the feedback. First, I created the new “Easy access” function, one of the senior specific functions in the existing prototype. Second, I modified the interface according to the feedback, such as adding a home button to the reservation process and adding a header to the station list. Also, I corrected various errors that occurred in the merge process. Overall, I merged the work of each team members and solved the conflict when there was a problem with the version so that the latest version could be maintained at all times.

The thing done well in our team is that the entire design process went as planned thanks to the active participation of all of our team members. All of our team members have been on time for the meeting, and we have completed all of the assignments that we have shared with each other within the promised time. Even if it took a long time for each works, our team members' active participation enabled us to complete all of the assignments and deliverables on time.
However, the most insufficient part of our team was that there are parts where we have not all found problems with our works. For example, when we first wrote the POV, we first thought it was really appropriate. After feedback, we knew that it did not meet the conditions. So we changed the POV several times through feedback. Perhaps because we spent a lot of time together working together, there are many things that the whole missed out on due to overlapping thoughts. We tried to look at the problem by accepting the feedback on this part and continuing to think about whether our conclusion was unsatisfactory. Through this method, we got a little better result in the DP later, but it didn't seem to be a fundamental solution to this problem. I think we can improve this by proceeding with the team project by making sure we understand what we need to do first, like the brainstorming process, and then gathering and checking. Next time, I will try to produce better results with the application of this method.

I found out that for user-centered design and UI prototyping, wide variety of people are required. In order to become a user-centered design, it has to be a design that can satisfy various types of people, so I need information about various people. The same is true of UI Prototyping. When we built the prototype, we thought it was the perfect prototype, but when we listen to the opinions of other teams, we found a way to improve our prototype. In other words, since there can be bias within our team, we should always try to see our results from various perspectives. In conclusion, I felt that we needed many different people to add to the UI prototyping process itself.

## Individual reflection - Jinwoo
During the successive design projects of our team, I first suggested to tackle the problems of senior rail passengers in the "needfinding step" and developed the core ideas for the user interviews in this step. I also encouraged the thougtful discussions using the collaborative tool Figjam. Since we confronted several difficulties in "ideation step", it was important to pivot our POV and relevant solutions to truly contribute to solve the suggested problem. After movidng to the prototype stage, I focused on refactoring our POV along with the "senior-specific features". Features such as "payment request", "easy assistance", "badge notifications" are ideas that I come up with after reviewing the interviews with the seniors. Also, I contributed to arrange the design components to improve the learnability and consistency of design. When implementing the web-prototype, I suggested to host our website using GitHub Pages and also implemented "senior specific features" including the payment, payment request and easy assistance with intuitive animations. I also leaded the design iteration after HE while examining the efficiency of our design. Finally, I also prepared the presentation and video at the end of the semester.

In terms of the teamwork, all of our member put considerable amount of efforts in the project. During the "Ideation" and "Prototyping", every team member discussed cheerfully to align our ideas. Constructive feedbacks were also one of the key. However, the lack of time to implement the senior specific design was the limitation. There were excessive amount of idea on this part and we should have selected the core features in advance of DP4 or 5. Still, we carefully distributed the works by "modularization of our design" so that it could accelerate the iteration. Overall, I would say that the early stage including the needfinding and ideation would be the keystone for the DP and it would greatly save the time for the future prototyping.

Throughout the 6 consecutive design projects, I could gain several insights and knowledges about user-centered design process and UI prototyping. First thing is that "develop should always be respectful to user." After the release of certain service or product, the users got to interact with the interface that designers and programmers have developed. Even if they had ambitious ideas and motivations, without meticulously aggreagting the feedbacks and insights from the target users, it would never resolve the problems they face with. This insight can be summarized by the quote "user're always right." In addition, after completing the whole steps in design projects, I realized that "ideation" is one of the most critical part in developing the careful design. Continuoulsy pivoting the POV, HMW questions and solutions to tackle the problems that target user have could help designers to truly understand the route to solve the problem.

## Individual reflection - Daekeon
Prior to the prototype, I worked on slides, presentations, and brainstormings. In the prototype, I mainly worked to increase detailed visibility of system status and uniform connectedness. In the prototype mainly created by Youngmin, I continued to receive opinions and feedback from seniors, provided feedback on the prototype, or designed detailed elements that would be good to be implemented in the html prototype. I made various alert systems that let seniors know the expiration time reflected in real time in the html prototype, and those systems inform seniors of useful functions or features that they might not notice due to other issues.

Our team chose a target user who was unfamiliar but difficult to interview or receive user feedback often during the semester. Nevertheless, in this situation, all team members actively participated in the discussion to derive and improve ideas to obtain better results. However, due to the need for an unfamiliar approach about seniors and feedback that is not easy to improve, it was difficult for us to have time and to clarify the direction of the idea of our project. We resolved the lack of time by distinguishing the iteration that came from feedback and distributing it to each role, and in the case of the direction of the idea or POV, it became slowly clear over the design project. In the end, I realized that it was important not only to consider the novelty or realization of the idea but also to clearly set the direction of the idea in the early stage of the design project.

In this team-based design project experience, I first learned how different the perspective about the inconveniences and advantages of users are from the perspective of the designer. Although designers are also users, the target users had a different understanding of programs and projects than designers after all, so it became easier to overcome this difference in perspective in projects that were made together rather than alone. It was interesting that even though we received the same feedback about the UI prototype, the approach to solving it was different for each developer. In the end, it was an important insight to create a convenient HCI by understanding the differences in perceptions between users and developers and applying the differences to each situation and prototype design.

## Individual reflection - Youngmin
Our group had to discuss the direction of the project after DP1 and DP2 again. All the team members suggested several opinions on the new direction, and I suggested that we should implement a design that is familiar to seniors. Our team's POV was decided by combining several opinions, including my opinion.

I have since made most of the Figma prototype. At the time of DP3, the Figma prototype had two characteristics: a reservation progress bar and a senior friendly design. I designed the prototype to meet this standard. After user testing, I modified the prototype to solve the problems found. I changed the design of the reservation progress bar to make it easier for seniors to use, and implemented the phone number login and payment request function.

Before proceeding with DP5, our group discussed whether existing prototypes should be converted into HTML. I argued that prototypes from DP5 should show a similar feeling of use to real-world apps, and that transformations should be made because there is a large difference in completeness between Figma and HTML prototypes. Our group decided to convert the Figma prototype to HTML, and I first started moving the part implemented with Figma to HTML.

Unlike Figma, HTML prototype had to actually show the information entered by the user. For this purpose, I saved the user's input using HTML's loal storage function. In addition, it took a lot of time to transfer the Figma design to HTML. After transferring the existing prototype to HTML, our group decided to add new features. I newly constructed the connection between the information window and other HTML pages after booking the ticket, and modified the code so that the functions implemented by other members of the team did not conflict.

I think our group's project was successfully completed. The project was completed without a major conflict, and each person performed their role well. In particular, instead of dividing the roles of each person from the beginning, the details were assigned to each person while implementing a basic prototype, which greatly reduced the time required to implement the prototype. This was the first project direction I used, but I made a pretty good result, and I think I'll use it for my team projects afterwards.

Through the team-based design project experience, I learned that the user-centered design process involves deeply understanding the needs and behaviors of users to create effective solutions. The UI viewed by the developer and the actual user was different, and the way the user's feedback was understood was different for each developer. In the process of discussing for the final outcome, I was able to observe the prototype from various perspectives, and I realized that this increased the completeness of the prototype.

## Video Link

https://www.youtube.com/channel/UCdKhScP3kE9ObPummlyDxBw
Please click on the latest video in this channel named "KAIST CS374 | EasyKORAIL | Easy Train for Seniors"