Labels

Application Design I: Task 3

| 2.12.2024 - 23.12.2024 (WEEK 11-WEEK 14)
| Tang Chin Ting [ 0366473 ]
| Application Design I/ Bachelor of Design in Creative Media
| Low Fidelity App Design Prototype
LECTURES

Week 11: Usability Testing & UI Kits
The lecture on usability testing stresses that the functionality of a product should be tried out by observing real users in action. During usability testing, participants are set to accomplish some tasks-for example, creating an account, navigating menus, or using core app features the researchers collect qualitative data on usability issues and user satisfaction. It will be based on a methodology that includes the preparation of low-fidelity prototypes, conducting tests remotely-for example, via Zoom-and iterative refinements based on feedback. 

Other main focuses are the use of UI kits and pre-prepared UI elements for apps or websites. This increases efficiency by maintaining brand consistency and enhancing the user experience of navigation. Designers can take into consideration standardized elements, including typography, iconography, and layouts, that create visually appealing and user-friendly interfaces.

Week 12: Usability Heuristics
Usability heuristics, as this lecture has established, are the guiding principles in making the interface more intuitive and user-friendly. The basis is laid down by the 10 principles of Jakob Nielsen: visibility of system status, error prevention, user control, and consistency. Users must always receive feedback concerning their actions-for example, progress bars-to feel in control. The interfaces should follow real-world conventions, use familiar language, and offer flexibility for novice and advanced users. 

Another point of concern is reducing cognitive load: allowing users to recognize actions, not remember them. The key strategies will involve simplifying design, giving recovery paths for errors, and providing help documentation. The focus, therefore, of these principles has been the overall usability and satisfaction of users.

Week 13: User Interface Visual Elements
Visual design in user interfaces basically involves key elements like color, typography, icons, and layout. Color plays a major role and is applied using techniques such as the 60-30-10 rule to provide visual hierarchy and consistency. Typography pertains to brand identity and readability, while icons provide intuitive visual cues. Designers should utilize grids and white space in developing structured, breathable layouts that improve user focus. Therefore, buttons, sliders, and carousels have to be designed not only for accessible purposes but also in functionality terms. 

Furthermore, using illustration and photography or metaphors to focus attention and also carry across the important message in functional means is in accordance with what has been discussed during this lecture. A careful collection creates appealing and efficient user interfaces.

Week 14: User Interface Visual Elements
The most critical areas in UI design and typography were pointed out in the lecture Design Essentials for User Interface. It gave a step-by-step process for color palette selection and pointed out the importance of the 60/30/10 rule for color distribution: using 60% dominant color, 30% secondary color, and 10% accent color. Different color schemes have been thrown in: monochromatic, analogous, complementary, and triadic colors, all with their strong and weak points. There was also some discussion about the hierarchy of typography, font size, weight, alignment, and the rules of pairing fonts. 
INSTRUCTIONS

SUBMISSION

Project 03: Low Fidelity App Design Prototype

Instructions:
  • Once the UX design process is completed, students can now create a low-fidelity prototype of the app. Students need to arrange all the screen wireframes, actions, and visual feedback and link them up in Adobe XD/ Figma/ Invision Studio or any other prototype software. 
  • Students are then required to perform usability testing whereby they will invite guests to test out their low-fidelity prototype and gather all the information, responses, feedback, and pain points observed from the test.
  • Students need to document this process with video and produce a document containing a detailed analysis of this task and the solutions to the problems faced by the testers.

Requirements:

Visual Design Concept
Develop a visual design concept that aligns with the branding of your application. This concept should include color schemes, typography, and imagery that convey the desired look and feel of your application. 

Wireframes
Create wireframes of the screens for your mobile application. These wireframes should illustrate the layout and content of each screen, including the navigation and interaction elements. You should use tools such as Figma, or Adobe XD to create these wireframes.

Usability Testing
Conduct usability testing on your low-fidelity prototype to validate the user flow and user experience. You can recruit friends, family, or classmates to test your prototype and provide feedback. Make sure to document the feedback and use it to iterate on your design.

Deliverables
Submit a digital document that includes your low-fidelity prototype, wireframes, and visual design concept. Also, include a brief summary of your usability testing results and how you used them to refine your design in your e-portfolio

