Application Design · Final Project · Completed Mobile Application Design Prototype (High-Fi)

11 Nov 2024 -  12 Jan 2024 / Week 8 - Week 14

YANG ZHI CHING / 0365154

Application Design / Bachelor of Design (Hons) in Creative Media

Final Project · Completed Mobile Application Design Prototype (High-Fi)

---

INSTRUCTION

Doc 1.1 MIB

Instruction |

• Create High-Fidelity Prototype using Adobe XD, Figma, InVision Studio, or similar tools.
• Usability Testing for 3 person to get responses and feedback.
• Document the processes

Submission Requirements |

• Project files (Adobe XD/Figma).
• Video walkthrough.
• Online reflective posts in e-portfolio.

---

Final Project · 
Completed Mobile Application Design Prototype (High-Fi)

Low-Fidelity Prototype |

Figma Link: https://www.figma.com/proto/vkMtxiadLlpSFE8qUo9Zjg/Lowfi?node-id=0-1&t=WiVdxZgPQ3GpLmmF-1

Walkthrough Video Youtube Link: https://youtu.be/4OEozFS45BE

Color Palette & References |

Fig 1.1 Moovit Logo

 

Fig 1.2 Moovit Color Scheme

 

Fig 1.3 Visual Reference

Fig 1.4 Visual Reference

Working Progress - Landing Pages |

With the low-fi model, it was much easier to make high-fi. I didn't just copy and paste and change the color. Since I didn't do a good job of grouping and categorizing in low-fi, I organized every component and every layer from scratch in high-fi so that I could do a better job of prototyping later.

The first part is the landing page. I want to use the original logo of moovit as the mascor of the app to make users more impressed with this app. I re-drew little MOO (named by myself) and made him more expressive and cute. The following is the original little moo and the version I drew:

Fig 1.5 Logo Making Process

Fig 1.6 Moovit Logo

After completing the basic expression, I made two other expression branches for the three pages of the landing page:

In terms of text, I didn't add too much text, I prefer the style of introduction. After completing the landing page, I made the sign up and login pages. I originally planned to use orange for the background, but I found that the saturation of orange was too high, which might cause visual fatigue for users, so I changed to a white background with a small amount of orange. In addition, I also made only a small moo avatar image on the sign up page to increase the presence of small moo as much as possible.

Fig 1.7 Landing Page

After completing the basic page, I used animation to simulate the input effect. I entered virtual information (in fact, Helby is the name of my cat) and added a loading animation for confirmation click. At this point, the landing page is basically finished, and the main interface design is about to begin.

Fig 1.8 Sign Up Page Flow with Responsive

Fig 1.9 Sign Up Page

Working Progress - Home Page (Route Planning) |

The main interface is basically the same as the low-fi design. Most of the time was spent on adjusting the details and making small icons.

When considering the color of the main interface, the initial idea was an orange background, but considering the visual fatigue mentioned above, I changed it to a dark gray with a lower saturation and an orange secondary color. (The orange version did not take a screenshot successfully..) The second option also had a white background, but it was a bit similar to the map color, so it might cause confusion. In the end, I chose black.

In the consulting chart section, I wanted to use different colors to try to make the main black color less monotonous.

Fig 1.10 Main Page Flow

 

Fig 1.11 Icon and Detail Design

Fig 1.12 Main Page Flow with Prototype

Next is the navigation part after selecting the departure point and destination. I used the same low-fi design as before, making some details and minor adjustments. Here is a preview of the entire navigation process:

  

Fig 1.13 Low-Fi & High-Fi of Navigation Steps

Since I want to make a scrolling effect, the length of scrolling is reserved below. And only the route part of the map is made. I refer to the route color to indicate the route and walking section. I tried to use the correct route location at first, but I couldn't find a suitable map on the real map (not clear and with watermarks), and the map was too large to draw successfully, so the following map does not match the actual route.

Fig 1.14 Map Screenshot in Google Maps

Fig 1.15 Map Making Process

For all the step navigation interfaces, I mapped the map to each step. After completing these, I made the points earning and report windows. I added corresponding animations to the report system to make the user feel interactive.

Fig 1.16 Navigation Flow

Fig 1.17 Report Button Animation Flow

Fig 1.18 Point Earnings Windoes

