A web application that allows companies to verify a customer’s age online.

This POC entailed a comprehensive evaluation of the implementation of this technology into different industries, including insurance, banking, and cannabis. For simplifying purposes, the latter will be the focus of this page.

Step 1: Requirements Gathering

I conducted stakeholder interviews in order to get a clear idea of the requirements of this project.

Stakeholder Interviews

This included interviewing front-end developers, architects, product managers, QA testers, and vice presidents of product. Below are the main insights I gathered:

  • The user flow needed to have age verification at both the entry and checkout points.
  • The user should see a pop-up with age verification request immediately after entering the website.
  • The pop-up should have a QR code as well as instructions on how to use Verified.Me for age verification.

Step 2: Drafted Initial User Flow

After a few rounds of feedback we settled on the user flow below.

Step 3: Designed Wireframes

With the information gathered from the interviews and the user flow, I proceeded to draft low-fidelity wireframes.

Step 4: Prototype + Interview Iterations

After drafting the wireframes, I went back to interviewing the stakeholders and decision makers of the project to ensure we were going in the right direction. When the team was happy with the design I went ahead and designed the prototype. After a few iterations the design was handed off to the development team for implementation. A video of the final prototype can be found below.

Step 5: Development Team Hand-Off

Worked closely with the development team and answered their questions. Tested the live product and provided feedback to the dev team when necessary to ensure design was translated effectively into the live product.

Learnings

Looking back at this design I can see many potential improvements when it comes to accessibility. For example, some of the graphics used do not conform WCAG 2.1 AA.

Role

  • UI/UX Designer

Team

  • Product Owner
  • QA Engineer
  • Front-End Developer
  • Full Stack Developer
  • Architect

Role & Tools

  • Adobe XD
  • InVision
  • Miro
  • Illustrator