Submissions
  • Project Files (Adobe XD or Figma)
  • 2 Video Walkthrough
  • 3 Online posts in your E-portfolio as your reflective studies
References
Actually, I found the references on Pinterest at first. Still, after showing my low-fi prototype to Mr Zeon, he asked me to find some more suitable references for my application brand.

He asked me to access this link and find interesting references on the website: https://dribbble.com/tags/sushi-app. There are a lot of quite good references, I also change some layout designs to follow these references.
Figure 1.1 References
Figure 1.2 References
Figure 1.3 References
Design Progress
I first designed the log-in page, the idea in this page is that the Sushi King logo will appear for a while after opening the app, and the text of "Tap here to start" will keep flashing and the user can click anywhere to navigate to the log-in page.
Figure 1.4 Design Process
Log-in and Sign-up page
In these two pages, I will allow the user to click on the blank and the phone number/password will fill in automatically. After I asked for Mr. Zeon's feedback, he asked me if have time can do a text micro-interaction in the high-fi prototype.
Figure 1.5 Design Process
Homepage
Initially, there will only be a top-sell list at the top of the homepage, but Mr. Zeon recommended that maybe I can add more features like 'my favorite', 'recommendations', and the short key of viewing the number of smile points, so I added another page to place these features.
Figure 1.6 Design Process
Navigation Bar
I draw the navigation bar in Figma, but for some of the icons, like the QR code and promotion icon I use a plug-in to find a similar icon.
Figure 1.7 Design Process
Browsing and ordering
On the menu page, I initially only allowed the user to click one category, which is the "highlights," but Mr. Zeon asked me to allow the user to click each category to browse the sushi. Besides, I also create a flow of adding the sushi to the cart and proceeding to check out the food and pay for it.
Figure 1.8 Design Process
Figure 1.9 Design Process
Payment Process
I did the payment section by clicking each input field, the information of the payment method will automatically fill in. I also added a small icon at the right side of each input field to inform the user the information is correct.
Figure 1.10 Design Process
Scanning Code Page
On this page, I first allow the user to show their own QR code to collect the smile point. When they click on the QR code image, it will pop out a "Congratulations" notification which means the user has successfully collected the smile point. It also allows the user to apply the voucher for next time paying the bill.
Figure 1.11 Design Process
Figure 1.12 Design Process
Promo Page and Profile
I added a date and time filter to allow the user to find a suitable promotion for their meal. But they can only choose the date I set; they may give more options for time selection in the hi-fi prototype.

The profile page also has a "Golden Member," which means when you collect more smile points in that month, it will change the ranking of "Bronze Member", "Silver Member" and "Golden Member", and all of the collected smile point history will also state at the bottom.
Figure 1.13 Design Process

Final Outcome
Figure 1.14 Final Outcome
Figure 1.15 Final Outcome
Figure 1.16 Final Outcome
Figure 1.17 Final Outcome
Figure 1.18 Final Outcome
Figure 1.19 Final Outcome
Figure 1.20 Final Outcome
Figure 1.21 Final Outcome
Figure 1.22 Final Outcome
Figure 1.23 Final Outcome
Figure 1.24 Final Outcome
User Testing
Usability testing is evaluating a product or service with representative users. Participants are tasked with completing specific actions while observers record notes. The primary aim is to detect usability issues, gather qualitative data, and assess overall user satisfaction. It doesn't yield large feedback samples like questionnaires.

Scenario 01
Imagine you have arrived at the Sushi King store at Sunway Pyramid, and you want to reorder the food from your previous order and quickly proceed to the checkout.
Tasks:
  1. Log In to the app
  2. Browse the homepage and click on the "Order Again" feature
  3. Reorder the food with dine-in and quickly proceed to the payment section
  4. Confirm the order and view the order history in your profile

Scenario 02
After having lunch in the Sushi King physical store, you need to collect the smile point and redeem a voucher for the next time having a meal at Sushi King.
Tasks:
  1. Sign up to the app
  2. Browse the homepage and go to the scan code page
  3. Showing your code to collect the smile point
  4. Redeem an RM10 voucher for the next time having a meal at Sushi King

