Labels

APPLICATION DESIGN TASK 3

Week 5-Week 9 (15/10/2025-21/11/2025)

Jennifer Michelle Hiendrawan/0374682

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

Task 3

TABLE OF CONTENT
1.Lectures
2.Instructions
3.Task
4.Feedback

LECTURES

Week 12 
Usability: 
1.Visibility of system status 
-Consistency inform users about current status and appropriate feedback
-User understand the system’s status and current state 
-Confirmation error massage 
-Navigation cues, progress bar 
2.Match between system & real world 
-Designing interfaces that align with user’s real world experiences and expectations 
3.User control and freedom -allow users to go back a step 
-meet user’s expectations when using a back link 
-allow users to easily cancel an action -support undo -allow them to cancel 
4.Consistency and standards 
-Using consistent colors, typography, icons, and layout across the interface 
-clicking on a button should consistently perform the same action across different screens -providing consisten feedback, for example, clicking on a  button should consistently perform the same action across different screens 
5.Error prevention 
-Confimation to delete something important 
6.Recognition rather than call 
-Remember your search and history 
7.Flexibility and efficiency of use 
-Allow user to personalize their interface settings -providing power users with shortcuts 
8.Aesthetic and minimalist design
 -simplicity 
-visual hierarchy 
-give whitespace 
-consistent typography and colors 
9.Helps user recognize, diagnose, and recover from errors 
-Please enter the email address (for example) Discard, save, or cancel (if you go back now you will lose what you are doing) User interfaces Balance 
-Choices must have same size, same spacing, etc Contrast 
-One is stronger than the other -one is better than the other Emphasis 
-Priority to one of it Unity -together and look similar Proximity 
-makes the group and make 1 different 

INSTRUCTIONS


TASK

Sketches
Mr.Sylvain told us to make a sketch for the homepage for the first time. This is my first sketch for the homepage.



After making the first sketch, I did the crazy 8s sketches on class and here are the results



References

After making the sketches, i found the references for my application. here are the references that i found. 





Wireframes
After sketching and finding some references, i made a wireframe for my application, using the homepage design that i think is the most interesting based on the sketching process




Lo-fi prototype

After creating the wireframe, i created the lo-fi prototype.
Here is the process:
1.I created the home page and navigation 
2.I created the "buy passes" page
3.I I created the reward page 
4.I created the profile page 


FIRST FLOW
  • The first app flow starts with a reminder when the user’s data is running low. 
  • The user will automatically receive a notification to top up their data. If the user already knows they want to top up, they can press the “Top Up” button.
  • This button leads to the “Buy Passes” page, where users can choose to top up their balance first, or directly top up their data.
  • If the user wants to top up but feels confused, they can press “Ask for Help.” This will take them to the AI Assistant page. 
  • The AI Assistant provides several preset categories of common questions, and text input option for users to type their own questions if their issue isn’t listed.

SECOND FLOW

Home page
  • The user tops up by opening the app directly, and they will be taken straight to the home page.
  • On the home page, the user can tap “One Click Repurchase” when their data is about to run out within a few minutes and they don’t have time to browse or go through multiple steps. 
  • This feature will automatically redirect them to repurchase their previously selected package. 
  • The user can also use Emergency Data Mode to instantly activate 1 GB of data, which will be charged on their next bill. 
  • This allows them to stay connected and purchase a new data package even without internet, especially in situations where their data has already fully run out (since many users only top up once their data is completely depleted).
  • On the home page, there are also promotions and discounts, as well as flash sales with clear terms and conditions, also with clear categories so it won’t confused user and help users who rely on having many promotions and discounts.


Buy passes page 


  • When the user chooses to top up internet, they will directed to a page showing all available internet package options. 
  • The page includes an internet category section to help users easily find the type of data they need. 
  • After selecting an internet package, the user is taken to a package confirmation page. 
  • On this page, the user confirms the package details, and whether they need a voucher or not. If the user needs a voucher, they are directed to the Membership Points page. 
  • On the Membership Points page, the user can claim their points first (optional), and exchange points for discount vouchers, quota extension vouchers, etc. 
  • The user then sees a pre-confirmation order summary to double-check their order. If everything is correct, the top-up process is completed.


  • When the user selects Top Up Balance, they will see a variety of available top-up methods.
  •  After entering the required information/number based on the chosen method, a pre-confirmation order summary will be shown to prevent purchase errors. 
  • The user will then be asked whether the balance has been credited or not. 
  • If the balance has been credited, the user will be directed to the confetti (success) screen. 
  • If the balance has not been credited, the user will be directed to the AI assistant with an automated message to help resolve the issue.

Rewards page 

  • The user can collect all rewards, vouchers, and points on this page. 
  • They can claim and share quota with others, claim membership points and exchange the points, as well as claim the “most frequent application” reward.


Profile page
  • In the Profile section, which works like “Settings,” users can provide their feedback here. 
  • They can also check their usage analytics so they understand their habits and avoid choosing the wrong data plan.



User testing 



What to do next based on the user testing
Needs to be changed
  • Notifications need to be made more visible (right now the border is too thick, maybe can reduce it and make the symbol larger). 
  • Some texts are too small, causing users not to realize they have already seen the text and buttons for several times. 
  • Several buttons are too small to tap comfortably. 
  • Some important features that are meant to be tappable are still not included in the navigation menu and ai assistant (such as noticiation, feedback), because users usually rely on it. 
  • Some text lacks sufficient contrast, so when users enter certain sections, they become confused about what to do (even though instructions are provided, they are too small). 
  • Ensure consistent spacing and padding to reduce accidental taps on nearby elements.

Needs to be mantained
  • Top up data & balance process that is already clear
  • AI assistant symbol that is already clear

FINAL OUTCOME FOR TASK 3



FEEDBACK 

Week 12-Mr.Sylvain said that the text is too small so teh user cannot read, alsothe button is too small. Moreover, some button need to be differentiate, such as the "back" button must have the different colors with the "next" button. From the reminder, Mr.Sylvain recommended me to add the "top up" button and the "ask for helo" button to go for the AI assistant. Mr.Sylvain said that the tasks for the user testing is already good.






Labels:

Comments

Post a Comment

Popular Posts