APPLICATION DESIGN TASK 3: LO-FI APP DESIGN PROTOTYPE
28.10.2024 - 12.01.2025 / Week 6 -Week 16
Emily Goh Jin Yee / 0357722 / Bachelor of Design (Honours) in Creative Media
Application Design I/ DST60504 / Section 01
Task 3: Lo-Fi App Design Prototype
TABLE OF CONTENTS
1. INSTRUCTIONS
2. TASKS
3. FEEDBACK
4. REFLECTION
INSTRUCTIONS
TASKS
TASK 3: LO-FI APP DESIGN PROTOTYPE
- Lofi should be clear enough to visualize, no colours, no need much design
- how to make ad banners more interactive? ads that can really enhance or attract users
Imagine you are a new user who has just downloaded the Watsons app. Upon launching the app, you go through an onboarding process that introduces you to the app's features. Once the onboarding is complete, you are directed to the login page.
Your first task is to log in to your account:
- Open the app and enter your username and password on the login page.
- After successfully logging in, explore the landing page.
- Navigate through different sections, such as the Watsons Member Card, which allows you to collect points at physical stores, and the search bar for browsing products.
Now, imagine you want to search for a specific product. Click on the search bar, input the product name, and tap search. You will be directed to the search results page, where you can view relevant products.
Imagine you are using the Watsons app to browse and shop for makeup products.
- Start from the landing page and navigate to the Category section.
- Tap on the "Makeup" category and "browse all makeup products" to view all available makeup products.
- Select a product that interests you, and you will be directed to the product page.
- On the product page, check the stock availability by tapping on the "Check Stock Availability" button, which will show you the nearest branch with the item in stock for self-collection.
- Before adding the product to your cart, read through the customer reviews to ensure it meets your expectations.
- Once satisfied, tap Add to Bag to add the product. Then, click on the cart(bag) page to review your selected items and choose your preferred delivery method.
Imagine you are ready to purchase the items in your cart.
- Start from the cart page and double-check that your address is correct.
- Select your preferred delivery method or opt for self-collection at the nearest store.
- Tap on the "Voucher" button to see if you want to apply any available vouchers before proceeding with the checkout.
- Once you're ready, tap Checkout and choose your preferred payment method. If paying by card, enter your card details and submit.
- After completing the payment, you will receive an order confirmation, and your purchase will be complete.
FEEDBACK
WEEK 11
General Feedback
- Task 3 & Task 4 will be submitted together in week 15
WEEK 12
General Feedback
- -
WEEK 13
General Feedback
- Submission extended to Week 15, 7th of January, Wednesday
WEEK 14
General Feedback
- Submission extended to Week 15, 10th of January, Friday
- those who have not shown progress since the low fidelity prototype stage are at risk of failing the subject
- final class on 30th Dec
Specific Feedback
- "submission on next week, are you sure you can finish in time?"
- no comments because there's nothing much
- login/signup page- use button instead of the arrow to continue, look more consistent and belongs together
- simple layout
- the featured sections in landing page are okay
- "all the best with your progress"
WEEK 15
General Feedback
- Submission extended to Week 16, 12th of January, Sunday
WEEK 16
Submission of Task 3 & 4
REFLECTION
Experience
In this task, I learned how to create a low-fidelity app design in Figma. To be honest, I was quite stuck at first—something that happens often with almost every assignment. I tried starting early, but I always seem to struggle with coming up with ideas until it’s close to the submission deadline, which then forces me to rush. That’s usually when the ideas finally start flowing.
Creating the Lofi design was confusing at first, especially when planning the pages. I felt lost and wasn’t sure what to include or how to link everything across the frames in the prototype. It took me a while to understand how the low-fidelity prototype should look and function. For example, at first, I created multiple frames for what was essentially just one scrolling page because I didn’t know how to apply scrolling effects. I hadn’t watched any tutorials, so I was figuring it out as I went along.
Fortunately, one of my old classmates checked in with me, asking about my progress and offering to help. I was honest about falling behind, especially since the deadline was approaching, and I had been staying up really late trying to design the prototype. They kindly taught me how to add scrolling effects and create components. Although it was a bit confusing at first, once I understood the process, I was able to apply these skills to other pages as well. This saved me a lot of time, and I’m genuinely grateful for their help—it meant I didn’t have to spend hours watching tutorials.
Although I didn’t show much progress at the beginning of this task, I’m glad that Mr. Zeon didn’t pressure us during consultations. He kept things light-hearted and occasionally joked about us not attending his classes (which wasn’t true—we attended all of them!). All in all, the experience was challenging but rewarding, and I’m glad I was able to overcome the initial hurdles.
Observation
Based on the usability testing, I noticed that the users struggled with understanding the low-fidelity app design. It was quite confusing for them when I tried to explain the steps for the testing. Putting myself in their shoes, I realized I would likely feel the same. Navigating the low-fidelity prototype was challenging due to the lack of proper images, detailed descriptions, and product visuals. The plain colors and minimal design made it harder for users to identify and interact with the elements effectively. This highlighted the need for clearer visual cues, even in early-stage prototypes, to make the experience more intuitive.
Findings
Through usability testing, I discovered that users found the low-fidelity prototype challenging to navigate due to the absence of detailed visuals, product descriptions, and clear labels. The plain color scheme made it harder for users to differentiate sections and understand the flow, highlighting the importance of incorporating basic visual cues even in early designs. Additionally, this process emphasized the value of collaboration, as guidance from a classmate helped me implement features like scrolling effects and components, which significantly improved my design skills. Overall, the testing revealed the need for more intuitive layouts and better contextual elements to enhance user understanding and interaction.
QUICK LINKS
Comments
Post a Comment