GQ is launching a digital art (NFT) project. I was tasked with defining a concept for the overall design. My team worked with the client to ensure the idea felt connected to GQ’s current branding, but distinct in its own right. The site is live at http://www.gq3.io
Sortable gallery showcasing all possible NFTs
Artist profiles and biographies
A minting process and crypto wallet flow
A roadmap outlining the project timeline
Short of these requirements, we were given a background image to steer the direction and told to use CMYK vibes, however this was changed so that the project would feel more in line with GQ’s established branding.
A dynamic transition was used as a reveal for each profile, which contains a short biography and the same notable examples of their work. The user can see a detailed view of each piece with the lightbox, or immediately go to a filtered view of the full gallery.
I opted for a simplified experience on mobile devices. Users can swipe left and right to navigate between artists.
The end goal
The site will go through three phases once live. The intitial phase is pre-mint, and therefore does not include a wallet connection or minting aspect. Instead, it exists to preview the work of each artist and generate interest.
The second phase is for minting. This phase allows the user to connect their digital wallet and proceed to mint their NFTs. For this, we added CTAs to the homepage, artist profiles, and navigation.
The wallet connection is a simple modal that drops down from the nav and is self-contained. Once the connection is established, the user can proceed to mint or click out of the modal to continue regular browsing.
Minting is handled on a separate page. If the user has not connected their wallet, the modal will take the place of the minting prompt until the connection is made. Because the minting process is special, we wanted to break away from the established patterns on other pages. A continuous rotating art circle spins as the user mints. This lets the user know that the page is functioning, but also shows them what they may receive upon minting.
A timeline
Most Web3 projects have a timeline. We used ours as an opportunity show a bit more color, here utilizing the image provided to us as the initial inspiration for the entire project. As the user scrolls, each point in the timeline scrolls forward and down, losing focus until the next card is in view.
Each card links to a relevant section of the website if there is one.
The action for mobile is done by dragging up or down as needed. The scroll indicator becomes a "back to top" button at the end.
My original concept was one with vibrant colors and heavier elements. Everything was meant to pop. We iterated upon this concept, implementing feedback from the stakeholder, until a nearly-complete version was created. It was at this point that we were asked to salvage what work we could and rework everything we had to match GQ.com's styling.
I created a style guide to move forward and used as much as I was able to for the redesign. The structure and feel of the site remained the same, but colors were muted to make the art stand out more. Proportions were adjust, per stakeholder feedback, and the site now feels like an extension of the GQ brand instead of a separate entity. The redesign gave me an opportunity to assess what worked and what didn't from the original version, so while it was a setback, it provided a chance refocus and remember that the site should be art and artist-forward.
