UX DESIGN : TASK 4 UX PROTOTYPE
20.06.2024 - 25.07.2024 | Week 9 - Week 14
Ng Wai Fern | 0354966
UX Design | Bachelor of Design in Creative Media
UX Design : Task 4 UX Prototype
INSTRUCTIONS :
UX DESIGN : TASK 3 DESIGN DOCUMENT PROPOSAL
Task 4 : UX Prototype
For task 4, we are required to design a prototype of our app in Figma. Before starting to design the high fidelity, we did the middle fidelity design first to know the layout of the app. I designed medium fidelity for Pet shop and feedback page
Task 4 : UX Prototype
For task 4, we are required to design a prototype of our app in Figma. Before starting to design the high fidelity, we did the middle fidelity design first to know the layout of the app. I designed medium fidelity for Pet shop and feedback page
Fig 1.0 : Services page medium fidelity
Fig 2.0 : Feedback page medium fidelity
After determine the medium fidelity, I work on the logo and art direction of the app. For the logo, I want to incorporate the fun and friendly tone that we would like our app to have. For the app, I played around with a few concept of human and dog hand since our app name is PetConnect. The logo represent how human can be connected through their pets hence the logo show the human interacting with the pet's hand.
Fig 3.0 : Art direction and logo options
Fig 4.0 : Art direction references
For the options, we decided on option where the human high fiveing the pet as it is more align with our brand tone of voice which is friendly and fun.
Fig 5.0 : PetConnect logo
High fidelity
Before starting the design, I list out the assets used in the app design. The assets include doodles, dog mascot, font and colour palette.
Fig 6.0 : Assets
Fig 7.0 : Dog illustration - standing
Fig 8.0 : Dog illustration - walking
Fig 9.0 : Dog illustration - sitting
Fig 10.0 : Dog illustration - looking sad
For this task, I am in charge of designing the following pages' design
After completing the first round of prototype design. We receive some feedback from Mr. Hijjaz. Here are the feedback that we refer to when polishing our app.
- Onboarding page
Fig 11.0 : Onboarding page high fidelity
- Home and account page
Fig 12.0 : Home & account page high fidelity
- Feedback page
Fig 13.0 : Feedback page high fidelity
Fig 13.1 : Feedback page high fidelity
- Donation page
Fig 14.0 : Donation page high fidelity
- Checkout page
Fig 15.0 : Check out page high fidelity
- Services pages
Fig 16.0 : Services main page high fidelity
Fig 16.1 : Services page high fidelity
Fig 16.2 : Services - pet shop page high fidelity
Fig 16.3 : Services - pet sitting page high fidelity
Fig 16.4 : Services - verification page high fidelity
We have also receive feedback from Mr.Hijjaz to include an animation of the dog illustration walking however I was unable to add into the prototype due to figma limitation. Figma account need to be professional in order to add videos. Below are the unused asset
Fig 17.0 : Dog walking animation
Fig 18.0 : Dog sitting animation
• Donation change icon
• Journey is complete
• App easy to navigate
• Theme and feature is there
Feedback for feature - that can add
• Donation can choose to donate monthly
• Make sure pages with no main navigation have back button
• Edit button to change oyen picture in pet page
• Reminder app notification when item arrive / near by date for appointment
User Testing
After polishing our app, we prepare our prototype for user testing to understand users needs and perspective. To collect responses, we use Google Form to collect our data below are our analysis and data collected.
After polishing our app, we prepare our prototype for user testing to understand users needs and perspective. To collect responses, we use Google Form to collect our data below are our analysis and data collected.
Fig 19.0 : User Testing Survey data
After analysing the data, we did improvement to our app prototype. Me and Asilah worked on the report while Jun Zhe and Javin work on the improvement. Below is the compilation of our data analysis, final prototype and it's changes.
Fig 20.0 : Final Compilation - PetConnect
- Medium fidelity - Figma
- High fidelity - Figma
REFLECTION
Experience
This module was different from other modules as get to analyse app as a designer and user. This gave me the chance to learn about app and its importance of a good and bad app design. Besides that, this project gave me a chance to design an app that is helpful and visually attractive. I was also able to learn how to use Figma. Overall, is a new learning experience for me!
Observations
Through the exercise, I was able to observe and point out what makes the app good and what can be improve. I was also able to observe my group mates' opinion and learn from the perspective on what is good and bad design on our project.
Findings
From the project, I was able to identify the difference between Affordances, Signifiers, Feedback and what is the difference between UI and UX. Besides that, i was able to notice how to make our app user friendly based on user perspective. From the feedback, I was able to learn from my mistakes.
Comments
Post a Comment