Project 3: Lo-Fi App Design Prototype
5/12/2024 - 19/12/2024 / Week 11 - Week 13
Tee Jia Ern / 0348512
Application Design I / Bachelor of Design in Creative Media
Project 3: Lo-Fi App Design Prototype
LECTURES
Week 11: Usability Testing & UI Kit
Week 12: Usability Heuristics
Fig 2.3: Horizontal and Vertical Scrolling
Fig 2.10: All Low Fidelity Prototype Pages
During the interview, he also mentioned it is not apparent where to click on in the meal planner. I added arrows to show that the ingredients text is interactable. I also added view recipe in case the viewer wants to look at the recipe first before purchasing the ingredients.
Week 13: User Interface Visual Elements
INSTRUCTIONS
1. UI Toolkit
It is essential that the colours, fonts and icons are consistent and fits the theme of the app redesign.
Link to Figma File:
Colour SchemeBased on the the research in Project 2: UI/UX Document, the respondents think the Lotus's app has a strong colour palette that is memorable and stands out from competitors...
Fig 1.1: Colour
Typography
For the typography I decided to go with Inter. Inter is a family of variable fonts that was thoughtfully created for computer screens. Which is suitable for an app due to it's small digital screen that requires font that has high readability. It is also the default font in Figma. Inter also comes with several different weights and styles available in the Inter font family. This ensures the option to create visual hierarchy in text, allowing the user to categories the content available.
Fig 1.2: Font
Iconography
The icons were founded from the plugin in Figma. Thanks to the library of icons available in Figma, it helps me find the exact icons I needed for my project.
Fig 1.3: Icons
Components
I made sure that the input boxes and buttons have placeholder text. It is important to have placeholder text to inform the user about the action taken. I added padding in the buttons to make the text have extra space and make the user interface more spacious. I added the accent colour to the button to reinforce the colour scheme of the brand.
Fig 1.4: Components
2. Low Fidelity Prototype
References
Fig 2.1: Reference
Low Fidelity Prototype in Figma
First I created a frame that is a mobile portrait. I added a grid to ensure consistency throughout all pages of the design. I also ensure that the colours scheme is monochrome since it's a low fidelity prototype.
Fig 2.2: Grids in Figma
Everything from then on is quite intuitive. I created the pages accordingly.
Fig 2.3: Login, Sign Up and Forget Password
Fig 2.4: Home
Fig 2.5: Member
Fig 2.6: Cart
Fig 2.7: Profile
Fig 2.8: Search
I also created new pages based on the wildcard features in the card sorting method in Project 2: UI/UX Document as requested from the lecturer. The wildcard I decided to include are meal planner and grocery list.
Fig 2.9: Meal Planner and Grocery List
There are a total of 35 pages designed for the prototype. I then proceeded to add interactions to each of the frames so the user can interact and navigate with the prototype.
Fig 2.11: User Flow Interaction
3. Usability Testing
I then created 3 scenarios with tasks to navigate through the app.
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
Here is the link to the interviews:
4. User Feedback
Following the testing, I asked the participants a series of prepared questions to get their user feedback. The low-fidelity wireframes are then enhanced using this method. The document with the user feedback is below.
4. Improvements
In the interview with Javin he noted that the arrows on the right side of the screen does not indicate what the functionality is. I added an information icon to provide info about the functionality of the arrow button. I thought of changing the arrow icons into search icons but it would look weird having multiple search icons.
Fig 4.1: Grocery List Redesign
Fig 4.2: Meal Planner Redesign
Final Submission
Fig. 6.1 Low Fidelity Prototype in Figma File
Fig. 6.2 Improved Low Fidelity Prototype in Figma File
Fig. 6.3 Low Fidelity Prototype: Lotus's Mobile Application
Fig. 6.4 Improved Low Fidelity Prototype: Lotus's Mobile Application
FEEDBACK
Week 11General Feedback: For the user testing log in can not be the sole action taken by the user.
Specific Feedback: Make sure to have changes to the app redesign rather so that the UI/UX design is not too similar to the original app. Make sure to include wildcard features in the previous exercise.
Week 12
Specific Feedback: Make the button padding bigger so the text have some space to breathe.
REFLECTION
Experience: I learned about how to create a low fidelity prototype using Figma. There were some learning curve such as how to make a carousel while making the elements visible to edit. I still had not find the solution. I then added interactions throughout the app to mimic the in app experience. I understand that low fidelity prototype allows for the app features to be tested solely on the mechanics of the UI design.
Observations: User testing is an important stage in creating a prototype. Since the users are the one that will be using the apps. Test users might find something that the creator did not think about. For example I didn't realized that the arrow icons are not intuitive of the purpose. It is important that the app is user friendly and the user can navigate through the app easily.
Findings: Due it being low fidelity prototype, I saved a lot of time creating the icons and imagers through placeholder shapes, which is intended. There will be more complications during the next project of high fidelity prototype.
Comments
Post a Comment