Application Design I: Final Task
| 16.12.2024 - 10.01.2025 (WEEK 13-WEEK 15)
| Tang Chin Ting [ 0366473 ]
| Application Design I/ Bachelor of Design in Creative Media
| High Fidelity App Design Prototype
| Tang Chin Ting [ 0366473 ]
| Application Design I/ Bachelor of Design in Creative Media
| High Fidelity App Design Prototype
.jpeg)
INSTRUCTIONS
SUBMISSION
Project 03: Low Fidelity App Design Prototype
Instructions:
Students will synthesize the knowledge gained in tasks 1, 2, and 3 for application in task 4. Students will create integrated visual assets and refine the prototype into a complete working and functional product experience for a selected task.
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
Color Palette
To ensure the color palette matches which Sushi King brand, I used the color picker to pick the Sushi King logo color and the website color to do the comparison. I thus choose the logo one ad the primary color of the app.
Figure 1.1 Sushi King Website
Figure 1.2 Prototype layout
UI Kit
Figure 1.3 Final UI Kit Color Palette
Figure 1.4 Final UI Kit Color Palette
Design Progress
I first filled in the color and all of the pictures, after I put the picture of the top sell list, I found that the image was too boring. So, I asked my friend for suggestions, and she said that maybe making it a round would be better. I also added the specific icon for the "Special for You" section.
Figure 1.5 Design Progress
Figure 1.6 Design Progress
I added 3 new pages for the "Recommendation" to allow the user to choose the recommended sushi and add it to the cart.
Figure 1.7 Design Progress
Icon Section
I added a green color correct is to make it more grab users and mention that the information is correct. Actually, it was a red color initially, but mr Zeon asked me to change it to a green color. All of the correct icons also need to change to green color.
Figure 1.8 Design Progress
Figure 1.9 Design Progress
Figure 1.10 Design Progress
Profile Setting
In the profile, I added a new feature, which is setting personal information like the username and gender. It is the same function that I added in the filter of date and time before. For the filter of date and time, I also added a new option for the user to choose from.
Figure 1.11 Design Progress
Figure 1.12 Design Progress
Create Component
To make it more interesting, I've created 2 components. One of them is when the user moves their mouse to the "Added Successfully" sushi image, it will change the background color. Besides, I also did a pop-out OTP notification on the signup page.
Figure 1.13 Component Create
Figure 1.14 Component Video
Figure 1.15 Component Video 2
Figure 1.16 Prototype Final Layout
Scenario 01
Imagine you are a new user of this app, you want to sign up for the app and purchase sushi. You can browse the homepage, and menu and set up your username and gender.
Tasks:
- Sign up for the app
- Go to your profile and set up your username and gender
- Adding sushi to your cart and checking out
- Proceed to the payment section and complete the task
Scenario 02
You are a Sushi King enthusiast and want to order lunch. Start by logging into the app, then reorder the meal you previously enjoyed. Additionally, check your order history to review the details of your past orders.
Tasks:
- Log-in to the app
- Browse the homepage and click "Order Again"
- Checkout your order and proceed to the payment
- Go to the profile and check for the order history to view the order details and done the task.
Scenario 03
You are now a Sushi King member and plan to have dinner at the physical store. Start by logging into the app to explore the current promotions, then check your favorite and recommended food items. Complete the process by finalizing your payment.
Tasks:
- Log in to the app.
- Navigate to the promotions page and use the date and time filter to find the current promotion.
- Go to the "Recommendations" and "Favorites" sections to review your preferred food items.
- Proceed to payment and complete the task.
User Feedback
Figure 1.17 User Feedback
Final Refinement
I first refining the feedback from Ming En, she said that the notification is not prominent enough and could easily be overlooked, I thus decided to change it animation style in the component to make it more grabbing attention. Besides, I also move the "Tap anywhere to start" lower a bit to to improve visibility and usability.
Figure 1.18 Final Refinement
Figure 1.19 Final Refinement
Figure 1.20 Final Refinement
Final Prototype Demonstrating Video:
Figure 1.21 Final Demonstrating Video
Final Figma Link:
Figure 1.22 Final Figma Prototype
FEEDBACK
Week 15:
- The "Special for You" element currently resembles a clickable button. It's important to modify the design so it doesn't appear as though it can be clicked
- The "Payment Done" icon can change into green color
- The selected food in my cart need to put picture
- Add shadow for the round picture in the menu page so that it stand out from the page
- Use bold text for total and the price in the order summary page
REFLECTION
Experience
It started with the definition of the visual identity of the app, including selecting color schemes, typography, and layouts that best fit Sushi King's branding. This stage really brought home the need for consistency and harmony in visuals that create an instinctive interface. Wireframing each of the screens was a necessary process; it allowed mapping of the user journey and assurance that transitions will be smooth. Going from low-fidelity wireframes to high-fidelity prototypes called for an attention to detail, especially with the integration of interactive elements, such as hover effects and buttons.
Findings
Usability testing highlighted some points that needed to be changed to enhance user engagement and satisfaction. One important point from these findings was the enhancement of visual cues-for example, confirmation icons should be changed from red, since users associated it with an error, to green, which gave a more positive indication of an action being performed successfully. The feedback also revealed that the top-selling list looked more attractive when images were rounded instead of square. Also, users liked the "Order Again" feature and date-time filters, which made their experience smooth and quick in reaching their favorite items and promotions. These findings emphasized the value of user input in refining designs to meet their needs better.
Observations
Several key observations emerged during the project. Interactive components like hover effects and OTP notifications were particularly effective in enhancing the app's usability. They provided users with immediate feedback, making the app feel responsive and engaging. The inclusion of a personalized profile settings feature and the ability to filter promotions by date and time added a layer of customization that users found valuable. Furthermore, the app’s clean layout and intuitive navigation contributed to an overall positive user experience, allowing users to perform tasks like ordering sushi or checking promotions effortlessly. However, it was evident that even minor inconsistencies, such as unclear button labels or slightly misaligned elements, could disrupt the user flow and needed to be addressed during revisions.
Comments
Post a Comment