In this 4 part blog, I will document the process of my app from low-fidelity wireframing on paper to its final high-fidelity prototype on Figma.
Part 1 of this blog will document the first function of my app - The donation/adoption function.
To save myself some time, I did not do low-fidelity wireframing sketches for similar screens ( eg. mirco interactions where some information changes but the majority of the visual and layout remains the same). I also did not do low-fidelity wireframing sketches for simple screens that came to my mind while I was prototyping in Figma; however, the majority of the important screens in each function’s main user flow are sketched and wireframed beforehand.
I did 3 different versions of the home page; the home page needed to have a spotlight fundraiser, the user’s adopted animals (which the user can click on to go into their adoption hub) and the section displaying the collective impact of the users.
In the end, I chose screen version 3 (the right-most screen). This is because the other 2 screens have the user’s adopted animal section at the top of the page; since the top of the screen is what the user will first see when oping the app, a long-time user who knows their adopted animals well does not need adopted animal section to the be first thing they see every time they open the app.
Version 3 has the spotlight fundraiser function at the top, and the spotlight fundraiser theoretically will change every week. This should provide the user with some new and fresh information when they open the app.
When I first started to prototype the home page on Figma, I had a really hard time adjusting the spacing and sizing of each element so that they all fit together harmoniously. This resulted in me trying out different loose prototypes in Figma till I found the perfect balance.
( Trying out different spacing and size arrangements on Figma )
( final result )