Below is a screenshot and some images of my lo-fi screens. I found this process very enjoyable because it was the part of the project that I was looking forward to the most. Transferring what was done on paper onto my Figma was quite relieving I must say as I felt as though the most fun part of the project had just began. Doing lo-fis inspire new ideas and help me figure out how I really want to place certain elements. It is also in this phase that I create a design system for the interface; I do this as I make my lo-fis.
During the digital development phase I had in mind to create a nav bar that would hold the name of the screen and the icon whenever the user taps on it; as I went along I realised this was unnecessary and also the animation wasn’t as smooth as I had anticipated, hence I abandoned that idea went for a simple approach, this conclusion was arrived at with the advice of one of my peers whom I trust.
I used the colour checker in Figma to correct an issue I came along an accessibility issue. This was thanks to one of my peers who brought it to my attention that Figma has a built in contrast checker. I used it on all texts and backgrounds and what I realised was that the shade of green I had was too bright and had to be changed to a darker shade in order to make the text as visible as possible; I followed through and changed the hex code across all screens and saw a major improvement. I have him to thank.
This is the component that I fabricated for my “change hours” or “cancel shift” screen. I initially created this idea in my head and head to create it on Figma to see if it would actually work. I did it by initially making the “yes” and “no” button a component for the cancellation section; I then used the same design element (not component) to create the change hours section, I had to change the design element for the second variant so that it would say “yes” and the starting time and ending time would show up for the user
These are the components for my nav bar, the process of making this was fairly easy, I grouped my icons with their corresponding text and placed an auto lay out on all of the, to ensure that they were evenly spread out. I decided to copy and paste each nav bar to the corresponding screens because this way it allows me to make changes to all of them by making the changes on the original component.
This search bar also an easy component to create. I really enjoy conjuring up my ideas on Figma, I find it quite exciting because I see them all as challenges for me to overcome. There are times when I create certain components and upon testing them I realise how futile they are, that’s when I take a step back and try the norm way.
For this component all I had to do was create a variant of the search bar; I then extended the vertical length of the search bar and added the texts and white squares in there. But prior to placing those white squares in there I made them components that turn green when you click them, and then placed them in the the search bar component.
This was the first component that I created. The first version of this was made during my the lo-fi stage of my project because I wanted to se if it would be possible. Upon making the final version I was very happy with how well it turned out, it is smooth and aesthetically pleasing. The component briefly showcases what the tile is about and after a second the opaque layer slides to the right to unveil the content.
This component was probably the only one that I found more challenging than the rest. It all begins with the notification and settings & profile icons. The squares the icons are placed on were then expand both horizontally and vertically,; but when I did this the settings & profile icons were on the same layer as the notification icon, so what I had to undo everything and restart by grouping all the elements to go so they wouldn’t be on the same layer. Afterwards I added the necessary content in each square.