Turning visual content into seamless QR code replacements
Branding // UX + Product Design // App // Website - WordPress build
How do you bring a brand-new type of product to market? IRCODE’s technology is a fresh take in the age of AI – using machine learning algorithms, they turn any image, video, or ad into an interactive touchpoint.
Using their app, website, or white-labeled instance, you can scan any image and bring up the data saved within; Without the obtrusiveness of a QR code.
With our help in launching IRCODE at the Cannes Lions Festival, the client saw a huge success and buzz. Major global brands and agencies reached out to set up meetings for future partnerships, and the client was thrilled with the week. Overall, we saw a conversion rate almost 2x higher than the baseline set at the start of the project.
I was assigned to work closely with IRCODE’s founding team of executives, strategists, and developers, to bring their vision to life. Let’s call this your table of contents;
Branding: The visual identity and concept
1
The user journey and helping them figure out how their product would be interacted with
2
The MVP app based on the two previous tasks
3
Websites: Full art- and advertising focused websites to enable them to launch the product
4
Dashboard: User-admin pages for management of registered “IRCODES”
5
Challenges
Introducing a new type of product to the market
While it was very exciting to work on a product like no other, it’s also hard to not have a baseline to start from or improve upon. We did extensive research into similar product spaces within art and technology, as well as into how QR codes came to be. Constant testing and user research helped us along the way in establishing a product that made sense and was easy to use even without understanding each step before you got there. Plans for white labeling the experience would also continue growth in markets like museums.
Startup client
Such a small and new company is great in many ways, and are also very flexible. As an external partner, we had to be attentive and smart about how we created designs and made changes. Even such a simple thing as auto-layout in Figma made changes much more of a breeze, and keeping in continuous communication with the client was crucial.
We made a big impact on their product, often bringing suggestions and ideas to the table that they had not thought of themselves, bringing me a lot of satisfaction of making this product come to life.
The app
The app build was the majority of this project, with a lot of back-and-forth, twice-weekly calls with the client to go over every step, and hundreds of small revisions to nail the launch of IRCODE. We listened intently to their founder and where he wanted the product to go while trying to carve that idea into something solid, easy to grasp, and most importantly easy to use. Some parts of the app were changed entirely after building prototypes, seeing them work, and watching people use them. Having a close relationship with the client dev team was crucial for this, and something that both we and the client benefitted from.
Main app screens in detail
Main flow wireframes, visualization for discussions
Full app layout with main flows and comments
Design system
As part of the app and web design project, we created a design system containing all basic, reusable components. These were all created with all standards followed with responsiveness, interactivity, and variables in Figma. This design system was the first handoff point to the development team, so they could get started on the components while the functionality and flows of the app was approved.
Sample of design system
Websites
There were two parts to the website design, each with a specific purpose; The first was the marketing sites – the pages facing any potential new customer and user. This was all designed in-house and built in WordPress using the Elementor page builder. While requiring a lot of customization, extra CSS, and animation plugins, WordPress was chosen for its widespread support and ease of use to hand off to the client. We created both an art-focused site, as well as a more corporate-focused advertising use site, both with distinct look, feel, and information.
The second part is the user-admin pages – these were a lot more functional and were built out by the client’s internal dev teams. These pages took inspiration from a plethora of established admin pages, combined to fit IRCODE and its user base.
Marketing site – art focus
Marketing site – advertising focus
Dashboard pages
Branding
Our creative team helped bring IRCODE to life visually. With weeks of competitor research, mood boards, color comparisons, and font testing, we landed on a brand that was somewhat of a mix between art, startup technology, and established art registry. We considered all the upcoming use cases, where we would need image treatments to describe the product, micro-interactions in the app, and legible text for descriptions and listings.
