Application Design I / Project 3: Lo-Fi App Design Prototype

on

03.10.2022 - 24.10.2022 (Week 6 - Week 10)
Audrey Gracia Djohari / 0348120
Application Design I
Bachelor of Design (Hons) in Creative Media / Taylor’s University
Project 3: Lo-Fi App Design Prototype


PROJECT 3: LO-FI APP DESIGN PROTOTYPE


Instruction

Once the UX design process is completed, students can now create a low fidelity prototype of the app. Students needs to arrange all the screen wireframes, actions, visual feedback and link them up in Adobe XD/ Framer/ Invision Studio or any other prototype software’s. Students are then required to perform usability testing whereby they will invite guests to test out their low fidelity prototype and gather all the information, response, feedback, pain points observed from the test. Students need to document this process with video and produce a document containing detail analysis of this task and the solutions to the problems faced by the testers. 

Lo-Fi Design Process

I designed the illustration in Adobe Ai. I also screenshot the iPhone sharing pop-up.

Fig 1.0: Illustration, Adobe Illustrator

This is the entire canvas of the design, there are 42 of them.

Fig 1.1: All designed pages, Adobe Xd

Fig 1.2: Overall Flow Prototype, Adobe Xd

User Testing Feedbacks


I did a user testing to 3 people that is similar to my User Persona. There are  Aiden, Michelle and Melissa. And in this document, I wrote what they had to say about the low-fi prototype. For Aiden, I did the user tetsting on Macbook, while for Michelle & Melissa, they did it on iPhone using the Xd Mobile App.

I screen-recorded the process, the videos are in the Link above.

Fig 2.0: User Testing Form
Attempts

In total, I did 3-4 attempts until the finalized one. I did revision according to the feedbacks from user testing.

#1 Revision
  • The hover effect is deleted because it’s only applicable on laptop/PC. 
#2 Revision
  • I made the “Select Seat” info's position fixed. 
  • The headline position is adjusted so it’s not covered by the camera notch.
  • Flow fixed.
#3 Revision
  • “Back” buttons are bigger
  • “Refund” button is added
Fig 3.0: Lo-Fi First Attempt

Walkthrough Video
Fig 4.0: Walkthrough



Lo-Fi Final Outcome

Link: https://xd.adobe.com/view/eb790028-f309-4acb-9cc4-60acf12a6659-be2a/

Fig 5.0: Lo-Fi Finalized & Revised


FEEDBACK

WEEK 11:

Specific Feedback
  • Low-fi is not complete. Will complete by this week and test it out.
  • Don't use black in the lo-fi, just use dark gray.
  • After finishing the design, proceed to create the prototype in Xd for the user to test it.
  • Add micro animation in the prototype.

REFLECTION

Experience
Building a low-fidelity prototype was quite therapeutic for me. Surely it looks quite confusing but I enjoyed the process. I also started loving Adobe Xd, it took me so fast to master the app.

Observation
I observed that going through similar apps to find references is helpful in the design process and also the flow. I also observed that different users use the app with different gestures, this is a challenge for me as an app designer. I had to create something which can be understood by different users.
  
Findings
I learned about the steps and process of making an app. Turns out it's so important to make the Lo-Fi first and test it out to the users because this allows the designer to solve the errors and the problems before the high-fidelity design process. Because usually there are still so many errors in the prototype state.

Comments

Post a Comment