Security access app
Project from 2022
Security is an application developed by Grieg Connect that provides users with necessary permits to visit restricted areas in ports and terminals all around Norway.
My role as the only designer on this project focused on creating a mobile experience for port and terminal visitors, with an easy way to send applications for review and view their active permits and access cards at a moments notice.
Kick-off
The project started with our team lead introducing us to the project statement. That we would bring some of the core functionality of Security’s web app into native iOS and Android apps. Many users of Security consist of truck drivers, delivering or picking up stuff from and to the ports and terminals, or third party personell doing maintenance and such on site.
The scope we started with was:
A way for the user to send applications for review from the mobile app
Ability to view permits which the user has received from the PFSO (Port Facility Security Officer)
User settings
App settings
Notifications
I usually start every project with a session of brainwriting, just dumping everything that’s on my mind surrounding the challenges, any question or idea that I might come up with, and I keep the brainwriting going throughout the project period.
Personas
There were mainly 2 personas we had to keep in mind for this project:
Visitors: Truck drivers, maintenance personell, service providers etc. They would mainly use their mobile phones for sending applications and using permits / access cards in the app to access the restricted areas.
PFSO: The person in every port / terminal responsible for reviewing applications sent in by users. They would accept or deny every application they receive in the Security web solution for desktop.
User flows & IA
I mapped out the flows and information architecture as it made sense straight away, while maintaining the conventions we’ve established with the web app. I used new functionality in FigJam such as sections to group everything clearly.
Wireframes
After mapping the flows I had enough to start testing different concepts in the Concepts app on iPad by hand. That’s the quickest way for me to visualise the ideas I have in my head. I created wireframes for all aspects of the app, and annotated the important parts.
Hi-Res designs
After gaining a clearer picture of the direction we were willing to go I started testing out some higher resolution designs in Figma. I’ve used our component library and Figma’s Autolayout features to quickly iterate through different alternatives. I’ve kept a consistent dialog both with our Head of Design and the Team Lead on what solution they liked most.
Prototype
While working on designs in Figma I usually tend to create prototypes there and then on the solutions which I believe will make it to the final product. That helps me to see the interaction clearer, as I’m also able to test the prototype on mobile devices with the Figma app. You can check the prototype out for yourself here, just click the Fullscreen icon in the top right corner.
