The last thing I had to do to finish the design of the app was to prototype it all in Figma and actually make it work and interactive. It was relatively easy to get all of the screens joined together and working, as I have done plenty of this in past projects.
The first thing I done before prototyping was to make sure that I created components. This was done throughout the designing process and finalised before starting prototypes. A component library is so important to have in Figma, as it makes it much more efficient when designing lots of screens. It helps the design stay consistent and cohesive when using re-usable components throughout. Using variables was also helpful, allowing me to change a lot of elements at once and having more control over the design. I also organised my components into sections to make it easier to navigate.
Adding overlays was a key part of the prototyping process. I was really trying to focus on making it smooth and intuitive. Using a top bar the user knows that they must drag or press above it to get off of it and go back. On mobile this feels really intuitive and all users who have used an iPhone will know what to do. Darkening the background also helped make it clear what is foreground and what is background. This follows the Gestalt principle of figure-ground. In this particular overlay the user will press the toggle buttons to turn on/off settings, or use the time buttons to change the time. To save the changes that they made, the user can simply press the red tick, and know that their changes have had effect. Using red throughout the design as the CTA button, this pattern follows in all of the screens to help users understand where they need to press to do key actions.
On the sticky note screen, when the user presses on one of their sticky notes, two buttons pop up. One of them is the edit button, and the other delete. The edit button takes them to a page where they can make changes to their sticky notes, and the delete button clears the sticky note off their board. I thought that it was a good idea to have these buttons only pop up when the user presses on the note, and not to have them on the screen permanently, as this could , make it clustered. Using boolean variables, I was able to prototype the buttons so when the sticky note disappears, so does the buttons.
An important part of interaction design is feedback. This is because the user needs assurance that the action or task they have just done actually has done something, so providing them with feedback is important. One place that I done this was after the user successfully adds a sticky note. Once they get taken back to the sticky notes page, there will be a small message in green at the top right of the screen to say that they added a sticky note, along with a tick icon. This gives the user assurance that their action has been completed successfully.
