Application Design 1 - Project 3: Low-Fi App Design Prototype
⭐ 9/12/2024 - 30/12/2024 (Week 11 - Week 14)
🎀 Yan Zhi Xuan | 0369425
💜 Application Design 1 | Bachelor of Design (Hons) in Creative Media | Taylor's University
📚 Project 3: Low-Fi App Design Prototype
TABLE OF CONTENTS
Week 11: Wireframe, UI Kit & User Testing
In class, Mr. Zeon said Project 3 is about a Lo-Fi App Design
Prototype. Low-fidelity (lo-fi) app design is a simple, early-stage
representation of an app that helps teams test ideas and gather feedback.
A UI kit is a large compilation of reusable and easy-to-use UI components,
templates, styles, resources and other useful digital assets that can be
used to create user interface designs and websites.
We also learned about user testing. We need to create 3 scenarios for
user testing with participants and getting feedback from them. After
that, we need to analyse the feedback to get insights to make
improvements for the high-fidelity prototype.
Week 12: Design Essentials for User Interface (UI)
During this week, we dived into the basics of user interface (UI) design,
focusing on how to effectively use colour and typography to create
visually appealing and user-friendly designs. We learned how to select a
dominant colour, build a colour palette, and apply it using strategies
like monochromatic, analogous, complementary, or triadic schemes. The
60/30/10 rule was a handy guide to ensure colours are balanced and serve
their purpose in a design. We also explored the use of gradients to make
designs more dynamic and engaging. When it came to typography, we
discussed how to create a clear hierarchy using font size, weight, and
alignment. We talked about pairing fonts wisely, keeping it simple with
just 2-3 fonts to maintain a clean and cohesive look. Along the way, we
discovered useful tools like ColorZilla and WhatFont for practical help
and platforms like Mobbin and UI Store for inspiration. We also started
working with Figma and learned how to use it for wireframes and
prototypes. Tutorials on creating interactive components gave us a glimpse
into how small details can significantly enhance the user experience. This
week’s lessons gave us the foundational knowledge to create designs that
are not only functional but also visually engaging.
2. INSTRUCTIONS ⊹ ࣪ ˖₊˚⋆˙⟡
Fig. 2.1 Module Information Booklet - Application Design 1.
Tasks:
- UX design process completed, create a low fidelity prototype of the
app.
- Arrange all the screen wireframes, actions, visual feedback and link them
up in Adobe XD/ Figma/ Invision Studio or any other prototype
software’s.
- Perform usability testing, invite guests to test out the low fidelity
prototype and gather all the information, response, feedback, pain points
observed from the test.
*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.
3. PROJECT 3: LO-FI APP DESIGN PROTOTYPE ⊹ ࣪ ˖₊˚⋆˙⟡
Fig. 3.1 Project Timeline of Project 3.
Week 11 | Mood Board, Wireframe Sketch & Low
Fidelity Prototype
Durring this week, the visual design concept will be established
by creating a moodboard that captures the overall style, color
palette, typography, and imagery for the project. Using this
concept as a guide, a wireframe sketch will be developed to
outline the basic layout and structure of the app. Following
this, work will begin on creating a low-fidelity prototype to
translate the wireframe into an interactive format for initial
testing and feedback.
Colour Shades and Tints Finder: https://colors.artyclick.com/color-shades-finder?color=#70E6D2
Guardian App Colour Codes: Link to Color Shades and Tints Finder
Fig. 3.2 Guardian App Colour Codes. (Week 11)
Fig. 3.3 Visual References (Shopee).
To create both low-fidelity and high-fidelity prototypes, I relied
on Figma as my primary design tool. However, before I could
proceed with the prototyping phase, it was essential to first
prepare and construct a comprehensive user kit. This step was
crucial to ensure that I had a clear understanding of user needs
and preferences, which would guide the design process effectively.
Click
HERE
to view the User Kit on Figma.
The following are the objectives of constructing UI Kit:
Fig. 3.4 User Kit Objectives.
Fig. 3.5 Guardian App User Kit.
Fig. 3.6 Typography.
Fig. 3.8 Colour Scheme.
Fig. 3.9 Iconography.
Fig. 3.10 Layouts and
Grids.
Fig. 3.11 Layout
Essential.
Fig. 3.12 Guardian App Components #1.
Fig. 3.13 Guardian App Components #2.
Week 12 | Rough Low-Fidelity Prototype
To progress with the project, the next steps involve
developing a complete low-fidelity prototype to visually
outline the app's structure and functionality. This prototype
will serve as the foundation for usability testing, which will
be conducted with three participants to evaluate its user
experience and functionality. The entire testing process will
be recorded and filmed to capture user interactions and
feedback, providing valuable insights for further improvements
and refinements.
Mr. Zeon commented that a low-fidelity prototype
doesn’t need to include images or colors, as its
purpose is to highlight the app's structure and
functionality. In response, I clarified that I
added images to give a preliminary sense of how
the app might appear visually. My intention was
to provide a general idea of the final look and
feel, making it easier to envision the overall
design during this early stage of development.
Fig. 3.14 Guardian App Redesign - Low-Fidelity Prototype.
Work Progress of First Attempt
Fig. 3.15 First Attempt Low-Fidelity Prototype Work Progress #1.
Fig. 3.16 First Attempt Low-Fidelity Prototype Work Progress
#2.
Fig. 3.17 First Attempt Low-Fidelity Prototype Work Progress
#3.
Fig. 3.18 First Attempt Low-Fidelity Prototype Work Progress
#4.
Fig. 3.19 First Attempt Low-Fidelity Prototype Work Progress
#5.
Week 13 | Finalised Low-Fidelity Prototype & User Testing
To progress with the project, the next steps
involve developing a complete low-fidelity
prototype to visually outline the app's structure
and functionality.
Mr. Zeon also suggested that to secure an A for
this module, I should consider using Dribbble's
e-commerce app designs as a visual reference.
Based on his advice, I feel it’s important to
adopt a more creative approach with my prototype.
I plan to focus on making the visual design and
layout more engaging and appealing, ensuring it
not only functions well but also leaves a strong
impression.
Work Progress of Second Attempt
Fig. 3.20 First Attempt Low-Fidelity Prototype Work Progress #1.
Fig. 3.21 First Attempt Low-Fidelity Prototype Work Progress #2.
Fig. 3.22 First Attempt Low-Fidelity Prototype Work Progress #3.
Fig. 3.23 First Attempt Low-Fidelity Prototype Work Progress #4.
Fig. 3.24 First Attempt Low-Fidelity Prototype Work Progress #5.
Fig. 3.25 First Attempt Low-Fidelity Prototype Work Progress #6.
Fig. 3.26 First Attempt Low-Fidelity Prototype Work Progress #7.
Fig. 3.27 First Attempt Low-Fidelity Prototype Work Progress #8.
Fig. 3.28 First Attempt Low-Fidelity Prototype Work Progress #9.
Fig. 3.29 First Attempt Low-Fidelity Prototype Work Progress #10.
Usability Testing
This prototype will serve as the foundation
for usability testing, which will be
conducted with three participants to
evaluate its user experience and
functionality. The entire testing process
will be recorded and filmed.
Fig. 3.30 Low-Fidelity Prototype Usability
Testing.
There are 5 scenarios:
Scenario 1: Sign In/Sign Up
Imagine you’re opening the app for the
first time and need to sign in or create a
new account.
- The process begins with the app loading to the redesigned landing page, where you’ll see options to “Sign In” or “Sign Up.”
- If you already have an account, click on the “Sign In” button and enter your credentials (email and password). If you’ve forgotten your password, click on “Forgot Password” to reset it.
- If you’re a new user, select “Sign Up” to create an account. Fill in the required information, such as your name, email, and password, or use the “Sign Up with Social Media” option for a quicker process.
- After completing the sign-in or sign-up process, you’ll be redirected to the home page, where you can begin exploring the app.
- This streamlined process ensures accessibility and a smooth entry into the app for both new and returning users.
Scenario 2: Product Browsing
and Purchase.
Imagine you’re browsing for a
product and want to make a purchase.
- Start by logging into the app and navigating to the Home Page. Here, you’ll see a list of featured products and categories.
- Use the Search Bar or category filters to narrow down your options. Select a product to view more details, including price, specifications, and reviews.
- If the product supports the Virtual Try-On feature, tap on the “Try On” button to see how it looks.
- Once satisfied, click on the “Add to Cart” button. After adding all desired items, proceed to the Cart Page by clicking the cart icon.
- On the Checkout Page, review your order details and choose a payment method to complete the purchase. This intuitive process makes browsing and buying products seamless and enjoyable.
Scenario 3: Claim Voucher and
Purchase
Imagine you want to claim and use a
voucher for your purchase.
- Navigate to the Category Page and click on the “Limited Voucher” section. You’ll find a list of available vouchers here.
- Browse through the vouchers and click “Use Now” on the one that best suits your needs. The voucher will be added to your account.
- Proceed to browse products and add them to your cart. If you choose the minimum spend RM30 voucher, once you are going to spend RM30, it will shows you that you have claimed the voucher.
- Review the updated total price and proceed with your payment method to complete the transaction.
- This process integrates discounts effortlessly, ensuring a rewarding shopping experience.
Scenario 4: Rate the Store
Imagine you’ve visited a store and
want to leave feedback about your
experience.
- Navigate to the Store Locator section of the app and select the store you recently visited. Click on "Review" and click on "Add Reviews" button.
- You’ll be directed to the feedback page, where you can rate the store by selecting the appropriate number of stars.
- Add comments describing your experience and upload any photos if necessary to provide detailed feedback.
- Once finished, click on the “Submit Review” button to finalize your feedback.
- This feature encourages engagement and transparency, allowing stores to improve their services based on customer input.
Scenario 5: Account Settings
Imagine you want to check your
account details or take advantage of
loyalty rewards.
- Start by clicking on the Account Icon in the navigation bar, which takes you to the Account Page.
- Here, you can view and edit your account details, such as your name, email, and password.
- Explore the Loyalty Rewards Program to see your current points and available rewards. You can claim vouchers.
- Additionally, track your order history and manage notifications to stay updated on your purchases.
- The redesigned account settings ensure you have complete control over your profile and reward programs in a user-friendly layout.
I conducted usability testing for
the low-fidelity prototype on Figma
by engaging three participants. The
testing sessions were held via
Google Meet, allowing me to observe
their interactions with the
prototype and gather valuable
feedback remotely. There 3 users to
participated in the userbility
testing:
1. Yin En
2. Lee Yee
3. Li Wei
Click HERE to view the Low-Fi Prototype User Testing
Recordings on Figma.
Fig. 3.31 Recordings in Google Folder.
The following document is the
feedback on Low-fi
Prototype:
Doc. 3.1 User Feedback.
Summary and Key Findings: Feedback on Low-Fidelity Prototype
User Ratings and General Feedback:
- All three users rated the prototype 8/10, reflecting a generally positive reception.
- The overall flow and structure were commended for being easy to navigate and aligned with user expectations.
Key Strengths Identified:
- Simplicity of Navigation: Users appreciated the logical and intuitive flow of the app.
- Core Functionality Demonstration: The prototype effectively showcased its primary features.
- Practical Features: Specific features like the store locator were highlighted as valuable additions.
Areas for Improvement:
- Bug Resolution: Multiple users noted bugs in specific flows, emphasizing the need for early-stage debugging to ensure a smoother user experience.
- Feature Presentation: One user (Li Wei) found the number of features overwhelming initially, suggesting a need to balance functionality with simplicity to avoid user fatigue.
Recommendations for Future Iterations:
- Prioritize bug fixes and technical refinements to enhance usability.
- Maintain the logical flow of the app while carefully considering the presentation of features to prevent overwhelming users.
- Continuously test the prototype with diverse users to ensure alignment with broader user needs and expectations.
Further Refinement:
- I incorporated a "Get Directions" feature that integrates with map applications, allowing users to easily open the store's location in external maps for added convenience and refinement.
- I enhanced the navigation bar by adding text labels alongside the icons, ensuring that users unfamiliar with design icons can navigate the app more effortlessly.
- I introduced additional support features, including a "Rate This App" option, a direct link to the Guardian website, and other tools to further enhance user accessibility and engagement.
Fig. 3.32 Further Refinement#1.
Fig. 3.33 Further Refinement#2.
Fig. 3.34 Further Refinement#3.
Week 13 | Final Low-Fi Prototype
Final Outcome
Click HERE to view the Final Outcome on Figma.
Low-fi Prototype Navigation Demo Video: Link to the watch
Fig. 3.35 Final Outcome - Low-Fidelity Prototype.
Fig. 3.36 Low-Fi Prototype User Flow Overview.
Fig. 3.37 Low-Fi Prototype User Flow Navigation Demo Video.
4. FEEDBACK ⊹ ࣪ ˖₊˚⋆˙⟡
Week 11
General Feedback: Mr. Zeon said we need to constructed
user kit before doing prototype.
Week 12
Mr. Zeon provided feedback suggesting that a
low-fidelity prototype does not require the
inclusion of pictures or colors, as the focus
should primarily be on the structure and
functionality rather than visual design
elements. In response, I explained that I
decided to include images in the prototype to
give a rough representation of how the app might
look in its final form. This approach was
intended to help visualize the overall layout
and provide a clearer idea of the user
interface, even at the early stages of design.
Week 13
Mr. Zeon also mentioned that if I aim to
achieve an A for this module, I could refer
to Dribbble's e-commerce app designs as a
visual reference for inspiration. Taking his
advice into account, I believe I need to
explore more creative approaches in refining
my prototype. My goal is to enhance the
visual appeal and layout, ensuring it stands
out and captures interest while maintaining
functionality and usability.
5. REFLECTION ⊹ ࣪ ˖₊˚⋆˙⟡
Experience
Working on this proposal provided a hands-on
opportunity to understand the importance of simplicity
and functionality during the initial stages of app
design. Creating the low-fidelity prototype allowed me
to focus on the app’s structure and user flow without
being distracted by visual elements. The process of
designing in Figma was both challenging and rewarding,
as it pushed me to think critically about user needs
and how to translate them into an intuitive interface.
Conducting usability testing further enriched the
experience by highlighting real-world perspectives on
the prototype’s design and functionality.
Observation
I observed several key areas where user feedback
played a crucial role in improving the prototype.
Many users found the navigation structure
straightforward but expressed some confusion with
icon-only buttons, which lacked accompanying text
labels. Additionally, the absence of a search
function on the category page stood out as a gap
that could hinder ease of use. These observations
underscored the importance of balancing minimalism
with clarity in design.
Finding
Through analysis of the feedback, I discovered that
even small adjustments, such as adding text to
navigation icons or including a search bar for
brands, can significantly enhance the user
experience. The feedback also revealed how critical
it is to consider accessibility and inclusivity in
design, ensuring that features are intuitive for a
wide range of users. Overall, the insights gained
from this process emphasized the value of iterative
design and user-centred testing in creating a
functional and user-friendly product.
Comments
Post a Comment