Working Progress - Profile Pages |

After completing the navigation function of the main interface, I proceeded to the second main function (MVP) of the points system. In order to make the interface more vivid, I added the avatar of Xiaomoo and added badges logos with more colors. First, below the avatar is the points bar, which will show the eco points and badges accumulated by the user. Below are four sections: goals, badges, rewards and catalogue.

  

Fig 1.19 Low-Fi & High-Fi of Profile Page

Complete rewards page and flow preview. After completing the rewards page, I started to organize the settings page. The settings page does not have much design sense, and the responsive functions are: Area Metro Selector, My Trip History, and panic button. After completing the settings interface, I made many versions of the are metro interface to achieve: after clicking, the selected area can be displayed on the original "tap to set". At first, I made various interfaces, but in the end I found that as long as I did a good set component, figma is really easy to use!

After completing the are metro, I also focused on the design of my trip history and panic button. In the panic button, when I imagined myself in an emergency environment, I thought the most important thing was the "tolerance", so I designed the size of the button to be as large as possible. Even if you close your eyes, no matter whether the phone is in landscape or portrait mode, you can press it as long as you try to click in the middle and it has obvious color and button.

In addition, I designed a responsive animation after clicking panic button.

Fig 1.20 Profile Page Flow

Fig 1.21 Profile Page Prototype Flow

Fig 1.22 Area Metro Selector Component

Fig 1.23 Setting & Area Metro Flow

Fig 1.24 Panic Button

Fig 1.25 Responsive Animation

Fig 1.26 My Trip History

Working Progress - Other Information Pages |

After completing several of the more important functions, the rest are basically information pages without much functional design.

Fig 1.27 Notification Page

 

Fig 1.28 Notification Pages

Fig 1.29 Overflow

Figma & Walkthrough Video |

Figma Link: https://www.figma.com/proto/eFxDPRQzameJlHibY9aBNu/High-Fi?node-id=0-1&t=hFkmNTxEs16GUwE5-1

Youtube Link: https://youtu.be/9nh3SbTJ0_c

Userbility Testing |

Three scenarios/tasks with detailed descriptions that required users to perform specific actions within the application.

Task 1: Go Through the Landing Pages and Sign Up

1. Open Moovit App
2. Lauching the three Landing Pages
3. Click "Sign Up"
4. Click to enter Set-Up details
5. Successfully Sign in
6. Navigate to Home Page

Task 2: Report a Delayed Bus and Earn Points

1. Click Quick Search Bar "Where do you want to go?"
2. Search "Kuala Lumpur"
3. Selecte the shortest route to your destination
4. Start you Journey! Follow the Navigation.
5. At KL Sentral Bus Stop, click the report button to report the bus was delayed.
6. You arrived! Get your points.

Task 3: Set Your Area Metro and Use the Panic Button

1. Stay in Home Page
2. Imagine you are in emergency scenario, proceed to the Profile Page 
3. Click "Setting"
4. Find "Panic Button", and click it
5. Click the Panic Button
6. Click "Sure"
7. Successfully reported to station.

User Feedback |

Document files and interview recordings included in the Google Drive Folder.

Google Drive Link: 

https://drive.google.com/drive/folders/1kQGs_XwmzwTwbt-46NIzGSzm4yM7g7ad?usp=sharing

Feedback Document:

---

REFLECTION

Although I am still progressing very slowly (procrastination..), I actually like the process of doing this project relatively much. This is my first class to use Figma. After using Adobe software, I think Figma is really an invention that benefits mankind (especially designers). Because I was very troubled by using Adobe to make a web page in another class. I almost needed to watch the tutorial video for every step. In short, thank you for the invention of Figma, which allowed me to pass this class smoothly.

This is my first time to come into contact with a course related to app design. Thank you Mr. Zeon. Although his class is always the longest and most energy-demanding, I really learned a lot. Thank you Mr. Zeon for your serious class and guidance! I am very lucky to meet such a caring and good teacher after the design principle in the last semester. Although I consulted with the teacher relatively few times in this project, the teacher always gave very complete and careful feedback, which helped me a lot.

I spent a lot of time on the design of this project. Although the performance was not very good, I learned a lot of useful skills and completed my first app design homework. I look forward to the application class in the next semester!

---