Passion project Figma

After making the sketches & getting the feedback I needed in LO3 / Passion project design, I started to work on getting the design in Figma. I started off with a blank frame and with the sketch next to me.

The first version of the sketch to Figma can be viewed below. If the Figma files don't work, see Landing page v1 and Card component v1. The landing page I tried to fully copy from the sketch to Figma. For the picture at the top, I went to the forest near my town and took some pictures with the camera I lent from school. Underneath the hero section is a section with the upcoming hikes. These will be placed next to each other and can be clicked to view a more detailed version. Under this are the "sponsors" and finally we have the footer.

After showing these 2 to my stakeholder she told me she wasn't the biggest fan of the cards so I went back and redesigned these. What I made now is 2 of the upcoming hikes and next to this a text area that tells you to click the button if you want more information. If the Figma files don't work, see Landing page v2 and Card component v2.

After showing this version it was good. The only thing I forgot to change was the sponsors. In the last version I removed the one we don't need anymore. If the Figma files don't work, see Landing page v3.

More information page

Next I made the more information page for when someone presses on one of the hikes. After showing the layout underneath, I also told her that I'm not a big fan of the colors just yet and that I made a change to the form on the right. What I want now is for the main information to be displayed there but if you want to sign up for the hike you have to do so via e-mail.

I want it so that when you sign in, you open the mail app of choice and a pre defined template will be written out for you to just finish with the amount of people and the names as this was a required feature. If the Figma files don't work, see More information page v1.

She agreed with this method but only told me that I should switch the date and time around, so I did this is the final version. If the Figma files don't work, see More information page v2.

During the entire design process, I kept asking my stakeholder if she agreed to the design I made and made changes accordingly. At the end when I made the designs I went back one final time to validate the design. The feedback I received was: The design is there and looks a bit like what we had before, but I don't mind this. We will schedule a meeting with Jos and ask for his opinion there. If he or I have any thoughts of anything we'd like to change, we can always give them then.