Application Design I / Final Project

on

 



24.10.2022 - 28.11.2022 (Week 9 - Week 14)
Audrey Gracia Djohari / 0348120
Application Design I
Bachelor of Design (Hons) in Creative Media / Taylor’s University
Final Project


FINAL PROJECT


Instruction

Students will synthesize the knowledge gained in tasks 1, 2 and 3 for application in task 4. Students will create integrated visual assets and refine the prototype into a complete working and functional product experience.

Submit your final link of your Figma/XD and your blog link

Design Process

I colored the interface in Adobe Xd, but I used Adobe Illustrator for the illustrations for the onboarding page, loading page, etc. In total, there are 51 pages in the final design. I used the same color palette I created in Project 2 (UI Document).

Fig 1.0: Design Process in Ai & Xd


Pages

1) On-Boarding Pages
Fig 2.0: On-Boarding Pages
2) Home Pages
Fig 2.1: Home Page

3) Account Pages

Fig 2.2: Account Page

4) Flight Booking Pages

Fig 2.3: Flight Booking Page

5) Select Seat & Select Date Pages

Fig 2.4: Select Seat & Select Date Page

6) My Bookings Pages

Fig 2.5: My Bookings Page

7) Payment & E-Ticket Pages

Fig 2.6: Payment & E-Ticket

8) Refund & Reschedule Pages

Fig 2.7: Refund & Reschedule Page

9) Contact Us, Pay Later, Promotions Pages

Fig 2.8: Contact Us, Pay Later, Promotion Pages

10) Pop Up Bubbles

Fig 2.9: Pop Up Bubbles
Flow

I fixed some of the flow so it's a bit different from the Low-Fi. I encountered some errors when I retest the flow, I wasn't sure what actually happened but somehow all the buttons in Home Page was directed to the Flight Booking Page. So I had to unplug the strings and plug it to the right ones once more. Also I made some changes on the payment & Fill In Details pages, I added some Pop Up Bubbles that asks user before they go back to the previous pages. I used Overlay Feature in Xd.

Fig 3.0: Overall Flow

User Testing

Video Recording & Document Link:

 
Fig 4.0: User Testing Document


Walkthrough Video
Fig 5.0: Walkthrough Video

Final Outcome

Adobe Xd Link: https://xd.adobe.com/view/13a74199-db72-46ca-a0d9-cc71cf23d7d6-46f4/




FEEDBACK

WEEK 14:

Specific Feedback
  • Add a badge that tells the customer they have purchased a ticket in the Home Screen
  • Do user testing with different users
  • Add a home button so the user can go back easily
  • Add a question button before they go back to the main page


REFLECTION

Experience
The process of making the High Fidelity Prototype was quite easy and uncomplicated. Because All I needed to do was color the low-fi and keep testing on it to improve the feel & the look of the app. Mr. Shamsul also gave me very helpful feedback.

Observation
During the feedback session, Mr. Shamsul reminded me to add some badges and Home Button on more pages so users can go back quickly. I observed that by adding these features, the users are more comfortable when using the app during the testing. Other than that, by adding the Pop-up bubble that asks the user before they go back, the user is more sure of where they want to go.
  
Findings
I found that Adobe Xd is a fun interface, and I enjoyed it very much. I also enjoyed coloring and arranging the flow. I think this might be my favorite module throughout this Semester 3. 



Comments

Post a Comment