To create an app prototype using Figma for an app that allows users to order locksmithing services, view locksmith rates/skills and allows you to order locks/replica keys online.
Before we begun with the prototype section of the class, we were taught the basics of the graphic design tools that we were using for the assignment. As a challenge/test, we were tasked to create an app icon for the app that we were assigned to before we were allowed to start with the prototype. In a span of 1 week, we had to create 2 icons for the app. I created these 2 icons, the first one (left) is which I spent my majority of the time on, and the second one (right) which I spent about 2-3 hours on. I had a vision for the second one, but it didn't work out.
We started visualizing the design and we first came up with a really simple design for the app. It was a basic design that had simple modern bottom navigation for the app. We chose the modern bottom navigation because almost every app uses this and it has better useability. We chose to add a home page, a store page, account page, and the service request page. We weren't sure on the contents of the service request page and the home page, so we researched and found out as much as we could about the services the locksmiths offered and how to book them on their websites.
We made a lo-fi prototype with not much content and a basic layout of what the app would look like, and what content was supposed to go where. The low fidelity prototype looked like this:
Once we had an established design layout for the app, we went ahead and created the design system for our medium/high fidelity app that we had to submit for our final presentation for the class. Our design system consisted of following things:
We went ahead and established the colours that we would be using for our app prototype. The colours we chose are complementary colours that look better when used with each other. Our colours were:
We established the font family that we would be using for our app prototype. The font family we chose were easy to read at any weight and was simplistic looking. The font was Inter and it looks like:
We created the components requires to make the majority of the app and divided them into groups. The final design components system had branding elements, buttons, nav elements, info elements, etc. The final component system looks like:
The final medium/high fidelity prototype with almost every screen made and interactable looked like this:
