Application Design I | Task 3: Low-fi Prototype

 FEILYCIA JOY KURNIAWAN / 0373400 

Application Design I / Bachelor of Design (Honors) in Creative Media 

Task 3: Low-fidelity Prototype


    LECTURE

    WEEK 9 - Wireframes

    WEEK 10 - Lo-fi prototypes

    WEEK 11 - Usability testing

    Usability testing: 
    • To evaluate a product / service
    • To detect usability issues, gather qualitative data, and assess overall user satisfaction
    • users are assigned to a specific action and we observe and take notes 
    Steps:
    • prepare the low-fidelity prototype
    • make a few objectives for the participants to do
    • plan out how you want to conduct the testing
    • recruit 3 participants and assign them with their task 
    • gather feedback
    • from the feedback, see what you can improve on
    WEEK 12 - Heuristics for UI Design

    Usability heuristics - general principles or rule of thumb that designers use to help and improve user-friendliness and usability

    Jakob Nielsen' 10 Usability Heuristics:

    1. Visibility of system status 
            (confirmation & error messages)
    2. Match between system & real world
            (navigation bar icons)
    3. User control and freedom
            (flexibility to undo or redo actions)
    4. Consistency and standards
    5. Error prevention 
            (confirmation prompts)
    6. Recognition rather than recall
            (history and favorites) 
    7. Flexibility and efficiency of use
            (shortcuts)
    8. Aesthetic and minimalist design 
            (consistent typography & colors)
    9. Help users with errors
            (clear error messages)
    10. Help and documentation 
            (contextual help and online support)


    INSTRUCTION


    <iframe src="https://drive.google.com/file/d/1H4RAKyXEGGU7Y4Mojo_v6dA3xUIJrNgS/preview" width="640" height="480" allow="autoplay"></iframe>



    PROCESS

    Sketches 


    Firstly, I roughly sketched my layouts. I did it really loose since I only focus on the placements and I didn't really want to put too much effort in it cause I thought most of this will be changed anyways. 

    Some of the inspiration I took from Gojek's original layout since GoTour is integrated in Gojek. Additional references is from traveloka and trip.com's layout.

    Wireframes

    I went through all of my sketches and pick the ones I like best among the others and develop it into my wireframes to have a more detailed layout to imagine the prototype better. I also added more screens to create more flow for my app. 



    Low-fidelity Prototype 


    I first created all of my main pages first, I added 6 pages
    - homepage
    - plans & bookings
    - explore page
    - blog
    - my trip 
    - profile

    After creating the main pages I created extra screens for my flow and I created 3 flows


    After finishing the flows and added interactions and screen jumps, I continued with my usability testing 

    Usability testing




    TASK 3 Usability Testing 






    Usability Testing 3: https://youtu.be/_84nLgyAn94

    FEEDBACK 

    WEEK 11

    General Feedback - Continue and start on wireframes and making the prototype

    WEEK 12

    Specific Feedback - Working in progress, finished prototype and filming the usability testing 


    REFLECTIONS 

    Although I already have a little bit experience in Figma, I forgot most of the tools and had to re learn it through youtube tutorials. I didn't really struggle during this task and kinda enjoyed making the prototype as it is relatively easy and even though it took some time to make it is kinda fun to connect all of the pages and adding the interactions 


    At first I was a little bit intimidated when we are told to do usability testing but after doing it, it is so easy compared to the interviews we did for task 2. So I would say it is fun and easy to do the usability testing. When analyzing the video of the testing I can find minor issues that the participants themselves did not notice. 







    Comments

    Popular Posts