Application Design I: Final Project
23.07.2025 - 06.08.2025 (Week 13 - Week 15)
Diane Sani Alexander Wan / 0378712
Bachelor of Design (Hons) in Creative Media
Application Design I: Final Project: High Fidelity App Design Prototype
INSTRUCTIONS
FINAL PROJECT
1. Color Palette
I decided to stick to the color scheme of Guardian, which is orange otherwise it would lose the whole point of the branding for Guardian MY.
Figure 1.1 Color scheme.
Figure 1.2 Opening page.
2. Design Process
The UI icons I used for this project. Icon Pack
This icon pack made it easier for me to find icons and helped me make all of them the same size. I haven't really figured out to make the text form in Figma due the insufficient timing, but managed to make it clickable.
There are 2 types of pages when getting in, by creating account for new users and the login for existing users where it welcomes the user.
Figure 2.1 Starting page.
Next is the questionnaire. This only applies for new users as it needs to understand their skin and it also helps new users who are new to skincare to understand more about their skin.
This will suggest products that's towards their skin.
Figure 2.2 Questionnaire page.
Then next is the profile, reviews and the category page. The Profile and Category can be accessed through the navigation bar, but the reviews are based on the product the user clicked on.
Figure 2.3 Profile, reviews and category page.
This is the cart page. Where users put all the products that they want to purchase in a cart, so it has all the checkout process. Decided to make the layout simple and easy to navigate so it isn't confusing for the users eyes.
Figure 2.4 Cart and checkout page.
This is the Wishlist page, it allows the user to save a product they usually use or they plan to wait until they have the budget to purchase for it.
Figure 2.5 The Wishlist page.
This is the main part for this project. So after the questionnaire, it would lead straight to the 'suggested for you' page where it'll suggest the user products from the survey they did. Then when you click on a product it will then show every thing about the product its self.
On the very right, there is an explore page for users to look through when they have no information about skincare, this will help them guide through about a product they want to buy.
Figure 2.6 Product description page and Explore page.
This is the home page and is has ads about what's happening in current times, then there are mini categories for easy access. The navigation bar helps for easier access to move across pages.
Figure 2.7 Home page.
Figure 2.8 Overall view on Figma.
3. Usability Testing
While I was testing on my phone I realized that the next button was too low and wasn't able to see much. So I had to pull it up a bit so the user wouldn't have to scroll down to see it.
Figure 3.1 Usability testing 1.
Figure 3.2 The nav bar issue.
4. Final Outcome
This is the High Fidelity App Design for Guardian.
High Fidelity app design demonstrating video:
Figure 4.1 High Fidelity app design video.
Link to Figma:
Figure 4.2 High Fidelity app design.
Figure 4.3 High Fidelity app design prototype.
High Fidelity Mobile App Design by dianewan27
Comments
Post a Comment