The
Police
Clearance
App

Premise.

A potential client was looking to create an app from an existing set of data, to target a new set of their target audience.

A beautifully corny name needed to be selected for the codename for the project.

Police  clearance. PC. Nope. Police verification. PV. Police Verification App? PVA. Sounds like something I get from a hardware store.

Verification by police.

Veripol.

Done. Codename complete. Project Veripol.

How it ended:

TLDR: There is a video showing usability right at the bottom of the page.

 

How it started:

The initial requirements.

Some details have been redacted due to NDA disclosure. 

From the client brief, the app had 6 requirements:

  1. It needed to be accessible from the app stores and able to create a secure login profile.
  2. It needed to capture basic demographics and contact information.
  3. Terms and conditions should be easily accessible and be confirmed by an OTP.
  4. A reason for the clearance check.
  5. Loading of payment details.
  6. Capturing extra biometrics.

 

I put things to paper. It was drilled into me when I was reading architecture. When doing something by hand, you spend more time on it. You invest more. Event if it’s a chicken scratch stick figure. It’s your chicken scratch stick figure.

 

#1 is boring, so straight into some juicier stuff.

Demographics are more fun than saying ‘Availabe in the app stores’. 

The chief clearance requirement for a South African will be their South African identity number. 

A South African ID number is well designed. It starts with a date of birth (D.O.B.), and has syntaxes for gender, citizenship, as well as some historical data that is now only used to confirm the checksum.

For anyone not with a South African ID, an alternate field should be selectable. The typical alternative would be a passport number.

One name is required. Two names are often prefereable. Your name may be Fredrich Wilhelm Heinrich Schullies, but people just call you Fritz.

The next is the second required field: Cellphone number. This is where your One-Time Pin (OTP) authentication will be sent to. As this is an app, it’s assumed that you have a valid cellphone number. 

Email is the final field. Not required, as many people may not have one in South Africa and many users rely on cellphone numbers over email addresses for communication.

What you’re here for: the terms and conditions!

Okay, where’s that app store design that I was ignoring one step ago? 

The requiements asked for an OTP, which would be carried out by SMS.

These T&Cs would need to be POPI and GDPR compliant, as a given standard.

Being a South African product, other languages would be vital. There are 13 official languages, but it would be great to have at least the top three to five available.

This would make for some early developer headaches, asking them to design a product around language localisation.

Finally, and a bonus that wasn’t asked for, was the request for a digital signature. Any touch-screen phone can offer this, either via the app, or as a canvas for an HTML type page.

See, terms and conditions can be sexy.

#4. The reason for the clearance request.

This is where some more research was required, so after wasting three lines to show how much I like Font Awesome, I did some thinking.

Educators with SACE are required to have a police clearance with their application.

I’m really hoping that security agencies require police clearance of their staff.

Medical and mining practices have high levels of safety required, so would be a good target demographic.

Finally, anyone travelling abroad and requiring a VISA typically requires a police certificate.

Added to that, it would be a great addition to any jobs forum or recruitment agency, where a premium posting could include a valid police clearance.

#5. There is no such thing as a free lunch.

Somebody needs to foot the bill.

There are a number of digital options available, such as credit and debit card transactions, digital merchants such as PayPal and more locally, PayFast and PayPort.

These local companies offer something that the international companies cannot, which is physical payments. PayFast allows for payment at a Checkers stores, and PayPort at Pick n Pay. This opens up a huge market of people, who rely on phyical cash rather than digital currency.

South African cellular service providers also offer payment options, where airtime can be used to pay for services and products.

The most important feature though, is the ability to track a payment. If someone is able to hand over money, then they need to be able to see that it has been received as soon as possible.

It’s so important, it has two exclamation marks!!

#6. The Biometric Face-off.

Technology is advancing at a rapid rate. Most cellphones produced today have a fingerprint scanner, and many offer advanced biometrics.

This is very definitely device dependent, and not shareable. A fingerprint captured on a device is only stored on the device, so cannot be sent to external parties to be verified.

The same can be said for facial recognition, although some progressive companies have made rapid enhancements to allow for this using a standard camera.

