Labels

Application Design /Final Project: High Fidelity App Design Prototype

Start from 20.7.2024

17.7.2024 -29.7.2024 /Week 13- Week 15
Kong Cai Yi / 0363862 
Application Design 1 / Bachelor of Design (Hons) in Creative Media 
Final Project/ High Fidelity App Design Prototype
INSTRUCTIONS


Final Project/  High Fidelity App Design Prototype

Instructions:

In this final project, we are assigned to create a high-fidelity prototype for our mobile application. This prototype should showcase the final visual design, interactions, and functionality of the application. The high-fidelity prototype will serve as a realistic representation of our application, enabling users to experience and provide feedback on the final design. It should demonstrate a polished and refined user interface that aligns with the branding and usability principles established throughout the design process.

Requirements For This Task:

1. Visual Design:
Implement the finalized visual design concept you created in the previous tasks. This includes color schemes, typography, icons, and any other visual elements that contribute to the overall look and feel of the application. Pay attention to details and ensure consistency across all screens.

2. Interactions and Transitions:
Bring your application to life by incorporating interactive elements and seamless transitions between screens. Use appropriate animations and transitions to enhance the user experience and create a natural flow within the application.

3. Functionality and Navigation:
Implement the core functionality and navigation of your application. Ensure that all interactive elements are fully functional and behave as expected. This includes buttons, forms, menus, and any other interactive components specific to your application.

4. Content Integration:
Populate the prototype with realistic content to demonstrate how the application will look and feel with actual data. Use representative content and consider different scenarios to showcase various features and interactions within the application.

5.Usability Testing:
Conduct usability testing on your high-fidelity prototype to validate the design and gather user feedback. Recruit participants who match your target audience and observe their interactions and feedback. Make note of any usability issues or areas for improvement. Minimum 5 participants for the testing.



    1. Colour Palette 

    Mr Zeon suggested us to use [Color Shades Finder] platform for ibetter color matching. I can enter a primary color, and it will provide multiple options of color tones and shades. It also allows me to personalize adjustments to the color's lightness, saturation and temperature. Since I decided to use a complementary color scheme for the app, based on the options provided on the website, I could then choose the suitable shades and tints for the app.

    Fig 1.1 Website link (22.07.2024- Week 14）

    Fig 1.2 Experiment with different colours (22.07.2024- Week 14）

    Fig 1.3 Test my chosen colour in Log in & Home page (22.07.2024- Week 14）

    Fig 1.4 Final Colour Palette for Easybook App (22.07.2024- Week 14）


    UI KIT For Final Project
     
    Fig 1.5 UI KIT (22.07.2024- Week 14）


    2. Design Progress

    When I inserted the offer photos, I realized the size was larger than the initial layout I created. So, I changed the layout of that section to make it more visually appealing and easier for users to read. Besides that, while designing the color of the homepage, I remade the prototype to enable both horizontal and vertical movement.

    Fig 2.1 Modify offers's layout (22.07.2024- Week 14）

    Fig 2.2 Home Page Prototype  (22.07.2024- Week 14）

    Fig 2.3 Home Page Prototype (22.07.2024- Week 14）

    For the onboarding page, I found some related pictures from Pinterest that have a similar color scheme and illustration drawing style to make my page look more consistent.

    Fig 2.3 On boarding Page Design  (25.07.2024- Week 14）


    I replaced all the photo icons with actual Visa and MasterCard icons to make the design more realistic. Initially, I included all the bank company icons beside their names, but the layout became too cluttered and messy for users. So, I removed the bank icons but kept the important ones, like wallets and debit/credit card icons.

    Fig 2.4 Logo added for payment method  (25.07.2024- Week 14）

    Since there is a voucher code for user to copy paste to payment page or refer back. I make it to yellow colour, let user easily to find and know there is a code for voucher

    Fig 2.5 Changed black to purple gradient for voucher (25.07.2024- Week 14）

    While changing the colors for every page, I initially planned to use just two main colors. However, considering that some icons need to provide a stronger visual impact, I changed the tick icon to green. This way, users can immediately recognize that their payment was successful, enhancing their satisfaction.
    Fig 2.6  Changed green colour tick icon (25.07.2024-Week 14）


    Fig 2.7  Designed all the "profile" features  (25.07.2024-Week 14）

    Fig 2.8 Overall design of the app (25.07.2024- Week 14）


    3. Usability Testing

    Moving to the next phase, which is usability testing, similar to the previous task, I have already created three scenarios/tasks with detailed descriptions that require users to perform specific actions within the application.

    Fig 3.1 Usability testing (28.07.2024- Week 14）

    User Feedback & Improvements
    For the usability testing, I recruited 3 participants who match the target audience of the Easybook application. I conducted the usability test through face to face, where I shared my screen of the prototype in Figma and gave participants control of the screen themselves. 

  • Navigation Bar Color Variants: To enhance the visual appeal and user experience, consider using a range of complementary colors for the navigation bar. 

  • Seats Page Navigation: Modify the back icon behavior on the seats page. When users click on the ratings and reviews feature, the back icon should take them back to the seat selection page rather than the bus booking page. 

  • Prototype Application: Instead of applying the prototype styling to the font alone, apply it to the entire box element. This approach will create a more consistent and cohesive design. 


    • Amendments after receiving feedback from users:
    Before:
    Fig 4.1 Navigation bar color variants- Before (01.08.2024- Week 15）

    After:
    Fig 4.2 Navigation bar color variants- After  (01.08.2024- Week 15）

    Fig 4.3 Prototype placed  (01.08.2024- Week 15）


    Final Outcome
    Final Project: High Fidelity App Design Prototype
    Demonstrating Video:
    Low-fi Prototype 

    High-fi Prototype:
    Fig 5.0 High Fidelity App Design Demonstration video  (04.08.2024- Week 15）
      Fig 5.1 High Fidelity App Design Design (04.08.2024- Week 15）
      Fig 5.2 High Fidelity App Design Prototype  (04.08.2024- Week 15）

      REFLECTIONS

      Finally, I have reached the final stage! Thanks to the foundation of the low-fidelity prototype, the process of creating the high-fidelity version was much easier. Along the way, I also thought of many improvements, such as allowing users to scroll all the way down instead of being blocked by the navigation bar.

      Initially, choosing the colors was a bit challenging because I couldn't find a shade of yellow that matched the original purple. It wasn't until I adjusted the purple to a deeper shade that it met my aesthetic standards and the exceptation of this app. I originally planned to use only purple, but since the app's primary colors were both purple and yellow, I decided to stick with that combination. After consulting with Mr Zeon and getting their approval on the colour pairing, I started applying the colours.

      With the addition of colors, I realized I could better highlight key elements like the pay, check-in, and proceed buttons by using a contrasting yellow. This makes it easier for users to navigate the app. I learned that not only the size of the buttons, font size, and layout are important, but the choice of colors is also crucial for the overall app design.

      Lastly, this module has been an incredible experience for me. It's amazing that I was able to create an app from scratch. I'm very satisfied and happy, having progressed step-by-step from the proposal stage to data analysis and finally to design. Every step was aimed at achieving the final result, giving me an indescribable sense of satisfaction. I am extremely grateful to my lecturer- Mr Zeon for your patience, constant updates on our progress, and valuable suggestions.

      Labels:

      Comments

      Post a Comment

      Popular Posts