Application Design I / Final Project: Completed Mobile Application Design (Hight Fidelity Prototype)
2.6.2023 - 7.7.2023 (Week 9 - Week 14)
Takuto Hozumi / 0354047 / Bachelor Of Design (Hons) In Creative Media
Application Design I
Final Project: Completed Mobile Application Design
(Hight Fidelity Prototype)
Final Task - Hight Fidelity Prototype
Instructions
In this task, you will create a high-fidelity prototype for your
mobile application. This prototype should showcase the final visual
design, interactions, and functionality of your application.
The high-fidelity prototype will serve as a realistic representation
of your application, allowing your 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
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.
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.
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.
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.
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.
E-Portfolio: Update your e-portfolio with detailed documentation to
showcase your high-fidelity prototype and share the results of your
usability testing. Explain your design process, highlight key features,
and discuss any design decisions or iterations based on user feedback.
Designing Process
As instructed in the requirements, the following 4 conditions were kept in
mind during the design process.
- Visual Design
- Interactions and Transitions
- Functionality and Navigation
- Content Integration
Fig.1: Design Regulation (from Project 3)
Fig.2: Visual Design Concept = Top Page (from Project 3)
Based on the functionality, structure, and design direction determined in
Project 3, I proceeded with the final version of the design. It continued to
create in Figma and implement the final prototype, which will include
detailed transition and component animation.
Fig.3: App Design and Components
I started my design from the start screen. In the process, I first
determined the keyboard interaction based on the design of Android OS, and
the bottom navigation design which take you to the 4 main pages.
Fig.4: 4 Main Pages (Top, Plan, Payment, Tools)
Unlike the low-fidelity phase, Final Project requires specific information
to be entered. Specifically, plan details and promotions are cited from the
actual service.
Fig.5: Screen Transition Diagram
I have created links between each page as shown in the Project 3 prototype
and added pages.
The basic design is based on left-to-right, top-to-bottom web design
principles. Therefore, the animation appeared from the right when opening
the middle item page and back to the left when returning.
The exception is the keyboard, which appears from the bottom up, as per the
basic design of the OS. This is not a function of the application.
The modal window design used in Payment Completed and other applications is
displayed in a way that naturally overlaps the screen using dissolves.
Final App Design (10/7/2023)
The following figures show the full of page designed as the Final Project.
1. Start Page / Register Page
Fig.6: Start
Fig.7: Log in Verification Code
Fig.8: Registration (Setting new SIM)
Fig.9: Register Verification Code
Fig.10: Main Page
.jpg)
Fig.11: Plans
Fig.12: Payment
Fig.13: Tools
Fig.15: Purchase Plan
Fig.16: Top-up
Fig.17: Payment Completion
4. Features under Tools
.jpg)
Fig.18: Profile
Fig.19: General Settings
Fig.20: Inquiry, Contact Form
Fig.21: Inquiry Completion
Fig.22: Privacy Policy
5. Management of Payment Method
Fig.23: Payment Method
Fig.24: Credit Card / Debit Card
Fig.25: Add New Card
Fig.26: Add New Card Completion
As described above, a prototype operation video was recorded to reflect the
design.
Fig.27: Prototype Operation Video with Final App Design (14/7/2023)
Final Usability Testing
The Final Project requires user testing with 5 participants. As in
Project 3, participants were asked to manipulate my design directly on the
Figma prototype. The following 4 scenarios were prepared, and the usability
and accessibility of each was checked.
Scenarios:
- Log in to the app and renew your plan
- Purchase a new plan
- Send an inquiry message
- Top up your e-wallet
All recordings of the usability test started after a preliminary explanation
of the purpose of this usability test, and its operation way.
As per the target analysis of this app in Project 1, I invited young
Malaysians or foreigners.
Fig.28: Recorded Usability Testing
Analysis & Conclusion of Usability Testing
Participant 1 (Japanese / Male / Age:27)
He completed the all tasks in about 1 min 10 sec. No usability issues were
found.
Participant 2 (Japanese / Female / Age:21)
Actually, she forgot to renew a plan, in Scenario 1: Log in to the app and
renew your plan. But it was a careless mistake on her part, no usability
issues were found as well.
Participant 3 (Malaysian / Female / Age:24)
In all of her operations for all scenarios, she appears to first look for
the desired function from the bottom navigation. However, when looking for
the inquiry form in scenario 3, she seemed momentarily lost as to
where it was located. There might be some improvements regarding the name
"tool" and the categorization of functions.
Participant 4 (Indonesian / Female / Age:19)
She was trying to tap the text on the main page in scenario 1 where the
plan is listed. In response, I improved it to be clickable.
Participant 5 (Malaysian / Male / Age:21)
Similar to the 1st participant, he completed the all tasks in about 50 sec.
No usability issues were found.
FINAL OUTCOME
REFLECTIONS
Experiences
In this project, we students continued from projects 1 through 3 to complete the front-end design of the whole app. This was the first full-scale design work using Figma, and the component settings and transitions allowed us to proceed with the design while envisioning the finished product in a very concrete manner.
Observation
After conducting research and analyzing it, we proceeded with the design, but one question arose during the final usability testing phase. It was with regard to categorization, about the decision to include Inquiry in Tools. Since 4 respondents of the 5 were able to reach the relevant function without getting lost, and since the categorization was indicated by the research results, I just decided to maintain the same setup for this survey in Final Outcome. From that experience, I found it very difficult to design a UI that would accommodate various people's behaviors.
Findings
This module was a series of Projects 1~3 and Final Project, all of which were very significant projects that lead to the UX design of the app design. I think that there are 3 most important factors: 1) identifying the functions that users are looking for, 2) placing the functions in an appropriate form within the application, and 3) visual design that does not make the user feel uncomfortable with the operation. This project made me realize that I need to learn a little more, especially with regard to visual design. For example, I am not very satisfied with the font for the numbers and feel there is still room for improvement. For now, I plan to closely observe the design of the app to learn the appropriate UI design as well as the website.
Comments
Post a Comment