Application Design I / Project 3

29.10.2023 - 19.11.2023 (Week 9 - Week 13)

Loke Yan Ling / 0344602 

Application Design I  / Bachelor of Design in Creative Media

Project 3 : Low Fidelity Prototype

---

Link to other project

Project 1: Proposal

Project 2: UI/UX Documentation

Project 4: High Fidelity Prototype

---

Instructions

---

Project 3 : Low Fidelity Prototype

Typography

Fig 1.1 Typeface family

"Dongle(동글) is a rounded sans-serif typeface for display. It is a modular Hangeul with the de-square frame, creating a playful and rhythmic movement."

As the description above on google font, dongle typeface is a simple and clean san-serif typeface, the rounded look is the polar opposite of the logo itself, giving the logo a sharp contrast to make it more recognizable. In previous project, I also chooses san serif typeface as my font choice with the same reason, because the websites/apps are designed for the masses, therefore it is important to use a typeface that is more readable.

Colour Scheme

Fig 1.2 Colour Scheme

While picking the colour scheme, I found that the colour scheme I used on Project 1 & 2 slides really suites the current app as it also have the same colour scheme as Taylor's University. It will be more recognizable as one of the Taylor's Bus Shuttle app with the same colour scheme identity. Furthermore, the advantage of this colour scheme also brings emphasis to important info and achieving visual hierarchy.

Wireframe

Fig 1.3 Half High-Fidelity Prototype

At first, I went in the wrong direction and designed the high fidelity prototype first, but my friend reminded me of that and I was able to pull back my progress. The wireframe is designed according to the card sorting results, categorize the features in different categories. I also add on the feature of highlighting the route as mentioned by one of the survey participants, this help the user understand the directions of the bus.

Fig 1.4 Prototype

Mr Shamsul think the overall is okay, only the bus details there need to have more contrast on the bus status and timing. I have explain my concern on the "On Time" will be not that obvious, and the suggestion given is using different gradient and thickness of stroke to emphasize it.

Fig 1.5 Bus and Bus Driver details

Then, I keep on progression, I want make most of the buttons are usable, because there just a few features have on this app, so it is important to focus more on the details and the user flow. Then, I found out that Figma is really convenient on to do as a prototype, only need to drag the component to desire page, then it really function as a button. 

Fig 1.5 Added Language and Guides & tutorial

Fig 1.6 Prototyping 1

Fig 1.7 Prototyping 2

Mostly, I will make the changes of the prototyping directly from the right hand side toolbar, because there may have small error on dragging and the interaction I want is tap. When I drag the button to another page the interaction possibly I have is drag, not tap and the animation I  choose is instant to make the flow more consistent. Things to be careful are the size and position of every element must be the same.

Icons

Fig 1.8 Component Used

On Week 10, Mr Shamsul share some useful tips to us that Figma can create component. By creating component in another page, they can reuse across your designs and manage consistent designs across projects.

Map

Fig 1.9 Finding the location of each station

Fig 1.10 Using Google Map

I asked friend, who are familiar with Taylor's shuttle bus routes, he help me clarified the routes and station from the map (Fig 1.9) because I really not familiar with Selangor from map of view. To draw the routes from the map, I used Google map to estimate the route with given location from Taylor Shuttle Bus Schedule. There are total of 6 routes, only two routes operate in one time, therefore i only drew for two routes. 

Fig 1.11 Prototype view

In prototype view, I change the device into iphone 14, then only noticed the top and bottom border issue and adjusted in project 4. 

Vid 1 Video Show case

Fig 1.12 Overall Prototyping

Figma Low-Fidelity Prototype

Fig 1.8 Final Low-Fi Prototype

Scenario

Scenario 1

Find the current bus location and estimated arrival time on route TU2A

Scenario 2

Check the route schedule timetable, then find the current bus location of TU1A

Scenario 3

Find current location of bus and estimated arrival time on route TU2A through guide and tutorial.

Based on the prototype, the scenario designed are simple, because not all user has used the eup-gps before, so the aim is let them find the route with guide and tutorial given. Additionally, I also found that the user flow in Project 2 are not finalize enough and I will redesigned it agn.

Usability Testing

Fig 2.1  Low-Fi Usability Test

As mentioned by User 2, Sylvia the component on the header is hard to noticed, and this will be improved in High-Fi Prototype. User 1, Sin Wei also told me that the normally one route have two shuttle bus operating, this would be consider in High-Fi Prototype also. Same as, user 3, Shin Yen, I feel that there is still a lot of improvement, maybe I should reinvestigate the user flow to see any else can amended. 

Then I heard from YiTing that need to record the user testing progression but I didn't done this!!! I will remember this on Project 4 TT.

Things to noticed: 

    - Colour & Contrast

    - Two bus operating in one route

    - User Flow

---

Feedback

Week 10

The user interface cannot be included as the Minimum Viable Product (MVP) features. In my case, I can have only two mvp features. The survey question should include race and the motivation. The answer choices in the survey questions can have more than one "maybe" option, as some people may not have as straightforward an answer.

---