Scenario 03
You want to have lunch at Sushi King now, so you open the app and view the current activities using the date and time filter. After that add sushi to the cart and proceed to the payment section.
Tasks:
  1. Sign up to the app
  2. Go to the activities page and use the date and time filter
  3. Adding sushi to your cart and checking out
  4. Proceed to the payment section
User Testing Video
For Ming En and Rabiah, I did the user testing face-to-face, but for the third user testing, Josh, I did it on Zoom.
User Feedback
Figure 1.25 User Feedback

Final Refinement
Following the user feedback, I would like to add the exclamation mark icon in the payment section to remind the user needs to fill in all the input fields. Besides, I also added the time of each process following the feedback from Ming En.
Figure 1.26 Final Refinement
Figure 1.27 Final Refinement

Final Prototype Demonstrating Video: 
Figure 1.28 Final Demonstrating Video
Final Figma Link: 

Figure 1.29 Final Figma Prototype

Week 14:

1st Feedback
  • Adding text label for the icon at the navigation bar
  • Add an onboarding page before logging in to the page
  • Bold the text in a call to action button
  • Some reference for you at the homepage, she put all important info at the top of the homepage, customer recommendations, easier to know the nearer outlet and points they collected
  • Check your alignment
  • Leave some space between ingredient and price
  • Check your vertical scroll function for the menu section on the homepage
2nd Feedback
    • The three dots move up a bit, leaving some space between the dots and the start button
    • When I click the dot, it will lead me to the next page, not the start button, so the start button should lead me to the log-in page
    • When I click on the phone number and password fields, the phone number should be visible, and the password should display as dots. I should then click "Log In" to proceed to the next page. However, the current design allows clicking "Log In" without anything appearing in the phone number and password fields.
    • Make sure the description text in the "Order Again" feature aligns with the food title "Salmon," like what you did in the "Order Again" session
    • For the payment section, the text should appear in a box after it's clicked. If you have time when doing high fi, please look for resources on the internet to implement the micro-interaction for the text.
    • Please enable the option to select a venue in the order section, allowing us to choose between dine-in and delivery. We should be able to choose different categories, and the page should update according to the selected category.
    REFLECTION

    For Application Design I, Task 3 was to create a low-fidelity prototype of a mobile application, placing a premium on usability testing and integrating UI kits into the design. I began by doing wireframes, which outlined the basic structure and UI elements that would comprise the application. Utilizing UI kits allowed me to move quickly through this stage, having consistency in design elements such as typography, iconography, and layout. This approach not only raised efficiency but also attained coherence of the brand throughout the design.

    After establishing the wireframes, I moved on to an interactive prototype using Figma. This tool allowed me to link various screens and simulate user interactions, providing a tangible representation of the app's workflow. In order to test the effectiveness of the prototype, I conducted remote usability testing sessions via Zoom, inviting participants to perform specific tasks like account creation and navigation through the app's core features. These sessions were very helpful in the identification of usability issues and the collection of qualitative feedback directly from potential users.

    The usability testing phase brought to light a number of critical insights. Participants appreciated the intuitive layout facilitated by the consistent use of UI kit components, which contributed to seamless navigation. However, some users encountered difficulties with certain interactive elements, indicating a need for clearer visual cues and improved feedback mechanisms. Also, in the testing phase, it became evident that the color scheme, although beautiful, lacked sufficient contrast in various places, which could make it inaccessible for visually impaired users.

    I now realize that iterative design and user-centered testing are the most critical factors in developing any application. While sticking to UI kits was beneficial for consistency in design, real-world application via usability testing showed the practical problems that theoretical design cannot foresee. The process underlined the importance of a balance between aesthetic design and functional accessibility: the application should not only be visually appealing but also user-friendly and inclusive.

    To conclude, Task 3 was an intensive practice that allowed me to explore in depth how application design evolves from the concept development stage to user testing. The use of UI kits helped ensure consistency in design and allowed for usability testing, which came in handy in bringing out various instances of user experience problems. Through this project, the importance of taking a user-centered approach to application design has been strengthened, which has also emphasized the importance of refinement through continuous user feedback to create functional and interesting applications.
    Labels:

    Comments

    Post a Comment

    Popular Posts