Yoti is an identity verification platform. Their Doc Scan tool is a whitelabel cross-platform tool businesses can use to perform identity verification.
My role as a product designer was to support the team following their MVP release. This involved designing new features, building up their design systems, and crafting design assets for both business and marketing use.
Delivered realistic prototypes that showcased upcoming features, to be used in talks with potential clients.
Sped up delivery of new features, made it easier to maintain consistency in designs,
The Doc Scan tool runs on Android, iOS, and responsive web. From a product design perspective this gave us many challenges. When creating new features, for example, we had to ensure the experience was consistent across platforms whilst also remaining true to each platform’s own unique needs and behaviours.
Building a design system
The library setup for Doc Scan used the same design tools as the rest of the products at Yoti; Sketch, Abstract, and Zeplin. The key difference for us was making something that worked across all platforms without too much manual work for the product designers.
Making base components that could be adapted for each platforms’ individual design specs meant less maintenance work for us which allowed us to work more quickly. It also kept our designs aligned when working on different design tasks.
Communication between designers and the rest of their team is fundamental to a quick and efficient product workflow. From my experience on this project I wrote an article about design handovers.
Doc Scan is built to run on Android, iOS, and websites (desktop and mobile). The same journeys were ported onto screens with different sizes and interactivity. For example, on Android and iOS we could capture document photos automatically, but on web we needed to add a button for manual capture.
When testing Doc Scan, we wanted to see how people would react when using the device camera. Because of this, our prototypes also needed to utilise the camera view, simulating the real functionality as closely as possible.
I built several high-fidelity prototypes using Origami Studio, adding animations to simulate photos being taken. Having prototypes that worked this way allowed us to capture more accurate data on user behaviours in our testing sessions.
The video password is yotidocscan
I also used prototyping to evaluate design components. A lot of the functionality was around the camera, so I wanted to make sure everything I designed was tested for this.
Here, I built a prototype with a camera feed. This helped me see if the overlays were visible over different light levels, as well as if ID cards would fit into the space when held up.
The video password is yotidocscan
During my time on the team, we conducted user research on both the desktop and mobile experiences. We recruited people who’d used gambling sites before because that was one of Doc Scan’s biggest use cases at the time of testing.
Over the two days of testing we gained the following insights:
- Asking people to take photos on a desktop is trickier than on a phone. This had implications for our business targets (many of our clients were desktop-first) and user experience (how do we improve the ergonomics?).
- Willingness to hand over personal data varies with context. The people we were testing were gamblers, used to giving over their payment and ID details to access games. This went against our previous findings from testing other types of people,
These insights helped us to validate our design choices further down the line. For example, the difficulties we saw for people using the desktop solution made us realise that we needed to pay more attention to the experience than we previously thought.
Because Doc Scan is a whitelabel product, we have little direct control on how users choose to use it.
I wrote a guideline document that our customers could refer to to make their integrations more user friendly. This involved explaining how the process worked in clear and simple terms.
I also created visuals to aid the text explanation. You can see more of my work on this on the Yoti developer docs.