WEEK 12 & 13: Presentation and Progress

-

 Date: 23 - 30 January 2024


Presentation Slide:
For the presentation, I have prepared a presentation slides to show my classmates and my lectures about my project and the progress that I have so far. 


Link to the Presentation Slides.


/ / /


Wireframe Progress:
I managed to finished all the lo-fidelity wireframe, which has the total of 48 pages. Most of the pages are pretty much depended on a lot of placeholder for images. This means that I might need to spend more time to create a lot of visuals for each pages. With this, I can finally move on to prototyping in ProtoPie while slowly build design assets for this project.


/ / /


3D Design Assets:
I have tried to use Spline, however I was a little bit confused with the software. Because I was a bit rushing to make an attempt to 3D model my design assets. So, I decided to play safe and try to model in Blender (a software that I am also currently learning in different subject in this semester) by referring to my art direction that I have shared in my previous blog.


When I did it, it seems like the outcome is a little bit too realistic from what I initially planned. It supposed to be more low poly and rounded. The lighting is also not that great, compared to my references. I asked some of my friends about my attempt, and they all agreed with me. So, after a lot of thinking,  I decided to maybe give another try to use Spline again and see if I can achieve what I wanted later in upcoming week.


/ / /


Prototyping:
Since I have prototyped the onboarding pages last week, I decided that I should pick some of important pages to focus on so that I can show my prototyping progress in the presentation. After prototyping it, I will be able to test the prototype in the Desktop preview and also Mobile Phone preview. To properly show how it will look like as a mobile app, I will be showing the prototype in the Mobile Phone preview.

The first page section that I picked is the App Loading and Onboarding page. I have basically explained on how I achieved the interaction in this prototype, so I will be only showing the outcome of it in the Mobile Phone preview. It works just like how I wanted.



For the second page section I picked is the Login page where I apply real text input interaction on the device. This means that I can prototype this page to bring out the device's keyboard so that users can type in their details in the Login page. For this interaction, I managed to achieve by watching a tutorial in YouTube by Soda design. She explains on how to use the text input and also how to make use of it's settings, e.g how to make the text input change colors when the users are tapping the text field area.



The third page section that I picked is the sealing the capsule page. This page is where users can hold or long press the button to 'seal' the capsule, and some animation of the place holders will be played accordingly. I use the 'Long Press' interaction and 'Vibrate' haptic feedback in the prototype. These two interaction are pretty easy to setup and use after reading the documentation and examples that had provided by ProtoPie in their websites. 


There are some settings that can be changed, depends on what we want to achieve. The only thing that needs to be taken note is that the 'Vibrate' feedback will not be triggered if the prototype is opened in Desktop preview. It needs to be in Mobile Phone preview. Plus, there are more settings of the 'Vibrate' haptic feedback for iOS devices compared to Android.




The forth page section is the Home page. The top of the Home page has a feature where users can press the card to regenerate the daily motivational quotes. I achieve this interaction by using '3D Rotate'. I learned this, again, from another Soda design's YouTube video. This tutorial helps me a lot because she also explains how to change a certain properties once the card is 'flipped'.



Lastly, the fifth page section that I picked is the swipe up to the sea page. This page is where users can swipe the capsule in order to throw it to the sea, and it will play some animations once it triggered. In this page, I use the 'Fling' interaction in the prototype. I use this interaction also by reading the documentation and examples from the ProtoPie websites.


/ / /


Reference Link(s):

Soda design (2020). ProtoPie - How to make login form interaction using Input Label with ProtoPie, Intermediate. YouTube. Available at: https://www.youtube.com/watch?v=AKpXfyMVwmI [Accessed 23 Jan. 2024].

ProtoPie. (2024). Long Press - How to create Triggers | Interactions | ProtoPie Guide. [online] Available at: https://www.protopie.io/learn/docs/interactions/triggers#longpress [Accessed 23 Jan. 2024].

ProtoPie. (2024). Fling - How to create Triggers | Interactions | ProtoPie Guide. [online] Available at: https://www.protopie.io/learn/docs/interactions/triggers#fling [Accessed 23 Jan. 2024].

Soda design (2020). ProtoPie - 3d card rotation with color selection, Advanced. YouTube. Available at: https://www.youtube.com/watch?v=BzfEOAP4BWQ&t=18s [Accessed 15 Mar. 2024].

Comments

Post a Comment

Popular posts from this blog

WEEK 18: Final Submission

-
Image
  Date: 12 March 2024 Presentation : I prepared presentation slides for the presentation on the final week. Link to the slides . / / / Rationale : In today's fast-paced world, grief is a universal experience that affects individuals in profound ways. Whether it's the loss of a loved one, a job, or a significant life change, navigating the complexities of grief can be overwhelming and challenging, especially to those who experienced it for the first time. When experiencing grief, people often go through a range of intense feelings such as sadness, anger, guilt, and confusion. Many people find themselves struggling to cope with these emotions, leading to the development of unhealthy coping mechanisms which cause more harm than healing. Understanding why individuals may resort to these behaviors is crucial in designing effective interventions such as a grief-focused app. After conducting a user research, there are some insights that could lead some people to resolve the destructiv...
Read more

WEEK 10 & 11: Design & Prototyping Phase

-
Image
  Date: 9 - 16 January 2024 Lo-Fidelity Wireframing : In these two weeks, I start to focus on completing the pages as much as I can before Week 12 for the presentation. I personally felt like I was a bit struggling with planning the layout of each pages because I have to keep on changing and experimenting on which layout looks more easy on the eyes, and if it's suitable and consistent with other pages that is already designed. It is also because I might have a lot of pages for each features, so it takes more time to actually plan and experiment with what layout would suit them better. / / / Wireframe Prototyping : At the same time, I started to import some of the wireframe that I have finalized into ProtoPie via a plugin available in Figma. Then, I start by prototyping the onboarding pages first.  I wanted to make the onboarding pages to be able to swipe left and right, but also to make the pages scroll by itself when user presses the arrow button. So, I managed to find a...
Read more

WEEK 7: Do Good Project Proposal

-
Image
Date: 19 December 2023 Learning Plan : This week I refined my learning plan based on the feedback that I received from last week. I decided to focus on improving my prototyping skills by using an advance prototype tool, which is ProtoPie. ProtoPie is a prototype tool that is widely used by experts in the UI/UX design industry. It offers a lot of features that other softwares don't have. My current prototype skills is slightly above average because of previous semester subjects, and I find myself to be interested in leveling up my skills in this area. I finally be able to finalize my Phase 1 and Phase 2 with the new changes that I have made. I researched on how to make my learning process easier and smoother by exploring resources that is available online. There are a lot of platforms that is useful for me to look forward into when I am learning the new software. I also prepared myself for this learning plan by reaching out to the ProtoPie support team to apply for the student plan....
Read more