WG UI-UX

Mobilizing Community Driven Design

How a Working Group aims to bring unified design experience to Hic et Nunc

During the month of September 2021, Hic et Nunc hosted its second hicathon, a volunteer community-led hackathon event centered around the development of the nft platform. Different groups were formed to help the platform and community progress more rapidly in specific areas. One of the groups created was the UI/UX Working Group, a team forged together to focus a unified design initiative.

UI stands for User Interface and is the layout of an application, consisting of elements that the user interacts with. UX stands for User Experience and relates to how the user navigates the app. Both of these design functions combine to frame a user's overall experience with the application and are crucial for usability.  Hic Et Nunc has always had a relatively simple interface but as the application and community grow there are design standards that can help it continue to grow and promote adoption. 

The team set out to tackle five main goals for September. These included bringing Hic et Nunc a market-level standard of design, aligning with the H=N development plan, fixing screaming design issues, building a design system, and making all this accessible to the community.

When looking at bringing a standard level of design to the website the team started with updating the font. They were looking for a free and open-source font, deciding on Iosevka Extended, an open-source monospace typeface. With an alternative font for promo being IBM Plex Mono. Along with selecting the font type, the team also built out a H=N Style & UI Kit including elements such as size and color scale. The kit includes components that give individuals the ability to easily build.

After deciding on a font, the team worked through visual improvements on the “OBJKT (Mint)” page, Content pages, and Menu. This included visual improvements (text, margins, etc), editing labels for legibility, and overall improved accessibility. For the newer “Search” page, they also recommended improvements and additional concept ideas. However, these are still a work in progress but giving ideas to potential. 

All the design work can be found in the Figma board including the style guide and UI kit. But let’s take a look at a few of the improvements that the team worked on here: 

History UI Design Improvements

OBJKT UI Design Improvements

UI Design Improvements for the Menu

UI Design Improvements for Mint Page

Recommendations for Search

In addition, the team worked on optimizing the design for mobile. Offering improvements to help with adoption and readability for mobile visitors.

The objective for the team was not to create something completely new, but make small yet impactful design improvements to encourage better engagement and overall user experience. As well as, help pave a way for others to jump in and support to continue pushing these kinds of improvements forward. In the end projects like this support community growth and continued happiness. Thank you to the UI/UX Working Group for kickstarting this deeply rooted and important initiative.

While keeping to a simple and minimalistic ethos, WG UI/UX upgraded HEN’s user interface and user experience to make for a more pleasant experience in minting and collecting NFTs on the platform.

The group put together a HEN Style and UI Kit, including components, font sizes, and colour scales, as a central design document that front-end designers and engineers could reference. 

Besides optimising the design for a better mobile experience, the team touched up many pages with visual improvements for greater legibility and improved accessibility.  

With the style guide in place, the way has been paved for future volunteers and contributors to jump in and continue to improve HEN.