APPLICATION DESIGN FINAL PROJECT & E-PORTFOLIO
Emily Goh Jin Yee / 0357722 / Bachelor of Design (Honours) in Creative Media
Application Design I/ DST60504 / Section 01
Final Project: Hi-Fidelity App Design Prototype & E-portfolio
TABLE OF CONTENTS
1. LECTURES
2. INSTRUCTIONS
3. TASKS
4. FEEDBACK
5. REFLECTION
INSTRUCTIONS
TASKS
FINAL PROJECT: HIFIDELITY & E-PORTFOLIO
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.
- The browse product on specific category button:It was highlighted as an issue by Qantas, who mentioned that its black color made it look more like a title than a clickable button. Similarly, Mindy and Suet Yee commented that the button was not very noticeable, partly due to its small size. To address these concerns, I adjusted the button size to 13pts and added a shadow effect behind the box. This change helps the button stand out more and makes it visually clear that it is clickable.
- Add to Bag ButtonFor the high-fidelity app design prototype, I made the "Add to Bag" button interactive, ensuring that when clicked, it provides immediate feedback to the user by showing that the product has been successfully added to the bag. This functionality enhances the user experience by making the action clear and reassuring the user that their selection has been processed.
- Voucher Application BarIt was also mentioned that the voucher application section was too small and hard to notice, even though it used a bright color to attract attention. To address this, I resized both the box and the font, making them slightly larger to improve visibility and ensure users can easily identify and interact with it.
- Loading icon:I added a loading animation to indicate when the payment is in process. The previous design only had a static page with a non-functional loading icon, which could confuse users. The updated animation provides a clearer visual cue, enhancing the user experience by ensuring they understand that the payment is being processed.
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
For this Final task, I truly felt that the process was extremely tiring since I had limited time to complete. Working on the high-fidelity prototype was a step up from the low-fidelity design, and I could see how much I had improved in terms of understanding the flow and functionality of app design. Translating the wireframes into a more polished, visually appealing version was both exciting and challenging. I had to focus on details like color schemes, typography, spacing, and imagery, which required a lot of thought and experimentation to ensure everything felt cohesive and aligned with the Watsons branding.
One of the main challenges was choosing the right color palette. While Watsons' branding uses green, blue, and pink tones, I realized that these colors, especially when paired with gradients, could feel overwhelming if overused. After exploring Watsons’ logo and member card colors, I decided to simplify the palette and integrate the iconic pink to ensure price tags and other key details stood out. This decision significantly improved the app’s visual hierarchy and usability.
I also focused on usability improvements, such as ensuring product images were clear and placing key elements like the member card at the top for easy access. These adjustments made the app feel more functional and user-friendly compared to the Lofi version. I found this task more rewarding as I could directly see how small changes impacted the overall design.
Observation
During usability testing, users responded much better to the high-fidelity prototype compared to the low-fidelity version. The addition of colors, images, and proper labels made the app easier to navigate and understand. They appreciated how the discounted prices were highlighted in red and how the member card was prominently placed for quick access. However, some users pointed out areas where the font size or colors could be adjusted for better visibility. Overall, the feedback confirmed that visual clarity and intuitive layouts play a key role in improving user experience.
Findings
This task emphasized the importance of attention to detail in design, particularly when transitioning from a conceptual wireframe to a realistic prototype. Clear visual elements, consistent branding, and logical placement of features greatly enhance usability and user satisfaction. Moreover, user feedback proved invaluable, as it allowed me to fine-tune the design and identify areas for further improvement. The high-fidelity prototype not only strengthened my skills in Figma but also highlighted how thoughtful design choices can significantly impact the user experience.
Conclusion of the overall module
Overall, the entire process of designing the application gave me valuable insights into how app design and functionality influence users' purchase intentions and whether they might abandon the app. Task 2 focused heavily on user research, where I created user journey maps, architecture maps, and other frameworks. It was my first time learning such methodologies, and it broadened my understanding of how users interact with apps. Task 3 was more focused on building the low-fidelity prototype and starting to visualize the app's structure, while the final task brought everything together into a cohesive high-fidelity design. Seeing the outcome of the final task was such a relief—it felt incredibly rewarding to see all the hard work throughout the semester come together. I’m genuinely glad that I stuck through the challenges and completed the project successfully.
Last but not least, I am truly appreciative and deeply grateful to have had Mr. Zeon as our tutor. I genuinely don’t think I could have successfully completed and passed every task without his constant support. He was always generous in giving us more time to complete our work, often offering extensions that made a huge difference, especially for students like me who tend to progress more slowly. His patience and understanding were unmatched—he never scolded us, even when our progress was far from where it needed to be. Instead, he used humor to lighten the mood, which helped ease our fears and created a positive learning environment. His unwavering support and approachable nature not only kept us motivated but also made the entire process less daunting.
QUICK LINKS
Comments
Post a Comment