PENUMBRA

An interactive website with a focus on UX/UI and storytelling

Role

UX/UI Design, Animation, Development

Developed at

JetStyle, 2024

Objective

To create a modern website for the Penumbra project that combines innovative design, high performance, and responsiveness across devices. The main focus was on visual storytelling and user engagement through interactive elements.

My Contributions

Designing a UX/UI system that ensures intuitive navigation and a visually appealing style.Integrating animations and interactive features to enhance the user experience.Ensuring the website was fully responsive and looked great on all screen sizes and devices.Testing and optimizing site performance to ensure fast loading and smooth interaction.

Creative

The company’s name and brand identity was our inspiration. Penumbra is a part of a solar eclipse; a truly magnificent event that has always fascinated people. We wanted to create an atmosphere of mystery and awe of the infinity of the space.

This vibe matches the storyline Penumbra created for their airdrop campaign. The company highlights the initial vision behind cryptocurrency: it started as a free network for people to exchange finances without excessive government control. As it gained popularity, regulations appeared, so cryptocurrency lost its very value.

Penumbra is to bring it back to life. The crypto chain gives out tokens as a sign of appreciation to those who help them along the way.

UX/UI

A user goes through an eligibility check to receive tokens. As in any fintech service, Penumbra’s user verification is a composite process with several states and conditions for eligibility. So our task was to develop a user-friendly experience despite the complexity of the procedure. During the design phase new features were added, such as referral flow and staking, so we updated the UX on the spot.

Pre launch activity

We loved working with such a creative team. Penumbra teased their audience before the airdrop by launching a game. We helped with the design and development of the site the game: https://sunshadow.codes/. After the community members solved all the puzzles, Penumbra revealed the link to the airdrop site.

Outcome

The Penumbra website received international recognition, winning awards in the Best UX, Best UI, and Innovation categories at the CSS Design Awards.

The project was praised for its innovative design approach and high execution quality.

Lottie animations

Lottie is a software for rendering and launching vector animation in real-time. It’s a much more advanced technology than GIF, AVI, mp4, or HTML animation. We love Lottie for its adjustability. The animations are lightweight, which ensures a high speed of page loading.

Shaders

Shaders are programs we use to create elements processed by the device’s video card. They are perfect for development of complex interactive animations. Konstantin used shaders to illustrate the peak moment of the registering process when the user submits the data to the system to prove they’re eligible for the tokens.

Result

It took us 5 weeks from the first briefing to launching the website of the game and the airdrop.

The Penumbra team had a tight deadline, and we were eager to help them start the campaign on time. We worked in extremely short 3-day sprints and had regular calls; it was crucial to synchronize our vision and the results of work. A 6-hour gap in time zones was not a problem, we still managed to maintain excellent communication flow.