Other options such as Google and Apple’s voice assistants offer voice recognition, but again, these are used primarily to access the device, so will be wonderful if used to access the app quickly (instead of the login screen). With all of the security requirement though this will be tricky to implement into the physical police verification.

It’s only a matter of time before cameras on phones are able to scan retinas to allow access, though there isn’t this technology in a police clearance, so is really only needed as a future pipeline dream.

Part two:

Less yada yada, more bad drawings. 

Chicken scratch stick figures.

Earlier I stated that putting stuff to paper with an actual pen is useful. I stick by that, even when it’s not neat. Especially if it’s not neat. 

Some people refer to them as napkin sketches.
Think of something that takes seconds to draw, so that it can be discarded without pain, or worked upon without huge design constraints.

The design

In terms of User Experience, the overall feel of the app is almost as important to how it works.

I’m a fan of clean lines and a good use of negative space.

For this app, my thoughts were black and white for a colour scheme. You know, because there shouldn’t be a grey area when it comes to police clearance. Plus, it would be easier to have a dark mode, which still seems to be the rage with the kids.

An clean look with minimal colours, and a straightforward journey for the user.

Step 1: New versus returning user

This is pretty basic, and will be retained in the memory of the app, so will hopefully only ever be seen once.

That said, if this were a web app, it may become the splash screen, or that first screen that users see when loading the page, so it needs to be thought out.

Step 2: New user – Capturing the basics

Again, this is simplistic in design, only asking for a limited amount of details per page.

If the person uses their ID, their date of birth is pre-populated.

Asking for their name as per ID helps with identification, and having a preferred name is great to make the app and user experience seem more personalised, especially if your name is Fritz.

If the person uses a form of identification that doesn’t have a date of birth field, then this would become a conditional field to populate.

Step 3, erm 2B – OTP requirement.

This step is a requirement from the client. Making it as seamless as possible would be ideal, but may come with additional requirements:

By allowing the app to read SMS’s, the authentication could be done automatically. That said, many people crave privacy, and feel that any app that is given permission to read something will send every piece of data available back to it’s makers.

Ideally, the app only reads the SMS that arrives from the dedicated OTP sender, and fills in the content.

Otherwise, the user can just fill the OTP in themselves. This may well be the case for the initial versions of the app.

If this is the case, the app must ensure that it doesn’t lose the existing part of the application, forcing the user to type any information out again. There will be significant drop-off on use if this happens.

Step 2C – Optional extras.

The extra profile fields may not be required, so there should be a big ‘skip’ button if that is the case.

For the web-based app, email authentication may be preferred, so this may be introduced as an additional feature.

Step 3 – facetime.

If the user allows the use of their camera, a pofile image can be added to their profile. This could also be an image upload.

If looking to replicate an ID photo, giving clear and concise directions is required:

  • No smiling.
  • Remove eyewear.
  • Keep hair away from face.
  • Stop smiling.
  • No headgear.
  • Keep the camera at eye level.
  • Plain, light background.
  • Make sure there is no spinach between your teeth.

Step 3, page 2 – Gamify it.

Acting on people’s inert need to compete may allow for a more complete profile.

Many sites use this game-theory to entice a desired behaviour from their target audience.

By adding the ‘why’ you may also increase conversions to a full profile. By adding extra details to your profile, you’re showing transparency to a potential employer (or customs official).

This then speaks to the other end fo the spectrum – the person or company requesting the info. More information for them will help with their decision making.

The payment portal

Again, making the interaction as simple as possible will lead the user on a non-confusing journey.

The two major forms of payment will either be digital or phyical.

A third, unmentioned payment can be that of a coupon. This can be purchased by a potential or exisiting employer, or another party who manages the payment on behalf of the user.

 

The payment portal – Digital payments

The easiest way to do a digital payment is via a gateway that a company provides.

PayPal, PayFast and PayPort all have well documented API integrations which may allow for easier transaction, with the addition of the latter two also supporting the afore-mentioned physical payment portals.

Alternately, the development team can build their own payment portal, and hopefully save in terms of less fees per transaction.

This would also be the page to push to a cellular portal, if that is envisioned as a payment portal.

The payment portal – Analogue payments

