Application Design / Bachelor of Design (Hons) in Creative Media
Project 3 · Lo-Fi App Design Prototype
INSTRUCTION
Doc 1.1 MIB
Instruction |
Create Low-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.
Project 3 · Lo-Fi App Design Prototype
Reference |
I directly adopted the original Moovit logo as a mascot in the app, and used the bright brand color orange for the overall design:
Fig 1.1 Moovit Logo
Fig 1.2 Moovit Color Scheme
Fig 1.3 Visual Reference
Fig 1.4 Visual Reference
Wireframe |
I chose to use figma to make it. First, I started with the home page (i.e. the navigation search page). After having a general idea, I first did the navigation button as an opening exercise, and also to determine how many main interfaces my moovit app needs. In the first stage of the draft, my original three interfaces were "rewards page", which is the user's reward and punishment mechanism page. Users can get points after completing the journey, and can use the collected points to redeem store vouchers. In addition, users can also set themselves goals for exercise or reducing carbon emissions, and they can get extra points for completing the previously set goals; the other is "navigation page" is also the home page, which is the main interface of the entire moovit app. Users can search and arrange their route planning here. This main interface is inspired by the weakness of the original moovit function mentioned in the previous project. And I integrated the important functions here, so that users can clearly and intuitively see the good functions hidden in moovit. The last one is "profile page", which is mainly used to set app settings and obtain other services such as customer service, emergency calls, etc.
During the operation, since collecting points can be associated with personal profile, I integrated the "reward page" and "profile page" into the profile page to avoid confusion for users. I replaced the other main interface with the "notification page", where users can see traffic conditions or other route-related notifications to help users plan their routes.
After deciding on the three main interfaces, I first carried out menu navigation. Since I am a figma novice, I refer to the tutorials on youtube for learning and operation. The following are related teaching videos.
Vid 1.1 Figma Tutorial in Youtube
Fig 1.5 Processing on Menu Navigation
Fig 1.6 Final Menu Navigation
After completing the three menu pages, I started working on the main interface and the main flow: search—select route—route navigation.
Fig 1.7 Home Page
Fig 1.8 Main Flow - Planning and Route Navigation
After completing the general flow, I started to make some function buttons, such as the report function when the navigation is executed and the score window after the end. The score window can choose to jump to the rewards page, so I continued to make the profile page, including my goals for setting goals to get extra points; my badges for recording achievements and badges that have been obtained; my rewards for recording redeemed discounts; catalogue for viewing and redeeming unobtained coupons; and finally settings.
Fig 1.9 Overlay Windows of Earned Points and Report Section
Fig 1.10 Profile Pages Flow
Fig 1.11 Notification Page
The following are the function pages extending from the main interface: bus line tracker, mrt/lrt line tracker and offline map to ensure that wireless maps can be viewed when there is no network.
Fig 1.12 Information Pages
The following is the operation interface for setting home location and favorite locations, but because its page and function are similar to the program for arranging routes, in order to avoid confusion, I did not add them to the subsequent program.
I created 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
"As a first-time user, imagine you have just downloaded the app. Your task is to explore the landing pages and proceed to sign up. Start by navigating through the introductory screens that showcase the app’s features and benefits. Once you reach the main page, locate the “Sign Up” button. Click it to open the registration form. Enter your details such as email, username, and password, and complete the Sign Up. Once successfully signed up, you’ll be redirected to the homepage where you can begin exploring the app’s functionalities."
Task 2: Report a Delayed Bus and Earn Points
"Imagine you are using the app to report a delayed bus. Begin by accessing the navigation feature to select your current route. Follow the prompts to navigate to the “Report Issue” section. From there, choose the option to report a delay. Once submitted, you will receive a notification confirming your report and awarding you points for contributing valuable feedback. The task allows users to interact with the reporting system while understanding how they are rewarded for their engagement."
Task 3: Set Your Area Metro and Use the Panic Button
In this scenario, picture yourself in an emergency situation. Start by setting your metro area in the app. Navigate to the settings section to select your preferred metro area, ensuring it matches your location. Once set, imagine you’re in a distressing situation and need immediate assistance. Locate and click the “Panic Button” in the settings. This feature activates an alert, sending your current location to emergency contacts or authorities. The task is designed to evaluate the usability and accessibility of the app’s emergency feature, ensuring it’s intuitive and easy to activate under pressure.
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!
21 April 2025 - / Week 1 - Week 7 YANG ZHI CHING / 0365154 Application Design II / Bachelor of Design (Hons) in Creative Media Task 2 · Interaction Design Planning & Prototyping INSTRUCTION Doc 1.1 MIB Requirements: 1. Interaction Design Documents: Creating detailed flowcharts and wireframes to map out user journeys, creen layouts, and navigation paths. 2. Animation Prototyping Micro Animations: Small effects like button clicks, loading icons, and feedback states, prototyped in Figma. Macro Animations: Larger UI transitions or intro animations. I can use After Effects or reference similar examples if needed. 3. Explanation & Prese...
21 March 2025 - 3 June 2025 / Week 6 - Week 11 YANG ZHI CHING / 0365154 Experiential Design / Bachelor of Design (Hons) in Creative Media Experiential Design · Task 3 | Instruction Doc 1.1 MIB | Visual Design Prototype Concept and Theme | Together with my teammate Tze Wei, we decided on a theme centered around a "technological future" . To match this concept, we chose a light green color scheme and a minimalist visual style. The color light green symbolizes innovation, freshness, and comfort—qualities that align with our futuristic and user-friendly AR application. Fig 1.1 Reference Moodboard Design Guide | ...
3 Feb 2025 - 10 Feb 2025 / Week 1 - Week 2 YANG ZHI CHING / 0365154 Infoemation Design / Bachelor of Design (Hons) in Creative Media Exercises · Quantifiable Information INSTRUCTION Doc 1.1 MIB Instruction | Gather a set of objects and separate it into category such as color, shape, pattern, and other quantifiable factor. Example: 1. Box of Lego 2. Jar of button 3. Jar of marble ball 4. Set of colourful rubber strap In this exercise you're required to quantify our chosen objects and arrange them into a presentable layout or chart . The information must be presented as is, and you need to arrange the objects with relevant indicators written out with pens to help you to visualize the quantity and data. The examples of objects that can be use are buttons, coins, lego pieces, M&Ms, and more. Submis...
Comments
Post a Comment