.jpg)
LIEW XIAO HUI / 0353121
BACHELOR OF DESIGN (HONOURS) IN CREATIVE MEDIA / ADVANCED TYPOGRAPHY
Project 03: Lo-Fi App Design Prototype
JUMPLINK
Instructions
Project 03: Lo-Fi App Design Prototype
Feedback
Reflections
Project 03: Lo-Fi App Design Prototype
For Project 03, we were tasked with creating a low-fidelity prototype of the application. Based on data gathered through surveys, interviews, and card sorting exercises, we aimed to design a solution that addresses the feedback and suggestions from this data. After developing the low-fidelity prototype, we conducted usability testing to gather feedback from users and refined the prototype to address any issues they encountered.
Progress
Due to the extension of the Project 2
deadline, we will commence Project 03 in week 11. Based on data
collected from user surveys, interviews, and card sorting, I am
beginning to create a low-fidelity prototype. This prototype aims
to redesign the MyUMobile app to be more user-friendly and
efficient, addressing current issues and incorporating new
features for improvement.
First, I created the UI kits for the app design, including typography and colors. I set all these elements before starting the prototype design to ensure consistency throughout the app. I chose Comic Sans, as the current font used in the MyUMobile app is not as formal as Times New Roman, and I wanted to maintain the same feel and concept for the app. For the color scheme, I decided on orange to align with the brand logo color, which is also the brand color.
Then, I began creating the layout design for the app. Due to time constraints, I was only able to complete the main page by Week 12.
|
| Figure 1.3 Progress screenshot. |
I sent the completed prototype to Mr. Zeon, who provided valuable feedback on how to improve the design.
|
| Figure 1.4 Feedback. |
Based on his suggestions, I refined the design and continued working on the app.
|
| Figure 1.5 Refinement. |
In Week 13, I showed Mr. Zeon all the completed pages.
|
| Figure 1.6 Completed pages. |
However, he mentioned that it was not necessary to complete every page for the entire app. I only needed to create the relevant pages for three chosen scenarios. I then considered the scenarios I wanted users to try.
I decided on the following:
1. Scenario 1: Making a top-up
and downloading the invoice, which is one of the main features of
the MyUMobile app.
2. Scenario 2: A new feature that allows
linking a new line to an account and switching between accounts
without logging in and out.
3. Scenario 3: Using the new AI
Chatbot to efficiently solve problems and get answers, which is
more user-friendly than navigating the Q&A page.
These three scenarios effectively showcase the MVP of the app and highlight the most important functions for most users.
After completing the scenario creation, I arranged all the pages that would be used for each scenario and added any missing pages to ensure the scenarios were complete.
|
| Figure 2.1 Progress screenshot. |
After completing the creation of all the pages, I linked them according to the scenarios I had set.
|
| Figure 2.2 Progress screenshot. |
I organized them into three different flows, detailing each step for each scenario to provide clarity for users during testing. This ensured that users would have a clear understanding of what they needed to do.
Low-Fidelity Prototype
Link to Prototype
Link to Figma File
I prepared a few questions for the users who participated in the usability test to better understand their experience with the redesigned application and identify areas for improvement.
Figure 2.7 Usability testing - questions.
Then, I asked three users to help me with usability testing to gather their thoughts from a user perspective. The overall feedback on the new MyUMobile app was positive, with only a few minor issues that I hadn't noticed.
Usability Testing
Figure 2.9 Usability testing - user 02.
Figure 2.10 Usability testing - user 03.
Figure 2.11 Usability testing - feedback.
I refined these issues based on their comments. For example, I added an arrow to the first section of the home page to indicate that it is clickable, reduced the size of the profile picture in the top section to avoid confusion, changed the wording from "new balance" to "current balance" on the payment success page for greater clarity and etc.
Refined Low-Fidelity Prototype
Link to Prototype
Link to Figma File
Week 12
The wireframe should encompass not only the essential pages but also connect all actions to form a complete prototype. If any step is missing before the user completes an action, the functionality may be compromised. Additionally, the UI kits are missing iconography. The icons in the navigation bar should be placed within the bar, as they currently appear to be floating. Ensure that the text is properly aligned.
Week 13
The layout design is good, but it could be
enhanced by adding some illustrations to make it more engaging,
as it is currently too text-based. Great effort in completing
all the pages for the entire app.
Week 08
However, the illustrations appear
inconsistent and may need to be revised. Additionally, the color
of the boxes is not very distinct, making them hard to see.
Consider trying a different color selection for better
visibility (high fidelity).
REFLECTIONS
Experience
Working on the redesign of the MyUMobile
app has been an enriching and challenging experience. Designing UI kits and ensuring consistency across
typography and color schemes required careful attention to detail.
Collaborating with users for testing and incorporating their
feedback into the design further enhanced the app's usability and
user experience.
Observation
I found that ensuring that all actions are linked
and no steps are missing is crucial for creating a functional
prototype. Additionally, the need for consistent iconography and
proper text alignment was highlighted during the design process. User feedback is crucial, designing solely based on personal aesthetics is not enough. Incorporating illustrations can enhance the app's visual appeal and make it more engaging.
Findings
The user testing phase provides essential insights that influenced the final design. Since designers create products for users, obtaining feedback from the target audience before the launch or final version is crucial. Users can identify minor issues and provide valuable input, ensuring the app meets their needs and functions more effectively.
Comments
Post a Comment