Application Design I / Project 2 & 3
26.9.2022- 7.11.2022 (Week 5 - Week 11)
Cheryl Voo Yie Qi / 0349878
Application Design I / Bachelor of Design in Creative Media
Project 2 & 3 /
UI/UX Design Document & Lo-Fi App Design Prototype
Jumplinks:
INSTRUCTIONS
Week 6
We need to download one of the apps in the list and replicate the UI
design. Select a minimum of 5 screens (not including onboarding) for the
task. We are allowed to use any software (Adobe XD, Photoshop, Illustrator,
or Figma) for the task. We need to study and observe carefully the original
design and implement it in our crafting. Focus on the details, examine each
pixel used in the original UI design and apply it to our own work.
- Productive - Habit Tracker
- Sectograph
- Trip
- AirBNB
- Premier League
- Strava
I chose the Productive - Habit Tracker and replicate it. I used the pen
tool to replicate the illustrations from the application. Here's the final
outcome in Figma.
Fig 1.1, Replicate App in Figma
Project 2 / UI/UX Design Document
We are going to create a UI document for our final project. This includes
the new concept of the UI design, and a mood board or style guide (Contains
specific implementation guidelines, visual references, and design principles
for creating the UI design).
The colour scheme I got from the original Zoo Negara app. For buttons, I'm
aiming for rounded buttons.
Here's my UI document:
Fig 1.2, UI document PDF
Project 3 / Lo-Fi App Design Prototype
We have to create a Lo-Fi App design prototype before creating
the High fidelity prototype.
At first, I wasn't familiar with using Figma, and here's the first version
of my Lo-Fi App design prototype:
Fig 1.3, First attempt for the Lo-Fi App design prototype
After I got familiar with Figma, I did some changes, and here's the
final Lo-Fi App design prototype.
Fig 1.4, Final Lo-Fi App design prototype in Figma
User testing
- First user testing feedback
Task: Purchasing tickets from the app
- The hamburger menu somehow glitched to the bottom menu icons. (while hovering)
- After purchasing the tickets, it can go back to the home screen but seems to have a glitch in the “home” word while hovering.
- After purchasing tickets, then can’t click anything. - Second user feedback:
Task: Look for “giraffe” and how to get there in the app
- After clicking “map” it doesn’t let me click on other things, I need to start over again from the starting page.
- When I scroll the animal page which has the giraffe and otter choice, it can scroll but it is scrolling the whole screen but not scrolling the content.
- Better to show which page the user is at. - Third user feedback:
Task: Both purchase tickets from the app and look for “giraffe” and how to get there
- The search button is not clickable.
- When I click the “scan” page, I cannot click on other buttons, need to start again from the starting page.
- The texts in the hamburger menu are not clickable.
- I can only click on “mammal” and “giraffe” on the animals' page.
- Need to start again from starting page when I finish clicking the task.
- Can’t purchase more than 3 tickets (the number can only click to 3).
- Can’t click other date and the time is not accurate (I chose 3 pm but it shows 10 am, only showing the time that the designer set)
- The payment method is also the same, I clicked on “E-Wallet” but it shows “Credit/debit card” (only shows the default one that the designer set)
FEEDBACK
Week 11
- Low-fi showed but not complete.
- Make 1 or 2 tasks for user testing.
REFLECTIONS
It was quite fun using Figma, but at first, I don't really know how to use it so I felt very frustrated. And for the lo-fi prototype, I searched online for some references but I felt mine looks very plain, so I'm not confident about what I have.
Comments
Post a Comment