Some people still only deal in cash, so a physical payment system may be a draw-factor for a large percentage of users.

This can also be for users who don’t want to share their digital payment details, and know that they are going grocery shopping anyway.

Many banks offer smart ATMs, which now also accept cash as well as dispensing it. This interaction would need to be handled with each banking institution, and will only be accessible via a certain selection of ATMs.

Payment tracking.

For some, this will be the most important step or feature of the app, as they will be able to carry on with life, knowing that their application is chugging along in the background.

A date is useful, as well as status, as well as the ability to request an updated. This last feature may be on a time-delay, as well as having a limited number of requests available.

This could also be a pro feature.

Profile details.

Feeding the gamification track, a full profile is a good page to show overall details about a user.

This would be the page that they navigate to, to change any details.

Along with their profile image, current details and captured info, their current status would be visible, as it’s the reason to get the app.

These details should be optional, and thus should be able to be skipped.

Digital, physical signature.

Rather than a digital signature that not many people understand, a hand-scripted signature should be available to be added to a profile.

This has been offered on courier apps for the past couple of years, and even a couple of WordPress forms allow for the addition of a signature in the form of a canvas capture field.

This would obviously need to be encrypted, as it is very personal to the user.

Although we do tend so sign our lives away at every security-gated complex anyway.

Part three:

Less what,
more who!

Personas.

The bread and butter of User Experience – Putting yourself in other people’s shoes.

Unfortunately, for this project, I wasn’t able to interact with any people due to NDA requirements, so had to pull from historical details from personas from the past.

Ideally, there would be interviews and interactions, though this would happen as the project develops.

Tina, the teacher.

  • Tina uses a basic smartphone
  • She has school WiFi for larger uploads
  • She’s insecure about data being sent online.

Tina needs to submit a clearance certificate yearly, and the certificate itself needs to be less than 6 months old.

