PolyientX

PolyientX is a platform that utilizes Web3 tools to give clients a way to connect with their communities and fans.

Project Overview

Challenge

How can we display more than 1 NFT Group/Brand and future proof it to work with upwards of 50+?

Additionally, it needs to translate into mobile.

Solution

Make the segment interactive, and use numerical values to illustrate how many groups are part of the eligible rewards.

Stayed within developer limitations.
Created both mobile and desktop variations.

Role

UX/UI Designer

Time

2 weeks

Tools

Figma, CSS Peeper

The Previous Build

Focusing on the left side panel, this was the only workspace I was allowed to design within. Due to limitations on updating the website, these were the constraints given to my by developers.

Exploration

My favorite stage of the design process, is the beginning. Here I often begin my journey scouring through Dribbble and Mobbin for design inspiration, often times making multiple iterations with little attention to “pixels” and prioritize creativity in my solutions.

My Design Solution

The big changes here, are that I’ve reworked the original NFT space to accommodate multiple groups. I’ve also added much more helper text for users to understand that there is more than one group/nft.

Here’s how the page looks, once you click into the (+97) or “See All” link.

Final Thoughts

View Prototype

Looking back at this project, I can only wish I had more leeway in terms of redesigning the designated space with more creative freedom. Overall the primary issue was addressed, which satiates the client.

Accessibility

I’m happy to say that all of the content/text is fortunately Triple AAA accessible.

Expanding Creativity

If there was something I could rework, I’d probably remove the yellow banner, and opt for something a little more simplistic, like a designated text box.