Application Design I / Project 3: Lo-Fi App Design Prototype
Angel Tan Xin Kei / 0356117
Application Design 1 / Bachelor of Design (Hons) in Creative Media
Task 3 / Lo-Fi App Design Prototype
- Instructions
- Lectures
- Week 1-10 Lectures refer to Task 1 and Task 2
- Lecture 11: Usability Testing & UI Kit
- Lecture 12: Usability Heuristics
- Lecture 13: User Interface Visual Elements
- Lecture 14: Design Essential for UI and Resource
- Project 3: Lo-Fi App Design Prototype
- Feedbacks
- Reflections
- Project Files (Adobe XD or Figma)
- Video Walkthrough
- Online posts in your E-portfolio as your reflective studies
⋆ ˚｡⋆୨୧˚ Lecture ˚୨୧⋆｡˚ ⋆
- Prepare Lo-Fidelity Prototype
- Define three user scenarios and provide written instruction for each
- Conduct testing via zoom and send Figs link to participant
- Recruit 3 participants and assign one scenario to each
- Gather and analyse feedback from participants using prepared questions.
- pre-packaged collection of all UI components for a mobile app or website
- Typography
- Icongraphy
- Layouts and Grids
- Color Palette
- Components
- Visibility of System Status
- consistently inform users about its current state through timely and appropriate feedback
- strive for predictability and control most cases, more information translates to better decision making
- Match Between System and the Real World
- designing interfaces that align with users' realworld experiences and expectations
- Visual Metaphors
- Use of Familiar Language
- User Control and Freedom
- Meet Users’ Expectations When Using a Back Link
- Allow Users to Easily Cancel an Action
- A "Close" link allows users to dismiss a new view
- Support Undo
- Consistency and Standards
- visual consistency
- functional consistency
- feedback consistency
- Error Prevention
- Clear instructions
- confirmation prompts
- validation
- Recognition Rather than Recall
- reduce cognitive load with menu navigation and history favorites
- Flexibility and Efficiency of Use
- Customisation
- Shortcuts
- Adaptability
- Aesthetic and Minimalist Design
- Simplicity
- Visual Hierarchy
- Whitespace
- Consistency Typography and Colors
- Help Users Recognize, Diagnose, and Recover from Errors
- Clear Error Messages
- Visual Cues
- Guided Recovery Paths
- Help and Documentation
- Contectual Help
- User Guides and Tutorials
- Searchable Knowledge Base
- Online Support
- Line
- Shape
- Form
- Texture
- Space
- Color : 60-30-10 Rule
- Text
- Shadow
- Buttons
- Icon
- Photos
- Illustrations
- Cards
- Search bar
- Breadcrumb
- Pagination
- Slider
- Tags
- Icons
- Carousel
- Mobile Specs
- Dropdown RadioButton
- Toogle
- Date and Time Picker
- Grids
- Process of Color Palette Generator
- Choose Main Color Create Palette
- Use 60/30/10 rule when applying
- Monochromatic Color
- use varying shades and tones in a single hue
- effective in minimalist
- Analogous Color
- groups of colors next to each other in color wheel
- gradual changes in hues
- Complementary Color
- pairs of color that are opposite each other
- e.g. like green and red , blue and orange, yellow and purple
- Triadic Color
- a set of three colors that are evenly spaced around color wheel
- contrast and harmony
- 60/30/10 Rule
- originated in field of interior design
- classic guideline for creating balanced and visually appealing spaces managed by proportion of colors.
- Using Gradient
- can be linear (transitioning from one side to another) or
- radial (transitioning from the center outward)
- create an illusion of depth, making flat designs feel more three-dimensional and engaging
⋆ ˚｡⋆୨୧˚ Project 3: Lo-Fi App Design Prototype ˚୨୧⋆｡˚ ⋆
I explored various loyalty program and grocery shopping apps, including Watson, Sunway Pals, EcoShop and Lotus Malaysia to analyze their design and layout. These apps demonstrated efficient design and user workflow, providing valuable insights for the redesign Bites Card project. Below are references to the layout and flow of bus booking applications:
I developed my low-fidelity prototype in Figma, starting with basic wireframes to outline the core structure and layout of the application by referring to some of the references. I focused on defining key features and ensuring that the user flow was easy to understand. This process involved several iterations based on initial feedback, making adjustments to improve clarity and usability. Although it was a demanding and time-consuming task, seeing the application gradually take shape from scratch gave me a deep sense of fulfillment in my work.
|
| Fig 1.1 Figma Simple Wireframe |
|
| Fig 2.1Desserts Icons |
|
| Fig 3.1 Brand Logo |
|
| Youtube References |
|
| Fig 3.2 Color Scheme Used for High-Fidelity |
|
|
|
I selected Poppins as the application's font due to its clean and modern aesthetic. Its versatile style, blending characteristics of both serif and sans-serif fonts, makes it an excellent fit for a grocery app, ensuring readability while maintaining a professional look.
|
| Fig 3.3 Text System |
4.Iconography :
|
|
|
I implemented a grid system on every page to ensure a consistent and well-structured layout across the entire application. This approach helps maintain visual balance, improves alignment, and enhances the overall user experience by providing a cohesive design framework.
|
|
Fig 3.5.1 Grid System in Framework |
|
|
|
Imagine you’re planning to redeem loyalty points for a reward through your grocery loyalty app. The process begins with the app opening to a loading screen, followed by a login page/sign up page where you enter your credentials to access your account.
- Once logged in, you’re greeted by "Bites" home page.
- You may try to scroll up or down and horizontally or vertically in various section to check out your membership ID points and rewards throughout the page.
- Then, you may tap into "My Loyalty" by scrolling up or down read through the details of the loyalty program to understand how it works.
- Back to homepage, you will find the section to "Enter promo code". Enter the promo code provided and pressRedeem.
- Confirm the successful redemption of a Free Drink Voucher.
- Visit the “View Vouchers” section to verify that the voucher is added to your account.
Imagine you want to perform a daily check-in in the app or visit the shop and check-in physically then redeem a voucher during your visit to a grocery store.
- The process starts on the bites page, where you navigate to the "Check-Ins" section. You click the highlighted padlock to check-in and earn reward points.
- Next, you proceed by scrolling down to the “Visit Nearby Stores” section and select the available store from the list.
- Upon arriving at the store, you use the app’s check-in feature to confirm your visit.After completing the check-in, you accumulate points and the miles add up.
- At checkout, you go to "view vouchers" and redeem the free drink vouchers to present the voucher for scanning (or simulate the scan within the app) to apply the discount successfully.
This process ensures a seamless experience for earning and redeeming rewards during store visits.
- Imagine you’re placing an order through your grocery loyalty app and redeeming a voucher for a discount then make payment and track orders.
- The process begins with you navigating to the “Shop” section on the home page. You will need to insert your post code to find nearest available stores for you to select as different stores might have different stocks.
- Then, you choose between Delivery or Pickup as your preferred option and what are the available time slots to pick up or confirming your delivery address.
- You browse through the list of items, select your desired products, and add them to your cart.You may also select the filter option to sort what categories you like.
- Once you have chosen the categories, you will only be able to view the filtered groceries and add to cart your preferred items.
- Before proceeding, you apply a voucher from the “My Rewards” section to your cart to avail a discount.
- You then move to the payment page, select your preferred payment method (e.g., credit card or e-wallet), and confirm the order. A confirmation screen appears, displaying your order details.
- To track the progress of your order, you visit the “Track Orders” page. You can monitor the status until your order is delivered or ready for pickup.
- This process makes ordering groceries convenient while maximizing the use of rewards.
- Align the thickness of the "Get Started" button with the rounded corners of the "Sign Up/Login" buttons.
- Enhance the reward system for shop check-ins to boost user retention.
- Add store images in the store locator for better engagement.
- Round the tier bar points to match the overall loyalty page design.
- Place the "View Vouchers" button within the vouchers.
- Change "Enter Code" to "Enter Promo Code" for clarity.
- Advised improving the alignment on the Cart page and increasing the font size of prices to enhance readability.
- Add some heading to decrease empty spacing between title on the "Voucher" and "Cart" Page
- Ensure all button in navigation are functional
- Enhance the design of the "Profile" page design to make it more interesting as it looks dull and like government page application
- Add some animation on your landing page so it looks more interesting
|
| Fig 4.1 Animation input on Landing Page |
| Fig 4.2 Feedback from Mr.Zeon |
1. Button & UI Adjustments
- Align button thickness and corner radius of "Get Started" button on the landing page matches the thickness and rounded corners of the "Sign Up/Login" buttons for a consistent look across pages. I changed the height from 70mm to 44mm.
- Improve button placement for vouchers by move the "View Vouchers" button to be within the voucher section rather than in the heading area for better accessibility.
- Clarify "Enter Code" to "Enter Promo Code".Rename the "Enter Code" field to "Enter Promo Code" for clearer communication.
2. Spacing Enhancements
3. Store Locator Improvements
Attach pictures of stores.Add store images in the store locator to enhance user engagement and provide visual cues.Update the store locator component to display a thumbnail image for each store entry.
4. Loyalty Page Design Enhancements
Round corners for the tier bar.Apply rounded corners to the tier bar to match the overall design style of the loyalty page.Modify the tier bar component’s border-radius property to match the rest of the UI.
5. Typography Improvements
6. Reward System Enhancement
Increase rewards points for shop check-ins like add 10 points as users visit the shop deserve better rewards and it ultimately enhance user retention by increasing the reward points for shop visits.Update the reward system logic and include a tooltip or notification to inform users of increased check-in rewards.
⋆ ˚｡⋆୨୧˚ Feedback ˚୨୧⋆｡˚ ⋆
WEEK 12:
Add a time and battery indicator to your phone prototype to increase realism.
General Feedback:
Everything looks good; you can proceed to the high-fidelity design stage.
⋆ ˚｡⋆୨୧˚ Reflection ˚୨୧⋆｡˚ ⋆
One of the biggest lessons I learned was the importance of user feedback. By conducting usability testing and gathering input from users, I was able to identify areas for improvement, such as refining button placements, adding necessary components like headings, and enhancing the overall visual appeal. The iterative process of making revisions based on feedback helped me develop a more user-centric design and taught me how small adjustments can significantly improve the overall experience.
Additionally, implementing design elements like a grid system, button variants, and placeholder images improved my understanding of Figma’s capabilities. Adding interactive components such as hover effects and "while pressing" states not only made the prototype feel more realistic but also enhanced my design skills. Including animations and designing pages like the profile section pushed me to think creatively about user engagement.
Overall, this experience has given me a strong foundation in UI/UX design, improved my problem-solving skills, and taught me how to approach design with a user-first mindset. Despite the challenges, seeing the prototype evolve from a simple concept to a functional design has been deeply fulfilling, and it has prepared me well for the next phase—creating the high-fidelity prototype.
Comments
Post a Comment