Sam, the security man.

    • Sam has a basic phone, without any biometric-enabling hardware.
    • He has minimal access to data.
    • He has no credit card, and only a basic banking account without internet banking.
    • Sam prefers to pay in cash.

    Same needs to submit a clearance certificate yearly, although his employer is happy to pay for the new certificate(s).

    There may be instances where his clearance needs to be updated on a quarterly basis, to provide to external clients.

    Jimmy, the jetsetter.

    • Jimmy has a top-end smartphone. It has a fingerprint reader, as well as a depth-sensing selfie camera for face-unlocking. He uses his voice assistant on a daily basis.
    • He has little problem getting access to WiFi or cellular data.
    • He has a credit card, internet banking, and profiles on digital payment gateways.
    • Jimmy has almost forgotten what physical cash looks like.

    Jimmy travels extensively, and requires a police clearance certificate for VISA applications.

    Some of his business is last minute so he is willing to pay extra to expedite his applications.

    He may require multiple applications, depending on the VISA that he is applying for.

    Part Four:

    Who, what,
    where and how!

    Design ideas.

    Finally, I start digging into the look and feel of the app.

    This isn’t UI design. I’m not pushing pixels to the perfect space. It’s more a general look at feel, thinking about colour combinations and the general layout of the app, without being encumbered by a designer (yet).

    Getting something out myself will lay a good foundation for comparison for later iterations from team members with more acute artistic flair.

    Form follows function.

    This isn’t a designer app.
    It doesn’t crave a user’s attention.

    It has a purpose, and it should get that done in the most efficient manner, without distraction, but also, without feeling cheap and unfinished.

    Using basic colours will make the app more elegant than using the whole rainbow’s worth of colours.

    Accents then become more noticeable, and can conform to the client’s CI.

    As stated earlier, dark mode is still a thing, even if there isn’t conclusive proof that it is better on eye-strain over prolonged periods of time.

    Having the app translation ready with localisation options is needed, as well as having icons that can lead a person along if they don’t have a high level of literacy.

    Zulu is the most literate language in South Africa, followed by Xhosa, Afrikaans and only then English in fourth place. Sepedi and Setswana are battling it out for fifth position.
    (Source: Stats SA, Table 2. 12)

    Navigation.

    As with the rest of the app, the menu should be easy to use and intuitive to users.

    Fewer is better, so there are currently 5 items:

    1. Profile
    2. Status
    3. Update
    4. Request
    5. Logout

    The requests feature is an ideation for prospective end users. If I have the app, I can share clearance and details with another person who’s using the app. This may drive more users via association.

    Part Five:

    The wireframe

    From pen and paper to mouse and monitor.

    Using mostly Adobe XD,  I worked through the majority of the pages to find a flow of information.

    I’ll be showing comparisons of digital design compared to original thoughts, which will show additional insights gained, as well as ideas that stood firm.

    Talking points. 

    Addition of point #7:
    Maps to locations.

    For anyone needing to get their police clearance done, a set list of location should be available to navigate to via the phone’s Mapping app.

    Addition of point #8:
    Personas.

    Not asked for in brief, but a given for UX process.

    Talking points. 

    As per original

    No significant changes

    The typical persona, with middle of the range requirement.

    Talking points. 

    As per original

    No significant changes

    The lower range persona, with basic resources.

     

    Talking points. 

    As per original

    No significant changes

    The high end persona, with sufficient resources, using the app due to its convenience.

     

    Talking points. 

    As per original

    No significant changes

    White background with black text. Deep sky blue is used as the accent colour of choice.

     

    Blue is associated with trustworthiness and reliabiltiy, with light blue conveying peace and being a calming colour.

    .

    Talking points. 

    As per original

    No significant changes

    Addition of language selection on the bottom of the screen, though a small icon and abbreviations could be more effective.

     

    Talking points. 

    Changes

    Moved email as the primary form of OTP.

    This could also be selected on a previous screen as a default (SMS versus email).

    (Hover over the image to see OTP authentication screen)

    Talking points. 

    Changes

    No significant changes.

    Talking points. 

    Changes

    No significant changes.

    Talking points. 

    Changes

    No significant changes.

    (Hover over the image to see a screenshot of the SMS authentication)

    Talking points. 

    Changes

    No significant changes 

    Talking points. 

    Changes

    No significant changes 

    Instead of the dropdown, simple menu items are shown on the homescreen, with disabled options greyed out.

    (Hover over for localisation – Afrikaans language)

    Talking points. 

    Changes

    List show for clearance selection.

    This demographics selection may influence future questions asked and documents required.

    Talking points. 

    Changes

    List show for digital payment selection.

    Within this wireframe, physical payments were only available via SCode (Checkers).

    Talking points. 

    Changes

    After selecting a payment method, the gateway would commence it’s payment strategy.

    Talking points. 

    Addition

    After completing the payment, the user will be taken back to the home screen, and the menu will show that the application is processing.

    Hover over the image to see the cleared status.

    Talking points. 

    Addition

    A final look at biometrics that can be associated with the profile.

    Fingerprints are for device only (locked down by Android and iOS operating systems),

     Facial recognition is possible.

    Voice recognition is possible.

    A signature is a good way to capture a person’s authenticity, along with a visual snapshot of their Identification card.

     

    Talking points. 

    Addition

    A final look at biometrics that can be associated with the profile.

    Fingerprints are for device only (locked down by Android and iOS operating systems),

     Facial recognition is possible.

    Voice recognition is possible.

    A signature is a good way to capture a person’s authenticity, along with a visual snapshot of their Identification card.

     

    Wireframe

    Basic User Interaction (UI) touch-points

    User experience requires good user interaction. If I have something that is beautiful, but useless and confusing to navigate, people will not use it, or use it with much grumpling.

    Make is work, then make it pretty. Maybe.
    Pretty is very much person dependent.

    Conclusion

    Start to fin-ish

    Using mostly Adobe XD,  I worked through the majority of the pages to find a flow of information. Whilst this wasn’t a complete app build in any form, it shows a valuable insight into how the UX process can answer both asked and unasked questions.

    If taken further, it would be worth running the app wireframe past a few people, ideally within the specified demographics, to test the assumptions made, and pivot around the findings.

    Once the flow of the app is sound, a proper graphical overlay can be incorporated. By ensuring that the user interface is easy and uncluttered, the app will be easy to work for both the technical and non-technically minded person.