Final Project: High Fidelity App Design Prototype
5/12/2024 - 2/1/2025 / Week 11 - Week 14
Tee Jia Ern / 0348512
Application Design I / Bachelor of Design in Creative Media
Final Project: High Fidelity App Design Prototype
INSTRUCTIONS
Onboarding page
The lecturer pointed out that I have to design an onboarding page in the app mockup. I found some illustration online and proceeded with the design of the onboarding page. I added the carousel icon which are the 3 dots along with a call to action button at the end of the onboarding page.
Home Page
In the top banner, I screenshotted the in app deals images and created a carousel. In the product section, I replaced the placeholder image with clear images of the product. I also added custom made icons that matches the colour scheme of the app using photoshop. I incorporated the Lotus's signature green and yellow for the icons.
Fig 1.2 Home
Fig 1.3 Meal Planner Icon
Home Page View All
There is a view more that links to a curated selection of products in the home page. I added clear product image. I also added accent colour of Lotus's green in the background of the cart icon. I also changed the text to red and grey to highlight the promotion so that the user feels inclined to make a purchase.
Fig 1.4 Product Catalogue
Sign Up, Login and Forget Password Page
In the sign up, login and forget password page, I added the signature Lotus's green colour to the call to action button. I also added a logo at the top of the landing page. 
Fig 1.5 Sign Up, Login and Forget Password
I recreated the iconic Lotus's shape by using a circle and triangle. I proceeded to design the voucher graphics adding vector illustrations and text.
Fig 1.8 Voucher Graphics
2. High Fidelity Prototype in Figma
There are a total of 40 pages.
Fig 2.1 Onboarding Page
Fig 2.2 Sign Up, Login and Forget Password
Fig 2.3 Home
Fig 2.4 Home View All
Fig 2.5 Member Page
Fig 2.6 Cart Page
Fig 2.7 Profile Page
Fig 2.8 Search Page
Fig 2.9 Meal Planner & Grocery List
3. Usability Testing
This stage is the same as the low fidelity design prototype. After creating the UI and making it interactive, I created 3 scenarios for the user to go through and getting their feedback.Scenario 1: Purchasing Groceries
Login to account. Search and type for oil. Tap on NATUREL SUNFLOWER OIL 2KG. Add to cart. Click on the top right cart. Check out. Place Order. Track Order
Scenario 2: Checking Promotions and Rewards
Sign up. On home page scroll, click both the view all to look at the discounted items. Then go to the member and explore weekly deals, points, QR code, coupons, vouchers and reward catalogue.
Scenario 3: Meal Planner and Grocery List
Forgot password. Log in. Select meal planner. Scroll until egg fried rice. Click on ingredients. Click on the arrow next to oil. Press NATUREL SUNFLOWER OIL. Go back to home. Click on grocery list. Tick the box next to oil.
Fig 3.1 Usability Testing Scenario
4. User Feedback
I then assigned the scenarios to each user and enlisted the three users. Once more, a Zoom call was used for the usability testing, and individuals were given access to the Figma link for testing.
Here is the link to the interviews:
The document with the user feedback is below:
4. Improvements
In the home and profile page the green text is not that visible, which is an issue encountered that is unique to the high fidelity. I used a darker shade of green instead and bold the text.
Fig 4.1 Home View All Text
Fig 4.2 Profile Details Text
Even in the previous low fidelity prototype, the users are confused on the action that they are supposed to take. I added a simple scroll indication page at the first time the user is using the meal planner.
Fig 4.3 Meal Planner Scroll Indication
I also changed the meal planner text to buttons so the user knows that the feature is interactable.
Fig 4.3 Meal Planner Buttons
After getting feedback from Mr Zeon, I added some improvements to the app. One of the improvements is adding text in the input fields to the login, sign up and forgot password page.
Fig 4.4 Login, Sign Up and Forgot Password
I also added the icon features to the prototype. I added a carousel for scrolling horizontally. I also linked the weekly highlights and health and beauty into the product page that can be accessed from the home page.
Fig 4.5 Icon Feature in Home Page
Mr Zeon also mentioned to make the voucher appliable during the checkout. So I created new pages to redeem and apply the voucher in the member and cart tab.
Fig 4.6 Redeeming Voucher
Fig 4.7 Applying Voucher
Final Project: High Fidelity App Design Prototype
Fig 5.1: High Fidelity Prototype: Lotus's Mobile Application
Link to Figma File:
Link to Final High Fidelity Prototype:
Video Walkthrough
FEEDBACK
Week 13Specific Feedback: Overall the app still resembles Lotus's. The challenge is to create a new and different interface that looks different from the original app. The rewards catalogue text box can have more spacing.
Week 14
General Feedback: The spacing within the header and the paragraph should be there.
Specific Feedback: In the home page there should be a group of icons with multiple features. In the check out page add a go back to shopping button to make it easier for the user to purchase items. Also make the voucher able to redeem and apply during checkout.
REFLECTION
I learned about the process of creating an app prototype. I gained a greater appreciation for the apps I use daily. I also got familiar with Figma since it is the software we use for the assignment. Figma is really convenient and useful in creating app prototypes. I like the the in built icon library because it saves time and can easily change to the colour of my choice. I find that user testing provided valuable feedback because the users will notice issues that I might not have considered. I struggled to make the redesigned app different from the original due to it being an e commerce website. The layout of purchasing of products is pretty standardized besides some minor changes like brand colour.
Comments
Post a Comment