Enforcement Challenge Design @ Arkose Labs
Role | Lead Product Designer
Duration | 1 year+
Project Contributions | 54 customer designs implemented into live login and sign up flows
Tools Used | HTML, CSS, JSON, Figma
Background
Arkose Labs is a massive leader in the fraud prevention space, and is one of the most exciting companies I’ve had the opportunity to work with. I get to help fight the bad guys that partake in account takeovers, spam from abusive bots, and payment fraud. We have powerful machine learning algorithms that help detect these bad guys, and in turn, create an effective response strategy to challenge bad traffic.
I get to help implement the designs of our customers into what we call the “Enforcement Challenge”, which is a captcha challenge within the Enforce side of our solution. Customers can take full advantage of the UI of the captcha, where we take inspectable mocks from the customer and bring it to life with a little JSON and CSS. I helped craft the design & implementation of each Enforcement Challenge that fit the look & feel of our customers, whether they are in the gaming, financial, media, retail, or technology industries, while creating an approachable and friendly user experience.
LinkedIn Use Case: Design Process
Customer Scoping Meeting
It’s exciting to able to work with customers directly and enable them with the tools customize their user experience for the Enforcement Challenge. The process begins with an initial scoping meeting, where I go over requirements of our solution, explain what can and cannot be customized, provide examples of our string translations capability (supporting 109+ language translations), go over WCAG requirements to make sure color contrast, responsive design, adaptable text size, and hover / focus states for CTA buttons are all in compliance and look seamless across different browsers and devices. I provide examples of what we have done in the past to really show that the customer can take full advantage of the UI we offer.
Collaborative Base Figma File
From there, we work with the customer on mock-ups that make sense for both their brand and our implementation, using a base Figma file. I proceed with the actual design execution, where I tweak the front-end code to look up to spec with the mock-ups. I run through and end-to-end testing plan to make sure the Enforcement Challenge has been properly QA’d, then work with the customer to get any last edits in for a final approval.
Final Implementation
From there, I’ll configure the styling I created for the customer’s development and production keys and voila! The customer has a fully branded Enforcement Challenge they can use on various user flows, such as a Sign Up flow for account creation or a login flow. Check out LinkedIn’s below!
Takeaways
LinkedIn was a really fun, yet challenging use case I worked on. From a branding perspective, it was very easy to implement things like typography, color patterns, and CTA hover/focus states on buttons throughout. However, early on into the implementation process, LinkedIn requested both a light mode and dark mode styling, to accommodate various users. There are few technical limitations we had to work around such as shared elements within both the light and dark mode with things like the loading screen the user sees prior to the presentation of the captcha challenge, the navigational elements at the bottom of the captcha, and the Audio Challenge we provide for users who are not able to complete the visual challenge due to accessibility issues.
Not only does the Arkose Labs platform protect the good users of the world, but we also push to create accessibility for as many online users as we can. Many detection/fraud prevention platforms only have one standard way to prove you’re not a robot, but in reality, many people find it to be a difficult user experience to get through due to accessibility limitations. I’ve been able to help contribute to our solution in following WCAG guidelines and constantly improving the look/feel of our captchas to integrate things like screen reader technology, color contrast for various CTA buttons, and navigational elements of the Enforcement Challenge.