project[3]: Hi-fi prototype

todo:

Create a hi-fi prototype of the redesigned app

process:

ResResList (responsive, bidirectional, list)

This started out as an experiment to figure out if fully implementing the hi-fi prototype in code was possible. The first item on my list was this concept list I had in my mind, mainly due to me being hyper aware of the low information density in my prototype. Tangent — it definitely came from comparing some of the screens to their equivalents in Tasker. Tasker has a very utilitarian approach to design (using majority built in Android components), & makes little compromise for aesthetics. It was very apparent in screens like the properties screen, where 2 properties took up as much space as 4 in Tasker. Tangent over. With this very problem under the microscope, as well as the side urge to find a way to solve the responsive problem, I came up with the concept of ResResList.

As I started actually writing the implementation though, it got increasingly apparent that I was definitely not completing the entire prototype in code. However, having a frame of reference for a ResResList implementation was still high up in my priority, as there was no way XD could represent it anywhere closely.

The implementation of ResResList itself is split into two components: & . The implementation of the prototype's modules are split into two components: & .

I could so nerd out on & on about what, how, & why certain details were there, but today is not the day; just check out the repository.

Figure 1.1.1, Demo of a rough implementation of ResResList, 30/6/2022

Drawer, sub-button, list item editing

I wanted fancy animations. Fortunately I had fancy animations, so I shall show you.

Figure 1.1.2, Demo of the implementation of animations in “Notify”, 30/6/2022

The actual prototype lol

For this, I took the identified pain points from the last project & fixed them all up in Adobe XD. I did also implement a few more screens that I felt were apart of the app's core functionality. Whilst I was at it, hey, making things look prettier & fixing up some layout inconsistencies too!

final:

Figure 1.2.1, Organised notion with everything, 30/6/2022

https://ljslol.notion.site/ljslol/app1-project-4-prototype-fe813e17f763471e8def806bf2ac211f

Figure 1.2.2, Hi-fi prototype, 1/7/2022

reflection:

My experience was generally positive. The mix-media rojak approach to this project really does show itself to be different from the rest of my work in Application Design I. Whilst I did have some trouble getting everything up to tip top shape, finishing the rest of the project didn't feel like absolute hell.

I feel like, other than the practical skills like better svelte composition & Adobe XD utilisation, the largest takeaway was to simply to use tools that let you achieve what you want most efficiently. I could've definitely found a way to implement the full prototype in code, but I eventually found that doing it in XD was much more efficient, as breaking things by moving, adding, removing, was a lot quicker in something that was designed for it. I could probably even make the statement that using it improved my final outcome by not needing to worry about any nitty gritty. However, all that still doesn't excuse the limitations, & the fact that limitations are what drove me to explore less efficient options. Mixing a tool that's limited, with one that is not, but a lot less efficient, has genuinely been an eye-opening concept to me, however trivial it sounds.

Finally, it may be obvious to all that knows it, but I feel like I'll be utilising this approach a lot more for prototyping in the future, especially when it comes to tight schedules or limited skillsets. For that, I think I'd redo this project any day of the week.

🔎

project[4]