Application Design I / Final Project
14.11.2022- 28.11.2022 (Week 12 - Week 14)
Cheryl Voo Yie Qi / 0349878
Application Design I / Bachelor of Design in Creative Media
Final Project / High fidelity prototype
Jumplinks:
INSTRUCTIONS
Final Project / High fidelity prototype
We have to complete high fidelity prototype using the low fidelity
prototype that we did previously.
Basically its the same as low fidelity, but I added a few screens, colours,
texts, images and the variants of buttons.
Fig 1.1, Progress in Figma
Fig 1.2, Screen flow in Figma
For a loading screen, I tried a few options to choose which is more suitable for the loading screen.
The first one is a normal loading circle:
Fig 1.3, Normal loading circle
Fig 1.4, Leopard running
The third one I combined them together:
Fig 1.5, Loading circle and leopard running
I'm fine with the one with the leopard and the one with both the leopard and the circle, but In the end, I chose the second one which is only the leopard running because I thought it is more suitable for a Zoo Negara theme, and looks more simple than both leopard and the circle thing.
Here's the final high fidelity prototype in Figma:
Fig 1.6, High fidelity prototype in Figma
Tasks
I designed 2 tasks for the Zoo Negara app, and here are how the task should be like:
The first task is to look for Giraffe in the app and find out how can we get there.
Fig 1.7, Task 1 (Find Giraffe)
Fig 1.8, Task 2 (Purchase ticket)
User testing
I made some changes based on the last low-fidelity prototype user testing, and let the same people test it again.
- First user testing feedback
Task: Purchasing tickets from the app
- The hamburger menu glitch thing has been fixed, and the buttons in the hamburger menu have colours when hovering.
- After purchasing the tickets, the glitch of the “home” word while hovering has been fixed too.
- After purchasing tickets, can’t click anything in the last user testing. But this time has been fixed also and added a tick badge on the ticket menu and a notification red dot to show the purchased ticket is nice.
- I saw that colours and images have been added this time, which is more of a complete prototype. I also saw that it added a payment screen, which is more like an ordinary application with a payment screen.
- The leopard loading screen is cute. - Second user feedback:
Task: Look for “giraffe” and how to get there in the app
- This prototype feels like an actual app as the buttons' colors changed when hovering and the buttons were linked together so I don't have to start over again like last time.
- The map is nice and has a location icon to show where we are and where to go, but it is an image so does not looks like an actual map on mobile phones that can drag and scroll. - Third user feedback:
Task: Both purchase tickets from the app and look for “giraffe” and how to get there
- The buttons were all linked together and I don't have to keep restarting from the starting page.
- The texts in the hamburger menu are still not clickable but it changes colours when hovering.
- Still can’t purchase more than 3 tickets (the number can only click to 3).
Prototype showcase video (showing the buttons):
Fig 1.9, Prototype showcase video
FEEDBACK
Week 13
- Need to test the prototype, and add a few more screens for other
menus to make the prototype clear.
- Add labels to the menu icons.
- Add more screens for the paying processes.
- The badge for the ticket is not obvious.
- Add a map title for the map screen.
- Need to test the prototype, and add a few more screens for other
menus to make the prototype clear.
- Add labels to the menu icons.
- Add more screens for the paying processes.
- The badge for the ticket is not obvious.
- Add a map title for the map screen.
REFLECTIONS
This module is quite fun as we can design an existing application, even though the process is quite tough but I felt satisfied after seeing the results. Through this module, I learned to observe other applications, and slowly observe more detail things such as the buttons and the interface of different applications. And I also learned to use Figma too, I never thought Figma can do many things like the accordion and selecting dates in the calendar thingy. It was so new to me and I saw lots of tutorial videos on Youtube, definitely going to try them sometime. Finally, I would like to thank Mr Shamsul for his feedback on my projects and for making his class relaxed and chill, and also of course letting us have online class sometimes :)
Comments
Post a Comment