Codex helps collectors and sellers of art and collectibles to securely store information about the identity and ownership history of any asset. By securing this information on the blockchain, Codex simplifies many common tasks related to selling and collecting art.
While working with Codex, I helped to design new features on the Codex Viewer; focusing on creating a user-friendly interface that is on brand. All blockchain transactions happen through the Codex Viewer, so the interface must make this simple for anyone to use, regardless of their technical knowledge. I also worked on the design and Wordpress development of their marketing website. Both the Codex Viewer and the marketing site uses responsive web design to ensure it performs its best on any device.
The project was done collaboratively with a remote team. We used remote communication tools like Miro, G Suite, and Slack to keep in touch, strategize, share files, and offer feedback on our work.
When working on new features for the Codex Viewer, we worked to understand our users thoroughly in order to provide a blockchain-powered product that wouldn't feel intimidating.
I first conducted usability testing to see where we could improve the existing interface. This shed light on user behavioural patterns and points of frustration. This qualitative data proved the most useful for strategizing solutions.
To spec new features for the Codex Viewer, we used tools like job stories and given/when/then to help us see the value of the feature to users and each interaction that will better serve the function.
The interface was designed mobile first and to be responsive for optimal usage on any device.
Each screen started as sticky notes representing blocks of content on a Miro board, which allowed us to organize and prioritize each component on the page.
Next we moved to low-fi wireframes, still on Miro, where we could rapidly design variants of layouts using the content blocks. This is where we could also flush out what was needed for each feature given the user permissions, and the state of the feature’s use (from empty to ideal).
From there, we moved to Figma, where we developed our design system to support the affordances needed on each feature for consistent usage. Our final high-fidelity wireframes and prototyped were created with Figma to be handed off to the developer.
A prototype created for users to document the history of their collectibles.
The clean typography and trusted imagery supports the quality and richness of Codex's digital product.