XUKAI (KEVIN) SHI

[kevshi77]

To do List

[kevshi77]

Prototype Link

 https://xd.adobe.com/view/42357d57-9cd3-4040-78f3-c587473e4da4-3404/

[kevshi77]

Personal Reflection

Finding the topic was struggling for me. I have made a couple of changes in my research direction due to different reasons. At the start of the first semester, I was planning to do elderly isolation, but it did not get approved by Ethics team. After that, I realised my concept did not match my HMW, but I was running out of time. So I had to rethink and change my topic. It took a while for me to confirm my topic. But it was a helpful experience for me to realise that others’ opinions are always important no matter good or bad. Without doing user testing, I won’t be able to find the weaknesses of my concept.

Overall, I am satisfied with what I have done. Talking to people was one of my weaknesses because English is my second language. When I was studying graphic design, I didn’t need to talk to people, only focus on my own. However, studying UX/UI forced me (in a good way :D) to interact with people. And this helped me improve my communication skill and empathising skill.

Since my research showed that a lot of people were unsure about transport safety at night. I can see there is a big chance for my design to be realistic. If AT can launch it, it can be beneficial and handy for those passengers who need insurance for their journey. More importantly, the concept can be used by the emergency department to build the connection between the operators and Aucklanders easily.

[kevshi77]

Final Prototype: Emergency

If something terrible happens, there will be a button for the users to press. And that is all they need to do. Because they have already filled the authentication and shared the location. The help call would be sending out as an info sheet with the person’s details and location on it. Eventually, the patrolling police will go there and lend help. 

Therefore, with the emergency feature, passengers don’t have to waste a lot of time to talk over the phone, which most likely they can’t. And there will be no communication barrier between the users and the operators.  

[kevshi77]

Final Prototype: Contacts & Scan

In contacts, users can customise their safety buddy. Also, if their contacts also added them. They can check each other’s location and either call or navigate to each other. 

After arriving at the bus stop, users can scan the QR code to share their location and check-in as one passenger waiting. So that the other passengers can check if the bus stop is safe to go.

[kevshi77]

Final Prototype: Bus Stops in Colour

On the map, users can easily recognise the safety level of bus stops by the colours. The green colour means there are above three passengers waiting and the red colour means there are less than one passenger waiting. For those passengers know what route they take, they can simply press the bus icon to check the schedule and safety level. For those passengers are not familiar with their bus. They can type in the search bar and find the correct bus.

[kevshi77]

Final Prototype: Onboarding

[kevshi77]

Typefaces & Colours:

In my final prototype, I chose to use the same design elements with At Mobile App because I want my project to be as accurate as possible. So I used Open Sans and Dark Blue (233c55) for my typeface and colour.

From my user testings, I found my participants did pretty well in terms of finishing different tasks. They mentioned that the similar-looking interface with At Mobile helped them to navigate clearly because they were quite familiar with using At Mobile. I am not sure if it is a benefit for those users who never used At Mobile App. However, since my project is targetting at regular night passengers, I assume that my users should all have At Mobile and know how to use that correctly.

I usually set 10 Pts for body copy in print works. But soon after, I noticed that viewing on mobile devices is a different story. From my second round of user testings, my participants mentioned that they couldn’t read some of the content because it was so small. So I adjusted my title to 20 Pts from 15 Pts and my body to 15 Pts from 10 Pts. After that, my participants found it much easier to read.

[kevshi77]

The target audience

All AT Mobile App Users.

No driver license.

Working in the City (Don’t want to pay high parking fee).

Night worker. (After 8 pm)

Early worker. (Before 5 am)

Teenagers.

[kevshi77]

Prototype Refinement 2:

Authentication is a process to verify users’ identity, and it is how users activate the emergency feature. For new users, they will see a screen to tell them to complete the authentication before they start using “At Night”. 

The reason for doing that is to make sure that users don’t press emergency just for a prank. More importantly, filling out ur personal details can help the emergency operator to receive your call more efficiently. Users don’t need to spend 30mins on the phone to explain anything. All they need to do is press “Emergency” and wait for help.

[kevshi77]

Prototype refinement 1:

After the user arrives at the bus stop, they are supposed to scan the QR Code. However, I noticed that the participants didn’t know it because there wasn’t any information or notification to tell them to. Therefore, I created a new screen after they arrive at the stop. It will have the bus stop detail and a short description to help users quickly understand what to do after.

[kevshi77]

User Testing V2:

I want to get more useful feedback from my second round of user testing. Hence, I made a task sheet and asked my participants to complete each task. Fortunately, they found the prototype very easy to navigate and understand. They said the colour and layout were very similar to At mobile App. And the onboarding screens have well explained the features.

However, one of the participants found it hard to find the scan button after he arrived at the bus stop. He suggested me to add some content to inform users to scan the QR code once they arrived at the bus stop. Another insight was they found struggled to call emergency before verifying the identity. They recommended me to have a new onboarding screen to help users complete the authentication before they even started using the system.

[kevshi77]

Prototype V2:

After spending a few weeks to decide my final concept. I know that I am really behind, so I choose not to do the low-fi prototype but jump straight onto high-fi. Based on the feedback from last user testing, I refined the concept of my solution and added some new features to it. Instead of downloading a new app to reassure their safety at night, now users only need to use At Mobile to launch the system. Also, I added onboarding screens to help new users understand the programme. If users don’t want to share where they at, they can go to privacy and untick the box to hide their location. 

[kevshi77]

In the following class, I talked to Keryn about my concerns from the user feedback. 

-Users didn’t want to download it as an independent App. -They didn’t understand the most of features unless I explained. -They thought it was another navigation App or transport App. -What if they don’t want to share their location?

 Keryn suggested me to make it as a plug-in or extension. Maybe utilise on something that already has a big amount of users and resources. And make sure just focus on the specific aspects that are related to my topic. Not those been previously used.

Keryn’s suggestion was beneficial, and I started to think if there could be an App that is suitable for my project. Eventually, AT Mobile App became the best option for me as all the public transport passengers are using it. And it has the most precision transport schedule.

[kevshi77]

Because I didn’t have many clickable buttons and design elements, the participants found confusing to understand the purpose. They thought it was just a navigation App like Google Map or At Mobile. After I explained my App’s purpose, the majority of them said that they were not quite sure if they would like to download another App to reassure their safety at night. There are many similar App out there, and they didn’t want to waste mobile storage.

Another central insight was that they found it quite hard to understand the App without the explanation. The participants suggested me to add some onboarding screens to introduce the features. So, new users wouldn’t get confused.

[kevshi77]

User flow - Prototype V1

[kevshi77]

Prototype V1:

I chose to use Adobe XD to create my prototype. I found it very handy after they updated the animation features. The wireframe was a checkpoint for me to know what contents to have and if it approaches my target needs. The design of my wireframe was simple and straightforward — none of the fonts or colour considered at that point.