## Faeng Website Redesign: Our Space Journey

**Introduction**

Leading the Faeng website redesign was an exhilarating challenge. As an art director, my goal was to transform Faeng's digital presence into a narrative that not only showcased their expertise in data architecture but also captured their spirit of innovation and adventure.

**The Genesis of Our Odyssey**

The journey began with a deep dive into Faeng's world. Competitor analysis revealed a landscape cluttered with predictable metaphors. It was clear that Faeng needed something beyond the ordinary – a concept that would not just stand out, but speak volumes about their identity.

**Conceiving the Celestial Data Odyssey**

The breakthrough came when we connected Faeng's love for mountain climbing with their professional journey. This fusion birthed our central metaphor: a celestial data odyssey. It was a perfect alignment, reflecting the exhilarating and challenging journey of navigating the complex world of data architecture.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FE5yCTPDEYjW35GY0TOJl%2F79b30c00-128d-478b-b71c-8585b4041594.png?alt=media&token=cab58c4e-00ed-4671-94c9-44ef70e0cd37","id":"79b30c00-128d-478b-b71c-8585b4041594","width":1600,"height":1201,"filename":"#1.png","type":"image/png","caption":"","border":false}]}
```

**Translating the Concept into Visuals**

The task of visually narrating this odyssey fell to us, and we embraced it wholeheartedly. Rejecting the mundane realm of stock imagery, we turned to Midjourney, an AI tool that became our digital paintbrush. The visuals crafted were not mere decorations but powerful narratives, encapsulating the essence of Faeng's journey through rugged mountain terrains blended with futuristic, sci-fi elements. This approach was about creating a sense of wonder and intrigue, drawing users into Faeng's world.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FE5yCTPDEYjW35GY0TOJl%2F05b25c57-88c0-4c6d-b96e-7e5341a69c31.png?alt=media&token=edd0b7b7-c147-4e57-8be2-f01146fa3a92","id":"05b25c57-88c0-4c6d-b96e-7e5341a69c31","width":1600,"height":1201,"filename":"#2.png","type":"image/png","caption":"","border":false}]}
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FE5yCTPDEYjW35GY0TOJl%2F325d7eb1-1676-4e89-85f0-bacb73a1ac2c.png?alt=media&token=3082734b-5a4b-42a0-80f6-7e6de68d0867","id":"325d7eb1-1676-4e89-85f0-bacb73a1ac2c","width":1600,"height":1201,"filename":"#3.png","type":"image/png","caption":"","border":false}]}
```

**Lightmorphism: A Beacon in the Digital Wilderness**

One of the most exciting aspects was playing with lightmorphism. This design style allowed us to bring a sense of physicality and depth to the website's dark theme. Elements like buttons and menus were designed to glow, guiding users through the website with ease and clarity. It was like lighting a torch in the dark, helping users navigate the complexities of data architecture effortlessly.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FE5yCTPDEYjW35GY0TOJl%2Fbca92492-cc67-4eaa-90bd-f10f55993714.png?alt=media&token=e97b35da-13af-4c04-8301-174a629bf006","id":"bca92492-cc67-4eaa-90bd-f10f55993714","width":1600,"height":1201,"filename":"#6.png","type":"image/png","caption":"","border":false}]}
```

**Infusing the Site with Symbolic Details**

Every element on the site was carefully chosen to reinforce our central theme. Decorative details like altimeters and climbing gear were not just aesthetic choices; they were narrative tools, subtle reminders of the adventure and challenge inherent in Faeng's work.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FE5yCTPDEYjW35GY0TOJl%2F8564c924-e64f-4d98-a188-48f8a597c975.png?alt=media&token=c4e06ac6-6a27-43c7-9d4a-e89cb36ef334","id":"8564c924-e64f-4d98-a188-48f8a597c975","width":1600,"height":1201,"filename":"#5.png","type":"image/png","caption":"","border":false}]}
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FE5yCTPDEYjW35GY0TOJl%2F815fbdfa-862f-42cc-9bc6-4ebf62731137.png?alt=media&token=8b649b0c-21b8-4500-9e7e-2afc1a38317d","id":"815fbdfa-862f-42cc-9bc6-4ebf62731137","width":1600,"height":1201,"filename":"#7.png","type":"image/png","caption":"","border":false}]}
```

**Incorporating Interactive Elements**

Creating an engaging user experience was paramount. Using React and JavaScript, we integrated interactive elements that brought the site to life. These weren't just for show – they made the user's journey through the site feel like an actual ascent, with each scroll and click revealing new facets of Faeng's story.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FE5yCTPDEYjW35GY0TOJl%2F97c7a540-3917-4d8c-a2bc-eab613ca3a39.png?alt=media&token=f3f2b8d8-212b-4e54-b205-96bfd8e08a0d","id":"97c7a540-3917-4d8c-a2bc-eab613ca3a39","width":1600,"height":1201,"filename":"#8.png","type":"image/png","caption":"","border":false}]}
```

**Collaborative Efforts for a Cohesive Outcome**

One of the most fulfilling aspects of this project was the collaborative nature of our work. Regular sessions with Faeng ensured our visions were aligned, and their feedback was invaluable in refining our designs. This collaborative process was essential in creating a site that truly resonated with Faeng's identity and goals.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FE5yCTPDEYjW35GY0TOJl%2F579ce37f-2043-4863-b6a5-9eb24aee6135.png?alt=media&token=e5ea48bc-a3df-4b34-858a-bc0f01c00db4","id":"579ce37f-2043-4863-b6a5-9eb24aee6135","width":1600,"height":1201,"filename":"#logo.png","type":"image/png","caption":"","border":false}]}
```

**Conclusion: Reaching the Digital Summit**

The culmination of our efforts was more than a website; it was a digital monument to Faeng's journey in data architecture. The site stands as a testament to the power of creative vision and teamwork. It invites users to embark on their own digital odyssey, exploring the ever-evolving landscape of data architecture.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FE5yCTPDEYjW35GY0TOJl%2F4a001c4c-b807-472a-8fb8-91b3a0e7f8f6.png?alt=media&token=dc5d19ff-ef42-4b1f-a532-336a1294384d","id":"4a001c4c-b807-472a-8fb8-91b3a0e7f8f6","width":1600,"height":1201,"filename":"#4.png","type":"image/png","caption":"","border":false}]}
```

**Acknowledgements**

> I'd like to extend my gratitude to Masha Melnikova, whose design expertise was crucial in bringing our vision to life. Her creativity and attention to detail were instrumental in making the Faeng website not just functional, but a narrative masterpiece.

**Final Thoughts**

This project was a reminder of the transformative power of art direction in digital design. It reinforced my belief that a well-crafted narrative, combined with innovative design techniques, can create a digital experience that is not only engaging but also deeply resonant with a brand's identity.

Faeng Website Redesign

*In the realm of UI/UX design, the selection of color schemes plays a pivotal role in enhancing user experience, especially under specific environmental conditions. Among these, red-toned navigation interfaces stand out for their unique benefits and historical significance, particularly in nocturnal settings such as maritime navigation, astronomy, and military operations. This comprehensive exploration delves into the physiological rationale, advantages, challenges, and methodologies behind the use of red in navigation interfaces, supported by research and practices from various fields.*

## **Understanding the Physiological Impact of Red Light**

Red light’s influence on human vision and circadian rhythms is well-documented. According to a study published in the Journal of Neuroscience (Brainard et al., 2001), red light is less likely to affect melatonin levels compared to blue light, which is known for its significant impact on circadian rhythms. This property makes red light an ideal choice for environments where maintaining natural sleep cycles and night vision is crucial.

## **Advantages of Red Navigation Interfaces**

**1. Preservation of Night Vision:** The human eye’s reduced sensitivity to red light means it is easier to adjust back to darkness after exposure to red, compared to other colors. This principle is crucial in scenarios like maritime navigation, where operators frequently shift their gaze between dimly lit instrument panels and the dark outside environment (Roth, 2012, Applied Ergonomics).

**2. Reduced Eye Strain:** Red light’s longer wavelength causes less scattering in the eye, which can decrease the risk of eye strain during prolonged exposure (Wann & Wilkins, 2018, Lighting Research & Technology).

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FGYIes9lPEHvdTJ8sWmoW%2F3413c863-38f2-4b08-8126-57f00c70f49c.png?alt=media&token=4e2df366-8f1d-474e-b501-1567cc6c6069","id":"3413c863-38f2-4b08-8126-57f00c70f49c","width":550,"height":346,"filename":"1_Gh7vUbiKsmKATNx14xDNLQ.png","type":"image/png","caption":"","border":false}]}
```

**3. Minimal Circadian Disruption:** Utilizing red interfaces at night minimizes the disruption to the body’s circadian rhythms, essential for personnel working in shifts (Gooley et al., 2010, Nature).

## **Challenges and Considerations**

**1. Color Distinction Issues:** One significant drawback is the difficulty in distinguishing between colors on red interfaces, potentially leading to misinterpretation of information (Green & Bavelier, 2012, Vision Research).

**2. Limited Versatility:** The benefits of red lighting are most pronounced under low-light conditions, making it less suitable for use in brightly lit environments.

**3. Perception Variability:** Individual differences in color perception mean that red interfaces may not be universally optimal, necessitating user testing to identify potential issues (Simmons & Kingdom, 2018, Journal of Vision).

## **Methodology for Implementing Red Navigation Interfaces**

Implementing red-toned navigation interfaces requires careful consideration of various factors to balance the benefits against potential drawbacks. This includes selecting the appropriate shade of red to optimize visibility without causing strain, adjusting contrast and brightness settings to ensure readability, and conducting user testing to gather feedback and refine the design. A/B testing, as recommended by Nielsen Norman Group, is a vital tool in this process, enabling designers to empirically determine the most effective implementations for their specific user base.

## **Historical and Practical Applications**

The historical use of red light for night vision preservation has its roots in maritime and military operations. Ships’ bridges and submarine control rooms have long utilized red lighting to enable crew members to navigate and read instruments without compromising their night vision. This practice has been adapted into the design of digital interfaces for similar applications, where maintaining the ability to quickly adjust to dark environments is critical (Turner & Turner, 2019, Historical Naval Ships Association).

## **Use Cases Beyond Maritime Navigation**

**- Astronomy:** Astronomers rely on red light to consult star charts and operate equipment without affecting their night-adapted vision, a practice supported by research from the American Astronomical Society.

**- Military Operations:** The use of red interfaces in night-time military operations minimizes light emission that could reveal positions to adversaries, while preserving soldiers’ night vision.

**- Aviation:** Pilots use red-lit instruments to ensure they can maintain external night vision while monitoring cockpit controls, a practice endorsed by aviation safety research.

The use of red-toned navigation interfaces, with their ability to minimize eye strain, preserve night vision, and reduce circadian rhythm disruption, is a testament to the thoughtful application of color psychology and physiology in design. As technology evolves, so too will the methodologies for implementing these interfaces, driven by ongoing research and a deepening understanding of human factors engineering. The continued exploration of red light’s unique properties promises to further refine and expand its application in enhancing safety and usability in critical nocturnal operations.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FGYIes9lPEHvdTJ8sWmoW%2F6d3b8d2a-e49d-4dbd-8a28-1a78d43f2730.png?alt=media&token=ef6d9666-f882-4301-9930-fb43a56ce6fc","id":"6d3b8d2a-e49d-4dbd-8a28-1a78d43f2730","width":450,"height":450,"filename":"1_ejptPunoul654mE387chOg.png","type":"image/png","caption":"There is a high density of red and green cones with red dots predominating, which makes red light less influential on visual acuity in the dark and allows a person to see better in low-light conditions without disturbing the eye’s adaptation to darkness.","border":false}]}
```

There is a high density of red and green cones with red dots predominating, which makes red light less influential on visual acuity in the dark and allows a person to see better in low-light conditions without disturbing the eye’s adaptation to darkness.

This exploration into red navigation interfaces highlights the need for a balanced approach that considers physiological impacts, environmental conditions, and operational requirements, ensuring that these systems not only meet but exceed the demands of modern navigation and operational challenges.

## **How do you highlight an item if the interface is already red?**

In the context of red-dominated navigation interfaces, differentiating critical elements such as warnings or alerts poses a unique challenge. Employing a red color scheme throughout the interface can diminish the impact of traditionally red alert signals. However, through strategic design principles and the application of visual hierarchy techniques, it’s possible to effectively highlight these elements without compromising the overall design’s integrity or the user’s night vision adaptation. Here are several strategies:

## **1. Use of Contrasting Colors**

While the primary interface utilizes red tones, alerts or warnings can be emphasized through the use of contrasting colors that still preserve night vision. Colors like yellow or orange can stand out against a red background without causing significant night vision loss, as they are adjacent on the color spectrum and thus less jarring to the eye than, for instance, a bright white or blue.

## **2. Shape and Iconography**

Distinct shapes or icons can serve as a universal language for alerts and warnings, transcending color limitations. For example, using exclamation marks, triangles, or other universally recognized symbols for caution can grab attention effectively. The uniqueness of these shapes or symbols against the standard interface elements can make them stand out, even when they are in the same color spectrum.

## **3. Animation and Blinking Effects**

Subtle animations or blinking effects can draw attention to warnings without relying solely on color differentiation. This method should be used sparingly to avoid creating distractions or inducing visual discomfort in the user. Properly timed and executed, these effects can serve as an effective alert mechanism.

## **4. Textural Differences**

Incorporating different textures or patterns for alerts within a red-dominated interface can make them distinguishable. Textures can create a visual distinction that does not rely on color variance alone. For example, a striped or dotted pattern on an alert area can signal its importance.

## **5. Border Highlighting**

Outlining critical alerts with a brighter or different shade of red (or a color that maintains night vision preservation) can make them stand out against a darker red background. This method leverages the interface’s existing color scheme while creating a visual boundary that draws the eye.

## **6. Varying Brightness and Saturation**

Adjusting the brightness or saturation levels of the alert elements relative to the rest of the interface can also serve as an effective way to signal importance. A brighter or more saturated red for alerts against a muted red background can catch attention without breaking the overall color scheme’s cohesion.

## **7. Positional Emphasis**

Placing critical alerts in specific, high-visibility areas of the screen, such as the center or top corners, can ensure they are noticed promptly. The strategic use of screen real estate can enhance the visibility of alerts without altering their color properties.

## **8. Auditory Alerts**

Complementing visual alerts with auditory cues can enhance the effectiveness of the warning system, especially in high-stakes environments where missing a visual cue could have serious consequences. This approach can be particularly useful in scenarios where the operator’s visual attention might be divided.

## **Specific Vessels, Vehicles, and Aircraft with Red-Toned Interfaces**

The use of red-toned interfaces spans various modes of transportation, including maritime vessels, automobiles, and aircraft, where maintaining night vision and minimizing light pollution are critical. This section highlights specific examples across these domains and delves into the spectrum of colors employed to achieve these specialized interfaces.

## **Maritime Vessels with Red-Toned Interfaces**

**- Submarines (General Use):** Submarines often use red lighting and interfaces in control rooms to preserve the crew’s night vision, especially during nighttime operations or when operating in stealth mode. The Ohio-class ballistic missile submarines, for instance, employ red lighting in key operational areas to minimize visibility from external observers while preserving the internal visibility of instruments and controls.

**- Naval Ships:** The bridge of many naval ships, such as the U.S. Navy’s Arleigh Burke-class destroyers, utilizes red lighting and interfaces during nighttime operations. This practice allows personnel to maintain their night vision while navigating or engaging in operations requiring visual acuity in low-light conditions.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FGYIes9lPEHvdTJ8sWmoW%2Fa2cce493-9197-44ee-ae5a-247c7c9056f8.png?alt=media&token=345b8659-c3a7-49d1-85fc-a68f7983f5a4","id":"a2cce493-9197-44ee-ae5a-247c7c9056f8","width":720,"height":540,"filename":"1_WARCMEN1E8wbiKt5pgH-hQ.png","type":"image/png","caption":"","border":false}]}
```

## **Automobiles with Red Interior Lighting**

**- Audi:** Audi has implemented red interior lighting in models like the Audi A8, using it for dashboard illumination and control interfaces during night driving. This choice is aimed at reducing glare and ensuring the driver’s eyes adjust more efficiently between looking at the instrument panel and the road ahead.

**- BMW:** Similar to Audi, BMW has offered red lighting options for the instrument panels and center console interfaces in models like the BMW 3 Series. This design choice enhances night driving by minimizing eye strain and preserving night vision.

## **Aircraft with Red-Toned Interfaces**

**- Military Aircraft Cockpits:** Many military aircraft, including the Lockheed Martin F-16 Fighting Falcon, utilize red cockpit lighting to preserve pilots’ night vision during low-light or night-time missions. This enables pilots to read instruments and maps without compromising their ability to see outside the cockpit.

**- Commercial Aviation:** Some commercial aircraft, like those used for long-haul flights, may employ red-toned lighting in cockpit areas to minimize crew fatigue and preserve night vision during night flights. This practice helps in maintaining circadian rhythms and reducing glare from instrument panels.

## **Spectrum of Colors for Red-Toned Interfaces**

The spectrum of colors used in red-toned interfaces typically ranges from deep red to softer, more subdued shades. This range is specifically chosen to minimize disruption to night vision and reduce the impact on circadian rhythms. Specifically, the spectrum includes:

**- Deep Red (Approximately 650–700 nm):** This shade is often used in environments where preserving night vision is paramount. It’s the least disruptive to dark adaptation and is commonly found in submarine and other naval vessel control rooms.

**- Soft Red (Approximately 625–650 nm):** Softer reds are used in situations where some level of ambient light is permissible. This shade is easier on the eyes over long periods and is found in car dashboards and some aircraft cockpits.

**- Amber-Red Spectrum (Approximately 590–625 nm):** While not purely red, amber tones can offer a balance between visibility and minimal circadian disruption. This range might be used in mixed-use environments where some degree of night vision preservation is needed, but color distinction is also important.

These shades are selected to optimize the interface’s visibility and functionality while addressing the specific needs of night-time operation and low-light environments. The choice of color within this spectrum is a critical aspect of design that considers both physiological responses and operational requirements.

Navigating the Dark: Secrets of Red Interfaces

*Let me walk you through the cool journey we had while crafting the Dropspot design. It's all about mixing things up and creating something that truly stands out in the NFT world.*

## **The Concept and How We Rolled It Out**

**Mixing it Up:** So, we decided to play around with some contrasting elements for Dropspot. Our goal? To make those NFTs really shine. We went with a dark theme which worked wonders in bringing out those super vivid, almost acidic colors. It's like creating a visual punch that screams NFT.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FGv8ozJGADgFSu0BkGK5S%2F89611e20-3d63-4460-aa5c-fdf3bbac6dfe.png?alt=media&token=959c2eca-8f4e-4ac2-bf29-f368ede5f3c2","id":"89611e20-3d63-4460-aa5c-fdf3bbac6dfe","width":1601,"height":1200,"filename":"dropspot 35.png","type":"image/png","caption":"","border":false}]}
```

## **The Building Blocks of Our Design**

### **Layout and How We Kept It Balanced**

**Old-School with a Twist:** We stuck to a classic layout, you know, to keep things easy for the eyes. It's all about making our bright and bold style play nice with what people are used to seeing.

**Keeping Things Even:** Each slide we designed had this cool symmetry thing going on. We made sure that if one side was heavy with visuals, the other side matched up. It's all about keeping things dynamic yet in harmony.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FGv8ozJGADgFSu0BkGK5S%2F9db63865-9ba5-4bd0-92a9-8854ca2fb411.png?alt=media&token=b8cf4165-2352-4bd5-a12a-42c2911fe0dd","id":"9db63865-9ba5-4bd0-92a9-8854ca2fb411","width":1601,"height":1200,"filename":"dropspot 31.png","type":"image/png","caption":"","border":false}]}
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FGv8ozJGADgFSu0BkGK5S%2Fb37d3910-cd86-4e70-87eb-cda8cb3e803f.png?alt=media&token=deaeee86-0a9c-4b37-a57d-f9a2529468c3","id":"b37d3910-cd86-4e70-87eb-cda8cb3e803f","width":1601,"height":1200,"filename":"dropspot 36.png","type":"image/png","caption":"","border":false}]}
```

### **A Mashup of Styles and Decor**

**The Three Musketeers of Design:** We threw in a mix of UI, Swiss, and Neo-brutalism into the pot. Here's the breakdown:

* **UI Goodies:** Think nifty interface elements like panels, outlines, and those button-style headers. Plus, avatars and badges for that extra flair.

* **Swiss Influence:** We leaned into typography and modular design, taking cues from those super sleek magazine layouts.

* **Neo-Brutalist Punch:** We spiced things up with sharp angles, bold contrasts, and a palette that's anything but shy, giving our slides a modern kick.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FGv8ozJGADgFSu0BkGK5S%2F0bde64ab-4b83-40b2-810d-6a072f19c52b.png?alt=media&token=c09581d9-e81d-48a8-98da-9ea1d07ba6db","id":"0bde64ab-4b83-40b2-810d-6a072f19c52b","width":1601,"height":1200,"filename":"dropspot 39.png","type":"image/png","caption":"","border":false}]}
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FGv8ozJGADgFSu0BkGK5S%2Fe94c2b81-9367-49ec-a0b6-458e1b42f5cf.png?alt=media&token=5db0e7f3-2e05-4ef0-b725-985fa96d4555","id":"e94c2b81-9367-49ec-a0b6-458e1b42f5cf","width":1601,"height":1200,"filename":"dropspot 33.png","type":"image/png","caption":"","border":false}]}
```

### **Modular Magic**

**Divide to Conquer:** We segmented our content into these neat little modules, keeping everything organized and easy to digest. It's all about spacing things just right and sticking to a clear pecking order.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FGv8ozJGADgFSu0BkGK5S%2Fb63b4b80-e4b2-4f05-82e6-cdf32fcfed4d.png?alt=media&token=6bf4917a-fec5-4722-a678-977093669bea","id":"b63b4b80-e4b2-4f05-82e6-cdf32fcfed4d","width":1601,"height":1200,"filename":"dropspot 32.png","type":"image/png","caption":"","border":false}]}
```

### **All About Fonts**

**Why Helvetica Neue is the MVP:** After scoping out a bunch of fonts, we landed on Helvetica Neue for a few solid reasons:

* **Crisp on Screens:** This baby looks super clean and way more refined on digital displays.

* **Bold and Direct:** Its form is straightforward and really pops.

* **Size Doesn't Matter**: Looks awesome whether it's big or small.

* **Stroke Contrast That Just Works:** It's got this perfect balance in stroke contrast, making it super readable.

* **One Font to Rule Them All:** We decided to keep it simple and modern with just this one killer font that can do it all.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FGv8ozJGADgFSu0BkGK5S%2F0881cf0f-8c96-4efc-98d5-4b116eae0d8e.png?alt=media&token=1c42ec8d-e9f2-4b37-a809-d2703c46a8b3","id":"0881cf0f-8c96-4efc-98d5-4b116eae0d8e","width":1601,"height":1200,"filename":"dropspot 42.png","type":"image/png","caption":"","border":false}]}
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FGv8ozJGADgFSu0BkGK5S%2F859d9be2-42de-4896-a19b-ba64ef3897ee.png?alt=media&token=21132c4f-e087-463d-a7a4-23fbc586ecec","id":"859d9be2-42de-4896-a19b-ba64ef3897ee","width":1601,"height":1200,"filename":"dropspot 37.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FGv8ozJGADgFSu0BkGK5S%2F17865465-4b18-4b84-8982-f9f7e22e4d4d.png?alt=media&token=9638f50f-8383-4213-aa32-19b4b6c8e99c","id":"17865465-4b18-4b84-8982-f9f7e22e4d4d","width":1601,"height":1200,"filename":"dropspot 38.png","type":"image/png","caption":"","border":false}]}
```

## **Reflections on the Project**

### **The Way We Worked**

**Taking it Step by Step:** Our approach was all about being transparent and involving the client at each turn. We started with the basic concept and then gradually unveiled more and more, keeping everything smooth and under control.

### **My Role in This Cool Venture**

> I kinda set the stage and threw in some ideas here and there. But the real hero? That’s our lead designer, Masha Melnikova. She's the genius who wove all these elements into a lively, functional, and downright innovative graphic system.

Dropspot Rad Pitchdeck

Let's dive into the nitty-gritty of EZ Wallet's UX design. When we took on this project, we knew we had our work cut out for us. But hey, we love a good challenge!

## **Tasked Goals**

Our mission, should we choose to accept it (and of course, we did!):

1. Create an app so intuitive, even your grandma could use it (no offense, grandma).

2. Make onboarding a breeze with creator videos guiding the way.

3. Design a dashboard that feels like home, even for crypto newbies.

4. Keep it simple, keep it clean, keep it user-friendly.

5. Boost those revenue streams without being sneaky about it.

### **Main Flows**

We mapped out the main user journeys like a treasure hunt:

1. Tips: From entering amounts to confirming transfers, we've got it all covered.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FQGQiHS0Eiw04Tvs4YNHL%2F4759f54d-8bbd-418e-8714-3dfff13b5d38.png?alt=media&token=b7c977eb-1687-40b1-8e1b-abec96a354db","id":"4759f54d-8bbd-418e-8714-3dfff13b5d38","width":22928,"height":8592,"filename":"User Flow.png","type":"image/png","caption":"","border":false}]}
```

2. User Wallet: Manage your funds, send, receive, and log out with ease.

3. Merchant's Wallet: Log in, check your dashboard, withdraw your earnings, and tinker with settings – it's all here!

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FQGQiHS0Eiw04Tvs4YNHL%2Ff7faf1ff-8e5c-42bc-ad32-5dd2576f4fe9.png?alt=media&token=ba996eab-b3e0-49f4-95d2-a6d6e3ad93aa","id":"f7faf1ff-8e5c-42bc-ad32-5dd2576f4fe9","width":16912,"height":7179,"filename":"Merchant Flow.png","type":"image/png","caption":"","border":false}]}
```

These are developments that the client already had. We didn't draw and compose these logical flows.

### **Practical Solutions**

**Now, here's where the magic happens:**

Preset 'chips' with suggested tip amounts – a little nudge goes a long way!

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FQGQiHS0Eiw04Tvs4YNHL%2F19a8ba61-7553-421d-a3a9-4ddf057b8090.png?alt=media&token=2e907f15-4eb8-4c2a-acb7-c081612b8465","id":"19a8ba61-7553-421d-a3a9-4ddf057b8090","width":1616,"height":1400,"filename":"pika-1717759812194-1x.png","type":"image/png","caption":"","border":false}]}
```

---

Cover photos for creators' tip pages – because first impressions matter.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FQGQiHS0Eiw04Tvs4YNHL%2Fac48344f-eb8d-4dc3-a802-fd317507c6c9.png?alt=media&token=8ebab676-20ba-4632-9c6d-45d3bcdd7bb8","id":"ac48344f-eb8d-4dc3-a802-fd317507c6c9","width":1616,"height":1400,"filename":"pika-1717759825786-1x.png","type":"image/png","caption":"","border":false}]}
```

---

Personalized messages with tips – because who doesn't love a heartfelt note?

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FQGQiHS0Eiw04Tvs4YNHL%2Ffff7ef4f-247b-4440-a1ab-7738c881f7f3.png?alt=media&token=d0954a31-f489-49be-8e44-64ce499a858e","id":"fff7ef4f-247b-4440-a1ab-7738c881f7f3","width":1616,"height":1400,"filename":"Pika Screenshot Editor (14).png","type":"image/png","caption":"","border":false}]}
```

---

Simplified payment flow – three paths, zero confusion.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FQGQiHS0Eiw04Tvs4YNHL%2Ff4ae7f39-666d-4e48-96e4-bd1c35067aa5.png?alt=media&token=15040ef8-904b-483c-86e6-2f6e6330c5d2","id":"f4ae7f39-666d-4e48-96e4-bd1c35067aa5","width":3232,"height":1232,"filename":"pika-1717759874787-2x.png","type":"image/png","caption":"","border":false}]}
```

---

Clean layout – no clutter, no fuss, just the essentials.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FQGQiHS0Eiw04Tvs4YNHL%2F4e89a572-d90b-4e38-a88e-9680a5b743fc.png?alt=media&token=ad423491-42fa-433d-a670-04638b76985b","id":"4e89a572-d90b-4e38-a88e-9680a5b743fc","width":1616,"height":1400,"filename":"Pika Screenshot Editor (12).png","type":"image/png","caption":"","border":false}]}
```

---

Familiar UX – like your favorite payment app, but better.

### **Cool UX Features**

We couldn't resist adding some extra sauce:

1. Traffic quality metrics and donation stats for creators – because data is power!

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FQGQiHS0Eiw04Tvs4YNHL%2F39bf1490-c884-4aa3-8c01-d44054f05c8b.png?alt=media&token=e28dceb5-3468-4482-ad4c-04cd462f0585","id":"39bf1490-c884-4aa3-8c01-d44054f05c8b","width":1616,"height":1400,"filename":"Pika Screenshot Editor (10).png","type":"image/png","caption":"","border":false}]}
```

---

2. Prominent withdrawal feature – because who doesn't love seeing those earnings?

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FQGQiHS0Eiw04Tvs4YNHL%2F26018b37-96b3-41f3-8e78-553c14b08f03.png?alt=media&token=120cc5bd-4560-4982-9351-f0a0e7620738","id":"26018b37-96b3-41f3-8e78-553c14b08f03","width":1616,"height":1400,"filename":"Pika Screenshot Editor (9).png","type":"image/png","caption":"","border":false}]}
```

---

3. Dual connected wallets – seamless and flexible.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FQGQiHS0Eiw04Tvs4YNHL%2F9d9c61cf-85e6-4dd4-9b49-0b9910667382.png?alt=media&token=613fe45a-3f84-46a2-8496-e967b6f3740c","id":"9d9c61cf-85e6-4dd4-9b49-0b9910667382","width":1616,"height":1400,"filename":"Pika Screenshot Editor (8).png","type":"image/png","caption":"","border":false}]}
```

---

4. Dynamic 'Pay' button – low funds? No problem, just top up and pay!

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FQGQiHS0Eiw04Tvs4YNHL%2F0bf21364-dba4-481e-a522-0bd0d9d13187.png?alt=media&token=eee112f9-ba82-40c3-a9d2-70ba94a93352","id":"0bf21364-dba4-481e-a522-0bd0d9d13187","width":1616,"height":1400,"filename":"Pika Screenshot Editor (7).png","type":"image/png","caption":"","border":false}]}
```

---

In this UX phase, we put on our thinking caps and got down to business. We balanced tech smarts with intuitive design, always keeping the end-user in mind. The result? An app that's not just functional, but also a joy to use. Stay tuned for the next chapter, where we'll bring this UX foundation to life with some jaw-dropping UI design!

### **Section 2: EZ Wallet UI Stage**

**Our UI Design Philosophy**

I don't just slap some colors on a UX prototype and call it a day. No sir! We believe in transforming layouts, elevating designs, and making user engagement our top priority. It's not just about making it work; it's about making it wow af!

**UI Design Concept**

Let's break it down!

**First One**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FQGQiHS0Eiw04Tvs4YNHL%2Fdc61475d-7f21-4af6-b87d-daa9cce229cb.png?alt=media&token=966532d0-8be5-4c10-96a6-aebb57acb068","id":"dc61475d-7f21-4af6-b87d-daa9cce229cb","width":2880,"height":1800,"filename":"Send a tip _ Enter description-2.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FQGQiHS0Eiw04Tvs4YNHL%2F6822fa22-b451-473a-b88b-0c856fbfc952.png?alt=media&token=3e5ab731-10ad-47e1-bc3c-8e30da6f3c8d","id":"6822fa22-b451-473a-b88b-0c856fbfc952","width":2880,"height":1800,"filename":"Send a tip _ Enter description-1.png","type":"image/png","caption":"","border":false}]}
```

**Second One**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FQGQiHS0Eiw04Tvs4YNHL%2Fccd84c66-f4e8-451e-a046-88f179debf6e.png?alt=media&token=77c59647-46cf-4a0c-8f31-942be59d822e","id":"ccd84c66-f4e8-451e-a046-88f179debf6e","width":2880,"height":1800,"filename":"Send a tip _ Enter description.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FQGQiHS0Eiw04Tvs4YNHL%2F7cd775e3-e1fb-46da-a6f7-e74d4198678c.png?alt=media&token=a0133c9f-dad0-45e7-9161-c2bd07835e06","id":"7cd775e3-e1fb-46da-a6f7-e74d4198678c","width":2880,"height":1800,"filename":"Wallet _ Deposit _ Connect wallet _ Success.png","type":"image/png","caption":"","border":false}]}
```

**Design Foundations**

We've got some key principles to guide our design journey:

Emotional Connection: Big, bold onboarding videos to create that personal touch.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FQGQiHS0Eiw04Tvs4YNHL%2F7ccb8981-87d1-4e45-8211-7a9a044e759c.png?alt=media&token=db6ec77c-739c-46cc-a470-c1e2ce88c931","id":"7ccb8981-87d1-4e45-8211-7a9a044e759c","width":1616,"height":1400,"filename":"Pika Screenshot Editor (5).png","type":"image/png","caption":"","border":false}]}
```

---

Simple Modules: Mix-and-match, flexible design for ultimate versatility.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FQGQiHS0Eiw04Tvs4YNHL%2F8d339aa8-2fe6-4eb9-b30f-cec803e547d7.png?alt=media&token=3349e1f8-1729-4381-ab62-24c90cc200d5","id":"8d339aa8-2fe6-4eb9-b30f-cec803e547d7","width":1616,"height":1400,"filename":"pika-1717759415969-1x.png","type":"image/png","caption":"","border":false}]}
```

---

Interaction Emphasis: Making every message and tip a moment to remember.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FQGQiHS0Eiw04Tvs4YNHL%2F40a0979c-f7fa-4724-ac5e-d7c33e3dff00.png?alt=media&token=1bce9a27-56fb-4e6b-94c6-294b6de1c359","id":"40a0979c-f7fa-4724-ac5e-d7c33e3dff00","width":1616,"height":1400,"filename":"pika-1717759318332-1x.png","type":"image/png","caption":"","border":false}]}
```

---

Intuitive Interface: So easy, a caveman could do it (no offense, cavemen).

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FQGQiHS0Eiw04Tvs4YNHL%2F9c48d157-b331-440e-bf6f-181934a64fc9.png?alt=media&token=b0a8143f-4ab0-449b-802b-31d41560a2a2","id":"9c48d157-b331-440e-bf6f-181934a64fc9","width":1616,"height":1400,"filename":"Pika Screenshot Editor (3).png","type":"image/png","caption":"","border":false}]}
```

Flexibility and Personalization: Because every user is unique.

Humanizing Digital: Bringing that human touch to the digital world.

**Visual Style**

We're going for a soft, friendly, and playful vibe. Think rounded forms, clean layouts, and a dash of decorative elements for that casual, inviting feel.

**Color Scheme**

Pastel colors are the name of the game, taking cues from OnlyFans without being too on-the-nose. Familiar colors, fresh context – it's all about building those associations!

**Typography**

Poppins is our typography soulmate:

1. Modern and geometric – check!

2. Readable and distinct – check!

3. Scalable across devices – check!

4. Versatile for headers and body text – check!

5. Professional and polished – check and check!

**Interface Design**

Those donation chips? They're not just amounts; they're vibrant, motivational modules. The header? Sleek and focused on the essentials. And that 'tip' word? Bright, iconic, and impossible to miss.

**Cool Feature**

Web3-auth grabs the user's avatar for a personalized touch, while basic video controls blend seamlessly into the overall composition.

**Visual Hierarchy and Layout**

Two parts, one flow:

1. Left side: Onboarding video for that emotional connection.

2. Right side: Donation form, designed to follow along with the video.

It's a layout that just makes sense, guiding users through the process with ease.

In the UI stage of EZ Wallet, we're not just designing an interface; we're crafting a story. A story of simplicity, engagement, and that fuzzy feeling you get when something just works. It's a journey we can't wait to take our users on!

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FQGQiHS0Eiw04Tvs4YNHL%2Ffeac8e88-b5c1-46cc-b490-d79b186822d5.gif?alt=media&token=7394882a-bf83-4035-a3a3-8f77fea02585","id":"feac8e88-b5c1-46cc-b490-d79b186822d5","width":1920,"height":1201,"filename":"ezgif.com-animated-gif-maker.gif","type":"image/gif","caption":"","border":false}]}
```

## **Section 3: EZ Wallet Eco-System Design**

**UI Stage: The Heart of the Matter**

We're diving deep into the core of EZ Wallet – the crypto wallet capabilities, the dashboard's elegance, and the smooth tipping mechanics that make our app tick.

**A Wallet That Works**

EZ Wallet isn't just a piggy bank for digital currency. It's a powerhouse for creators to manage, grow, and leverage their earnings from tips. It's about making cryptocurrency work for our users, not the other way around.

**Dashboard Dreams**

Numbers never looked so good! Our dashboard is where creators can see their growth, engagement, and earnings come to life with intuitive visuals and metrics that matter. It's not just data; it's a story of success.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FQGQiHS0Eiw04Tvs4YNHL%2Fc5ef0136-4f8a-454f-a785-374ff5a58239.png?alt=media&token=f92425f8-2d02-473a-844e-e0178bbee93b","id":"c5ef0136-4f8a-454f-a785-374ff5a58239","width":1616,"height":1400,"filename":"Pika Screenshot Editor.png","type":"image/png","caption":"","border":false}]}
```

**Tipping Made Easy**

Tipping on EZ Wallet is like sending a secret note, but with the power of a bank transfer. It's private, personal, and incredibly simple. No crypto know-how needed – our smart system handles the technicalities, so users can focus on the warm and fuzzies.

**Seamless Integration**

EZ Wallet isn't a standalone star; it's the glue that holds our app's ecosystem together. It makes transactions between users a breeze, leveraging the best of blockchain tech while keeping things familiar and user-friendly.

**Why and How: The Method Behind the Magic**

Why did we integrate the wallet so deeply? Simple: we believe in effortless interactions. How did we do it? By harnessing cutting-edge technology and user-centered design to make transacting a joy, not a chore.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FQGQiHS0Eiw04Tvs4YNHL%2Ff813e1c7-068f-4a7b-9b4d-f654f03c9345.png?alt=media&token=62b06b0b-6f45-4697-a5ed-f4272f77433c","id":"f813e1c7-068f-4a7b-9b4d-f654f03c9345","width":1616,"height":1400,"filename":"Pika Screenshot Editor (4).png","type":"image/png","caption":"","border":false}]}
```

In the grand scheme of the EZ Wallet ecosystem, every feature – from the wallet to the dashboard to the tipping mechanics – plays a vital role in amplifying the creator's journey. It's our love letter to the digital age, wrapped up in a secure, simple, and endlessly exciting package.

**Desktop Design**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FQGQiHS0Eiw04Tvs4YNHL%2Fe1a31874-64ca-4ef2-917c-6fd86a1c6ff7.png?alt=media&token=167a684e-2071-45b2-a6c0-138097112ac5","id":"e1a31874-64ca-4ef2-917c-6fd86a1c6ff7","width":2156,"height":1782,"filename":"cf0700d6cba5921e6f2f926f1200394e2c10be287619e26acabaa1c2b81b9a81.png","type":"image/png","caption":"","border":false}]}
```

**Mobile Design**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FQGQiHS0Eiw04Tvs4YNHL%2F7d6cfb1f-7a1b-430d-8f6f-126cfd7e225a.png?alt=media&token=3d7fb975-eda7-4fd1-81a1-8f3ac09b085c","id":"7d6cfb1f-7a1b-430d-8f6f-126cfd7e225a","width":1210,"height":1800,"filename":"143ac0beac8ad274903d4133ee4990e0680c3fa3042cb641fc8d95718bd6ebf1.png","type":"image/png","caption":"","border":false}]}
```

**UI Kit**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FQGQiHS0Eiw04Tvs4YNHL%2F9d6393a2-494a-4d19-ab2d-5e118cf85e61.png?alt=media&token=c2fb654c-7b7c-4b0b-831e-ffc04a3b2983","id":"9d6393a2-494a-4d19-ab2d-5e118cf85e61","width":2730,"height":568,"filename":"0b2677b8b91ff4d56f25ba4af338ee83fe6cb9b42f1574bd89eaa5648dfe67ec.png","type":"image/png","caption":"","border":false}]}
```

So there you have it, folks – a deep dive into the UX and UI magic that makes EZ Wallet tick. But we're not just here to brag; we're here to inspire! If you're a startup looking to make your mark in the world of digital transactions, take a page from our book:

1. Put your users first – always!

2. Keep it simple, intuitive, and engaging.

3. Leverage technology to enhance, not complicate.

4. Infuse every interaction with a human touch.

5. And most importantly, have fun with it!

EZ Wallet UX Design: A Journey of Innovation and Intuition

### **The Challenge and Strategy**

As the art director leading the Near Pay Widget redesign at Unipaws Design Studio, I was presented with a thrilling challenge: to transform a nearly complete widget into a beacon of user-friendliness and aesthetic appeal. This project was more than just a task; it was a journey into the depths of UX/UI design, merging technical expertise with creative vision.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FSZMolspjJWkZLAPuJelc%2Fb27ea9dd-6e4e-454d-b13f-686adb13a0e4.png?alt=media&token=7fbb39ed-c351-4e8d-9c56-4b8c45cc6384","id":"b27ea9dd-6e4e-454d-b13f-686adb13a0e4","width":1500,"height":860,"filename":"НирПэй обложка кейса.png","type":"image/png","caption":"","border":false}]}
```

### **Understanding the Core**

The Near Pay Widget, part of the Munzen ecosystem, needed to do more than just function. It had to invite, engage, and guide users through the cryptocurrency purchase process in an intuitive way. My role was to ensure that every design decision enhanced the user experience while staying true to Munzen's brand identity.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FSZMolspjJWkZLAPuJelc%2Fb17c04d4-a3fd-437b-8c32-00227cf49acd.png?alt=media&token=a77ef5f8-9ba7-4e22-81a9-5d23ee152088","id":"b17c04d4-a3fd-437b-8c32-00227cf49acd","width":1600,"height":968,"filename":"nearpay 29.png","type":"image/png","caption":"","border":false}]}
```

### **Design Philosophy and Execution**

Adaptive Background: The first significant change was introducing a 'Vibrancy'-based dynamic background. This wasn't just an aesthetic choice; it was about creating a responsive environment that adapts to different host websites, ensuring that the widget always looks at home, regardless of where it’s embedded.

### **Intuitive Layout Redesign**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FSZMolspjJWkZLAPuJelc%2Fc8f302f2-0e88-49a6-a590-d32d2be16fe3.png?alt=media&token=6358fef0-3637-4a55-a154-2a1a1b3ce63e","id":"c8f302f2-0e88-49a6-a590-d32d2be16fe3","width":1600,"height":1200,"filename":"nearpay 13.png","type":"image/png","caption":"","border":false}]}
```

**Logo Placement:** I decided to move the logo to the top, using visual hierarchy to establish brand recognition instantly.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FSZMolspjJWkZLAPuJelc%2Fa115fa05-7413-425d-8b5c-465ddd1e29c8.png?alt=media&token=e6428644-a7a8-4a94-ab41-bfcf5fb33f88","id":"a115fa05-7413-425d-8b5c-465ddd1e29c8","width":1600,"height":613,"filename":"nearpay 14.png","type":"image/png","caption":"","border":false}]}
```

**Language Toggle and Mini Guide:** This feature was about inclusivity and user empowerment, allowing users to switch languages effortlessly and access a widget usage guide.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FSZMolspjJWkZLAPuJelc%2Ffe568616-d7f5-498f-982e-30a8173f60b5.png?alt=media&token=2c17c7b9-ba39-4c45-a0da-a71c6da0a63a","id":"fe568616-d7f5-498f-982e-30a8173f60b5","width":1600,"height":896,"filename":"nearpay 27.png","type":"image/png","caption":"","border":false}]}
```

**Promotional Banner:** The KYC-free swap limit banner was a strategic design element, aimed at encouraging higher transaction volumes. It was essential to balance promotional visibility with a non-intrusive design.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FSZMolspjJWkZLAPuJelc%2F00531937-297a-4671-a0f2-cb4769aa12b1.png?alt=media&token=c02465c2-012a-432a-bddc-46a206d767b9","id":"00531937-297a-4671-a0f2-cb4769aa12b1","width":1600,"height":1200,"filename":"nearpay 16.png","type":"image/png","caption":"","border":false}]}
```

**Payment Options:** Streamlining the payment process was crucial. We introduced a unified yet distinct design for Visa and Mastercard, simplifying the user's decision-making process.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FSZMolspjJWkZLAPuJelc%2Fa23555dc-8bab-4b76-be42-11577ed2db02.png?alt=media&token=79077446-3c6f-42c8-b449-15efb438ba14","id":"a23555dc-8bab-4b76-be42-11577ed2db02","width":1600,"height":471,"filename":"nearpay 15.png","type":"image/png","caption":"","border":false}]}
```

**Balanced Composition:** Achieving visual equality between payment and receipt inputs was about reducing cognitive load, making the transaction process as straightforward as possible.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FSZMolspjJWkZLAPuJelc%2Fb8b941ee-8331-4fe8-894f-eeb50aeeff6a.png?alt=media&token=59fa792c-9635-463d-bde5-4ef320aa5610","id":"b8b941ee-8331-4fe8-894f-eeb50aeeff6a","width":1600,"height":566,"filename":"nearpay 18.png","type":"image/png","caption":"","border":false}]}
```

### **Aesthetic Enhancements and User-Centric Functionality**

**Iconography and Navigation Elements:** The redesign of icons and navigation elements was about creating an intuitive pathway through the widget. Each element was crafted to guide, inform, and reassure users throughout their transaction journey.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FSZMolspjJWkZLAPuJelc%2F32366f4e-b967-4664-82e9-101e37168b13.png?alt=media&token=213aad51-b91d-4edd-8865-9e2ff1bb50bd","id":"32366f4e-b967-4664-82e9-101e37168b13","width":1600,"height":471,"filename":"nearpay 19.png","type":"image/png","caption":"","border":false}]}
```

**Responsive Design:** Ensuring the widget's adaptability across various devices was a technical challenge, involving intricate CSS and JavaScript tweaks. The goal was to provide a consistent experience whether on a desktop or a mobile device.

### **Deepening User Experience and Project Realization**

As the art director on this project, my focus was not just on the aesthetic aspect but also on deeply enhancing the user experience.

### **Enriching the User Journey**

**Status States Redesign:** This involved a complete overhaul of the widget's status states. Each state, from loading to confirmation, was designed with custom animations and icons. The objective was to mitigate user anxiety during transactions and provide clear, immediate feedback, thus enhancing trust and satisfaction.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FSZMolspjJWkZLAPuJelc%2Fc21b474b-977c-4566-916c-3bd8893bf006.png?alt=media&token=f295e9ba-32ca-412a-bca6-5b7161e8280c","id":"c21b474b-977c-4566-916c-3bd8893bf006","width":1600,"height":1200,"filename":"nearpay 23.png","type":"image/png","caption":"","border":false}]}
```

**Responsive and Accessible Design:** The widget's redesign focused on accessibility and responsiveness. Implementing ARIA labels and ensuring keyboard navigability were as crucial as the visual elements. This approach ensured that our widget was not only beautiful but also accessible to a wider range of users.

**Performance Optimization:** Speed and efficiency were key. By optimizing load times and implementing techniques like lazy loading, we ensured a smooth, quick user experience. This technical aspect was vital to reduce bounce rates and improve user engagement.

### **The Art of Collaboration and Detail**

**Collaborative Process:** This project was a collaborative effort between designers, developers, and stakeholders. As the art director, I ensured that every design element was not only visually appealing but also technically feasible and aligned with the widget's functional requirements.

**Attention to Detail:** Our design process was meticulous. We delved into micro-interactions and the overall layout, ensuring every aspect of the design was crafted to create a cohesive and intuitive user experience.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FSZMolspjJWkZLAPuJelc%2F2ddcda56-7207-4fe9-b75b-a0f2532c9de1.png?alt=media&token=b4dbd5e9-9256-4cb7-9149-daebc0f78f2b","id":"2ddcda56-7207-4fe9-b75b-a0f2532c9de1","width":1600,"height":1200,"filename":"nearpay 26.png","type":"image/png","caption":"","border":false}]}
```

### **Conclusion**

Leadership and Teamwork: Leading this project was an invigorating experience. Working closely with designer Masha Melnikova and the rest of the team, we turned a concept into a user-centric product that resonates with the Munzen brand.

**Feedback and Impact:** Post-launch, the feedback from Munzen and users was overwhelmingly positive, affirming the success of our design approach.

*This project was not just about redesigning a widget; it was about creating an experience. As an art director, I aimed to blend technical know-how with aesthetic sensibility, ensuring that the Near Pay Widget was not only a tool but an enjoyable part of the user's journey into cryptocurrency. It was a testament to our belief at Unipaws Design Studio that great design is a symphony of beauty, brains, and user-centricity. This project was a true reflection of our commitment to making design not just seen but felt, making a real difference in the user's interaction with technology.*

NearPay Widget Redesign

*In today's digital world, huge amounts of personal information are collected and processed every single day. Keeping this user data private and secure has become a top priority for any tech company or project. Unfortunately, data breaches, hacker attacks, and misuse of personal data have become all too common. That's why it's so important to build strong user data protection practices right into the design of any product or service.*

*In this article, we'll look at the key principles and best practices for ensuring privacy and security when dealing with user data.*

### **Collect only necessary data**

One of the most basic principles of privacy is to only collect the user data that you absolutely need. The more data you gather and store, the bigger the risk if that data ever gets breached or misused.

For example, let's say you're making a simple notes app. You really only need the user's email to create their account, and the content of their notes to store. There's no need to ask for their full name, phone number, address, etc. By keeping data collection to a minimum, you reduce privacy and security risks.

### **Clearly inform users**

It's important to be fully transparent with users about what data you're collecting, how you're using it, and who you're sharing it with. This is usually done through a privacy policy.

But let's be real - most people don't bother reading long, complicated legal policies. The best practice is to also provide a simple, short privacy notice in plain language when users sign up. Something like: "We collect your email to create your account, and the notes you write to store them for you. We won't sell or share your data with anyone else."

### **Secure user data**

Once you've collected user data, you need to store and transmit it securely to prevent unauthorized access. At a minimum:

* Encrypt data, both in transit (using HTTPS) and at rest (stored in encrypted format)

* Restrict access to data, ensuring only those employees who absolutely need it can retrieve it

* Use strong authentication methods like two-factor authentication

* Have systems in place to detect data breaches and respond quickly

For example, a notes app should encrypt notes so that if a hacker broke into the database, the notes would be unreadable. The company should also restrict employee access, so a random marketing person can't view users' private notes, only the small team that works on the app.

### **Give users control**

Put users in the driver's seat by giving them control over their data. Some best practices:

* Let users access, edit, delete their data through settings/account page

* Allow users to opt out of data collection/usage for things like analytics or ads

* Offer privacy settings so users can control things like what's publicly visible

So for a notes app, users should be able to easily delete their account and all notes if they no longer want to use the service. Analytics tracking should be opt-in. And there should be a "private mode" setting to make notes completely private.

### **Minimized data retention**

Don't hold onto user data longer than you need to - that just increases risk. Have a data retention policy that specifies when you'll delete different types of data. Let users know how long you keep their data.

For a notes app, the policy could be that notes are kept until the user deletes them or their account, analytics data is deleted after 1 year, and backups are deleted after 3 months. Communicate this to users.

In our data-driven digital age, protecting user privacy and security is an essential responsibility for any organization. By collecting minimal data, being transparent with users, securing data, putting users in control, and minimizing data retention, companies and developers can create products and services that respect and safeguard people's personal information.

It takes intentional effort to bake in privacy and security - it's not something that happens on its own. But it's well worth doing to build trust with users and do right by their data. The specific practices will vary based on the type of product, but these key principles of "privacy and security by design" can guide the way.

Designing for Privacy and Security: Best Practices for Handling User Data

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FbsscnpAKwV1ON5coIK1K%2F3497bf30-ea93-4fb4-a5fc-d665874bda22.png?alt=media&token=ad33d9ea-2f7f-4e56-8ddd-ec407b503a4b","id":"3497bf30-ea93-4fb4-a5fc-d665874bda22","width":1392,"height":1044,"filename":"11.png","type":"image/png","caption":"","border":false}]}
```

The carousel is a popular UI component for displaying collections of content while saving vertical screen space. However, on mobile devices, users often fail to interact with carousels because the visual cues for swiping are unclear.

Pagination dots and arrow buttons are commonly used to indicate more content, but they have drawbacks. Dots are small and easy to overlook, while arrows suggest tapping rather than swiping and take up valuable horizontal space.

A more effective cue is to use bleeding edges - partially displaying items on the sides of the carousel. This teases users, piquing their curiosity to swipe and explore.

---

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FbsscnpAKwV1ON5coIK1K%2Ff8d79822-1610-471e-a7c4-2570ed60979f.png?alt=media&token=e9aefa8f-b126-44c4-8d8d-4adcd9fb3b0f","id":"f8d79822-1610-471e-a7c4-2570ed60979f","width":1392,"height":1044,"filename":"12.png","type":"image/png","caption":"","border":false}]}
```

For the clearest indication, combine bleeding edges with pagination dots inside a bar. The bar enhances the visibility of the dots, while the edges encourage swiping and the dots communicate the number of remaining swipes.

On mobile, avoid using arrow buttons on carousels as they obstruct content and waste limited screen space. However, they work well on desktop where clicking is standard and space is ample.

To sum up, the key to engaging users with mobile carousels is providing obvious cues tailored to the device. Use enticing bleeding edges and prominent dots to invite swiping and convey the amount of content remaining. Neglecting these cues may cause your carefully curated carousel to go unnoticed.

Making Carousel Swiping Intuitive on Mobile

How We Designed an Investment Platform in Just Two Weeks

## The Right Way to Use Plus Icons in UI Design

As a UI designer, it's important to use visual cues consistently and purposefully. One common icon that often gets misused is the humble plus sign. Let's break down when and how to properly use plus icons in your designs. 

### Why the plus matters

Fundamentally, plus icons represent creation or addition. They signal to users that clicking will allow them to add new data or content to what already exists. This is distinct from icons that represent commands to manipulate existing data.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FvDE94PW5T4nOGYV0A80C%2F66574a87-7ccb-409e-87b5-df3374f71b14.png?alt=media&token=3d1412b8-9ca5-400e-a102-3625c277f307","id":"66574a87-7ccb-409e-87b5-df3374f71b14","width":1392,"height":808,"filename":"1.png","type":"image/png","caption":"","border":false}]}
```

### Combine the plus with labels... sometimes

For maximum clarity, pair a plus icon with a text label, e.g. "+ New Task". The icon allows for quick visual parsing, while the label removes ambiguity.

However, you can often omit labels in areas where the surrounding context is sufficiently clear. For example, a plus icon sitting prominently in the header of a "My Tasks" view shouldn't need a label. The location itself explains the action.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FvDE94PW5T4nOGYV0A80C%2F874b4fc5-fa33-4b81-8374-45decbdd1ee6.png?alt=media&token=ec57b083-e8f1-42d3-90b5-b15bc0c16933","id":"874b4fc5-fa33-4b81-8374-45decbdd1ee6","width":1392,"height":808,"filename":"2.png","type":"image/png","caption":"","border":false}]}
```

### Pair with other icons for even clearer meaning

To make actions as easy to understand as possible, try combining the plus with other icons that represent the type of content being created.

Going back to tasks, you could pair the plus with a checklist icon to represent "Add New Task" without needing any text at all. The meaning should be obvious to most users at a glance.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FvDE94PW5T4nOGYV0A80C%2Fece3df68-c431-4849-91cc-6fbb942f0bda.png?alt=media&token=fa000f6f-050f-4f4f-90ca-ed0b66522562","id":"ece3df68-c431-4849-91cc-6fbb942f0bda","width":1392,"height":808,"filename":"3.png","type":"image/png","caption":"","border":false}]}
```

Don't use the plus for non-creation actions

Overloading the plus icon for multiple meanings is a recipe for confusion. If you use the plus in one place to mean "add" and in another to mean "expand", users will inevitably get mixed up.

For non-additive actions, use other conventional icons:

\- Disclosure arrows for showing/hiding content

\- Gear icons for settings

\- Magnifying glasses for zooming in

...and so on. Stick to existing conventions unless you have a very good reason to deviate.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FvDE94PW5T4nOGYV0A80C%2Ffad6cf14-6d4e-4ad9-9982-531b273a407d.png?alt=media&token=5e72357b-9b9b-4a7d-87ce-d673cee2cc03","id":"fad6cf14-6d4e-4ad9-9982-531b273a407d","width":1392,"height":808,"filename":"4.png","type":"image/png","caption":"","border":false}]}
```

### Key Takeaways

\- Use the plus icon consistently to represent creation or addition

\- Pair it with labels if the surrounding context isn't 100% clear

\- Combine with other icons to make the creative action more specific

\- Don't use the plus to represent non-additive actions

\- When in doubt, rely on established icon conventions

By following these guidelines, you can deploy the plus icon with purpose to make your UI clearer and easier to use. A consistent visual language is key to great design!

Friendly Guide to Using the Plus Icon

## How to Enhance Your Search Fields with Images

As a designer, you're probably familiar with the basic search field that has been around since the early days of the web. You know, the one where users type in what they're looking for and then get a list of results. It's simple, straightforward, and gets the job done.

But let's be real, we can do better than that. Enter the autocomplete feature - the next generation of search fields. This handy little tool displays potential results in a menu based on what the user has typed so far. It's a game-changer, making search faster and easier for users. No more struggling to remember exact terms!

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FvzC7jINkDVdw3jgt4Wyq%2F05e7075a-c485-4e95-8343-0fb0fc90fd98.png?alt=media&token=6bd30add-3a31-4f40-bebc-9e4c393e50cf","id":"05e7075a-c485-4e95-8343-0fb0fc90fd98","width":1392,"height":1044,"filename":"1.png","type":"image/png","caption":"","border":false}]}
```

However, even with autocomplete, users can still face some challenges. Picture this: the suggested search terms are so similar that users can't tell them apart. It's like trying to choose between identical twins - good luck with that!

For example, let's say a user is searching for a specific cryptocurrency token. The menu shows multiple options with similar names, but the user has no idea what sets them apart. It's a shot in the dark, and if they choose the wrong one, well, that's time and effort down the drain.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FvzC7jINkDVdw3jgt4Wyq%2F5827c8c9-af6d-45bf-b0b6-cb220c6074d8.png?alt=media&token=619c4725-8e69-4f77-84e4-bf8d25070496","id":"5827c8c9-af6d-45bf-b0b6-cb220c6074d8","width":1392,"height":1044,"filename":"2.png","type":"image/png","caption":"","border":false}]}
```

The same issue can arise when users need to select a person from a database. They might remember the first name but draw a blank on the last name. Now they're stuck, forced to rack their brain for that elusive surname.

But fear not, my fellow designers! There's a solution: imagery. By including images with your autocomplete search fields, you give users a visual reference to differentiate between similar terms.

Let's revisit our cryptocurrency example. If each option in the menu had a thumbnail image of the token's logo, users could easily recognize the one they're after, even if the names are confusingly alike.

The same goes for selecting people. If the user can't remember Samuel's name, an avatar next to each option can help them pick out the right Joseph based on appearance.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FvzC7jINkDVdw3jgt4Wyq%2F89fc25b8-4a2e-436b-bf00-3eb4ce2e8704.png?alt=media&token=93272042-fbe7-4f75-b953-efd82e87aa03","id":"89fc25b8-4a2e-436b-bf00-3eb4ce2e8704","width":1392,"height":1044,"filename":"3.png","type":"image/png","caption":"","border":false}]}
```

When search terms are practically indistinguishable, imagery becomes the key differentiator. By adding icons, thumbnails, or avatars to your autocomplete menu items, you'll make the search experience far more user-friendly. Plain text just doesn't cut it anymore.

So, my advice to you? Embrace the power of visuals in your search fields. Your users will thank you for it!

How to Enhance Your Search Fields with Images

*Welcome to Poker DAO, where we turned the tables, not just with cards, but with design that feels like your favorite hoodie – comfortable, familiar, yet undeniably cool.*

## **Design Concept**

### **Client's Quest**

Our client tossed us a challenge – craft a poker experience that feels like your go-to app for... well, anything but gambling. They wanted to shuffle away from the casino vibes and deal a hand that's welcoming to the rookie and the seasoned player alike.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FyD0WYJ47zUaYrM2Kqpbd%2F4481886a-96bc-4c19-9ad8-ad646d6e4fb3.png?alt=media&token=fa54b934-7b70-416e-98db-a7bfa1add1ff","id":"4481886a-96bc-4c19-9ad8-ad646d6e4fb3","width":3200,"height":908,"filename":"Unipaws Castle poker dao.png","type":"image/png","caption":"","border":false}]}
```

### **Design Philosophy**

We bet on "cryptic yet cuddly" as our design mantra. Picture a place that doesn't echo the intimidating poker dungeons but rather feels like a hangout spot where the poker faces are smiling emojis.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FyD0WYJ47zUaYrM2Kqpbd%2Ff2d2395b-e8fb-421a-8e11-9e6396673418.png?alt=media&token=c21ffe23-49cf-4971-804b-7ad10836bf48","id":"f2d2395b-e8fb-421a-8e11-9e6396673418","width":3200,"height":2400,"filename":"Unipaws Castle poker dao (1).png","type":"image/png","caption":"","border":false}]}
```

### **Palette & Pixels**

We went all in with soft purples and gradients – think of it as the visual equivalent of a gentle nod across the poker table. Cards and buttons are dipped in classic reds, blacks, and whites, ensuring that even the poker newbie can call the bluff on where to tap next.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FyD0WYJ47zUaYrM2Kqpbd%2Fec635876-d801-4135-b423-12016a9df502.png?alt=media&token=454b8037-ce68-47a0-a38b-f305db9f2d5f","id":"ec635876-d801-4135-b423-12016a9df502","width":3200,"height":2400,"filename":"poker dao-9.png","type":"image/png","caption":"","border":false}]}
```

### **Typography Tells**

Enter Poppins – not the nanny, but our chosen typeface. It’s like that friend who's straightforward yet never dull. Trustworthy, with lines as clean as a royal flush, it makes every word count, just like every chip in the pot.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FyD0WYJ47zUaYrM2Kqpbd%2Fd8fec098-98aa-4a01-935a-867e7173a955.png?alt=media&token=c0e3e949-2cd2-46f0-b40f-0a5658ca1193","id":"d8fec098-98aa-4a01-935a-867e7173a955","width":3200,"height":1326,"filename":"Unipaws Castle poker dao (2).png","type":"image/png","caption":"","border":false}]}
```

### **Modular Magic**

Imagine each element as a chip in our design stack – distinct, purposeful, and perfectly spaced to let your eyes dance across the screen without tripping over unnecessary frills. This is poker, not a puzzle, so we kept the clutter under the table.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FyD0WYJ47zUaYrM2Kqpbd%2Fb6ae3845-a335-4bdf-aa8d-309da327cae7.png?alt=media&token=a61bd240-431a-48eb-ae71-949d44b3db97","id":"b6ae3845-a335-4bdf-aa8d-309da327cae7","width":3200,"height":2400,"filename":"Unip.png","type":"image/png","caption":"","border":false}]}
```

### **Minimalist Mastery**

Here's our bluff – minimalism isn't about having less; it's about having room for more game. We folded away the clutter, leaving only the essence of fun and function.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FyD0WYJ47zUaYrM2Kqpbd%2F52070473-7b05-45d7-aa50-e18695b8ef4a.png?alt=media&token=cd51aa89-1bef-4a85-9a81-56be08846af1","id":"52070473-7b05-45d7-aa50-e18695b8ef4a","width":3200,"height":2526,"filename":"Unipaws Castle poker dao (3).png","type":"image/png","caption":"","border":false}]}
```

### **Immersive Interlude**

We dialed down distractions, so players dive deep into strategy, not settings. The design whispers, not yells, easing you into the zone where it's just you, the cards, and the game.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FyD0WYJ47zUaYrM2Kqpbd%2Fdc0d74ba-6572-4f8e-a635-47365f8fd221.png?alt=media&token=65efe3b9-f0ea-4ced-8491-dffc930cfbc8","id":"dc0d74ba-6572-4f8e-a635-47365f8fd221","width":3200,"height":2130,"filename":"poker dao-11.png","type":"image/png","caption":"","border":false}]}
```

> **So, there you have it – Poker DAO, the game where design isn't just a pretty face; it's the ace up our sleeve.**

---

## **Redesign to Dark Theme**

### **The Revamp Brief**

Our client wanted to shake things up. They said, "Make it premium, but keep it cool. Make it dark, but with the same welcoming vibe." So, we rolled up our sleeves.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FyD0WYJ47zUaYrM2Kqpbd%2F8bd32bf2-1e0e-4c16-a5e7-393efb7f79a6.png?alt=media&token=d697e3e0-9a46-4a7a-a7b0-e530f9856e12","id":"8bd32bf2-1e0e-4c16-a5e7-393efb7f79a6","width":3200,"height":1642,"filename":"Unipaws Castle poker dao (4).png","type":"image/png","caption":"","border":false}]}
```

### **The Rethink**

First, we scrapped the neon lights. We dimmed the background to a classy charcoal, turning the volume down on the visuals so the content could sing. Think of a jazz club – understated, yet undeniably upscale.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FyD0WYJ47zUaYrM2Kqpbd%2F3d15880b-0cd2-4ced-9cb1-684e71546d07.png?alt=media&token=10a10045-5090-4dd6-981d-308400431c10","id":"3d15880b-0cd2-4ced-9cb1-684e71546d07","width":3200,"height":2400,"filename":"poker dao-5.png","type":"image/png","caption":"","border":false}]}
```

### **The Palette Pivot**

We took the purples and put them through a night filter, deepening the shades to elevate the ambiance. The gradients? They're now like a sunset on Mars – otherworldly, yet familiar.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FyD0WYJ47zUaYrM2Kqpbd%2F4514ca45-e749-4981-8546-fd58e96e2700.png?alt=media&token=a28ce958-af40-4e5d-9794-d30a008ffcb9","id":"4514ca45-e749-4981-8546-fd58e96e2700","width":3200,"height":2130,"filename":"Unipaws Castle poker dao (8).png","type":"image/png","caption":"","border":false}]}
```

### **Poppins to Satoshi Swap**

Satoshi Variable, chosen for its sharp clarity, seamlessly fits into our dark theme, elevating legibility with its precise lines and adaptable weight range. This font choice not only complements the aesthetic but also strategically enhances the overall user experience in Poker DAO's premium environment.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FyD0WYJ47zUaYrM2Kqpbd%2Faf729188-55f2-49bb-8030-ba3f847f6637.png?alt=media&token=aef0b422-dddd-4c08-bf35-0b0d93a61182","id":"af729188-55f2-49bb-8030-ba3f847f6637","width":3200,"height":1098,"filename":"Unipaws Castle Poker DAO (5).png","type":"image/png","caption":"","border":false}]}
```

### **Bringing Stories to the Table: Custom UI Illustrations**

And let's chat about vibes. Our dark interface is sleek, sure, but it needed some pep. Enter our illustrations: a dash of fun, a sprinkle of playfulness, making the whole thing pop and giving you that “welcome to the fam” feeling. The goal? To make those little moments in the app – like when you’ve got zilch transactions or your wallet’s taking a nap – not just clear, but ridiculously obvious, even if you’re running on zero caffeine. We're talking about little visual storytellers that make every "oops" and "aha" in the user journey as clear as day. It's like having a buddy pointing the way, only cooler and less chatty.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FyD0WYJ47zUaYrM2Kqpbd%2F6667339e-c858-4a6c-804c-3f8d93a927d7.png?alt=media&token=d570c63b-a7db-48e3-a202-1769e843413a","id":"6667339e-c858-4a6c-804c-3f8d93a927d7","width":3200,"height":2470,"filename":"Unipaws Castle poker dao (6).png","type":"image/png","caption":"","border":false}]}
```

### **Buttons like there is no**

In our quest for supreme minimalism, we said goodbye to buttons, transforming them into sleek, understated text prompts. This bold move strips the interface back to its core, spotlighting the game's mechanics and keeping the player's focus laser-locked on the strategy at hand. No distractions, no frills – just pure, undiluted poker play.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FyD0WYJ47zUaYrM2Kqpbd%2F5eeed16d-47de-46a3-aa9e-595ce4f4f572.png?alt=media&token=f4b5c93d-2815-4c39-9826-215be606ce84","id":"5eeed16d-47de-46a3-aa9e-595ce4f4f572","width":3200,"height":1112,"filename":"Unipaws Castle poker dao (7).png","type":"image/png","caption":"","border":false}]}
```

### **Lobby Overhaul**

The lobby is your first impression, so we dressed it up. Each game tile got a frosted glass effect, like looking through a window into another world. The 'Quick Play' button is now an understated jewel, polished to a shine.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FyD0WYJ47zUaYrM2Kqpbd%2Faadc1862-5b7c-4b76-a688-50ecc196bb67.png?alt=media&token=b5e346fe-6182-48ee-ac41-4710608eaaba","id":"aadc1862-5b7c-4b76-a688-50ecc196bb67","width":3200,"height":2400,"filename":"Unipaws Castle poker dao (9).png","type":"image/png","caption":"","border":false}]}
```

### **The Technical Tango**

Under the hood, we had to ensure the dark theme didn’t turn into a black hole. We worked on contrast ratios, ensuring that readability never sleeps, and accessibility is king. Each element was tested, from the neon glow of the cards to the shadow play of the chips.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FyD0WYJ47zUaYrM2Kqpbd%2F74a17061-35dc-414c-a964-0be167b070e0.png?alt=media&token=65bd62a4-3454-48c0-b1b2-5de6c6e24b48","id":"74a17061-35dc-414c-a964-0be167b070e0","width":3200,"height":2400,"filename":"Unipaws.png","type":"image/png","caption":"","border":false}]}
```

This was no mere facelift; it was a heart transplant for the design. We kept the soul of Poker DAO – the joy, the thrill, the rush – and gave it a body that matched its spirit. Welcome to the new era of Poker DAO, where every click is a story, and every game is an epic.

> **Poker DAO's transformation was more than just a new suit; it was about crafting an experience where every detail, every pixel, tells part of a greater story. We fine-tuned the interface with precision, ensuring that the journey from lobby to leaderboard feels less like a sequence of clicks and more like a rite of passage. Now, it stands not just as a gaming platform, but as a beacon of design – a testament to where artistry meets play, and where every player's story is given the spotlight it deserves. Welcome to the table, the game has truly changed.**

Poker DAO Design

**Hey everyone!**

*Today, I want to share with you a more efficient way to present data that's much more engaging than your typical tables. It's all about turning those data tables into data cards!*

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FzzWEMgNZlHSXPe7O3jaB%2Fc564bec5-4bbe-4b38-b58c-8cf8357fe348.png?alt=media&token=fe7227c4-31ad-4b9d-b538-975a1ee9ea71","id":"c564bec5-4bbe-4b38-b58c-8cf8357fe348","width":1392,"height":1044,"filename":"1.png","type":"image/png","caption":"","border":false}]}
```

---

Imagine you have a data table with six records and seven different fields in the header. When you're trying to find a specific value, you need to scan down the first column to find the record you want, then scan across the row to locate the value. It can be quite a challenge for your eyes! And if you're not sure what a particular data type is, you have to look all the way up to the column header to double-check.

But there's a better way. Instead of making your eyes do all the work, let's use visual recognition to differentiate the data. That's where data cards come in!

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FzzWEMgNZlHSXPe7O3jaB%2F3581b0b1-c1df-4d8b-a284-8e57e38ac82e.png?alt=media&token=7b47092b-d14b-4fc4-a8fa-33ccdb9cbdd0","id":"3581b0b1-c1df-4d8b-a284-8e57e38ac82e","width":1392,"height":1044,"filename":"2.png","type":"image/png","caption":"","border":false}]}
```

---

With data cards, all the data values stay the same, but they get a new look. There's a hierarchy based on data type, so your eyes don't have to travel far or fixate on irrelevant data while scanning. Once you find the record ID, spotting the value you need is much easier.

Data cards make finding record IDs simple with eye-catching visual cues. They're always in the top left corner of the card header, so they're easy to spot. And all the ID data fields are combined into one robust field. You can even add a photo of the client or company logo to help you identify the record faster.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FzzWEMgNZlHSXPe7O3jaB%2F61bf564d-18a2-4349-8760-3cf0310a548e.png?alt=media&token=c36bde02-50e4-4343-b75c-cca72842830f","id":"61bf564d-18a2-4349-8760-3cf0310a548e","width":1392,"height":1044,"filename":"4.png","type":"image/png","caption":"","border":false}]}
```

---

But that's not all! With a handy card sorter, you can sort the cards by any field using a dropdown menu. The cards are ordered by column, not by row, so you can scan the values vertically like a table. It's a real time-saver!

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FzzWEMgNZlHSXPe7O3jaB%2F59fcd94f-f49c-4ea2-9162-a6d13c56160f.png?alt=media&token=fba9e3b4-749c-4507-820e-21b4a2fab363","id":"59fcd94f-f49c-4ea2-9162-a6d13c56160f","width":1392,"height":1044,"filename":"3.png","type":"image/png","caption":"","border":false}]}
```

---

Another great thing about data cards is that they make it easy to display images and graphics in context. For example, you can see a client's status badge while checking out their last contact, projects, and meetings to get a feel for their current activity. Trying to do that on a table can be quite challenging.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FzzWEMgNZlHSXPe7O3jaB%2F5bcd8c43-1026-4bbd-949b-5df21e65f743.png?alt=media&token=00b71f66-4120-4322-b969-bdbb8fc596c5","id":"5bcd8c43-1026-4bbd-949b-5df21e65f743","width":1392,"height":1044,"filename":"5.png","type":"image/png","caption":"","border":false}]}
```

---

Analyzing records on a table can be difficult because data in adjacent rows can interfere with your focus. But with data cards, all the data is contained within the card, so you can focus on a record without any distractions.

Comparing stats is a common task, and data cards make it easy by putting all the stat numbers together in the card's footer. The primary stat number gets the spotlight in the bottom-right corner, while secondary stats are on the left. And since stats are super important for analysis, they get some extra color contrast to make them stand out.

Say goodbye to horizontal scrolling issues! With data cards, adding more fields just makes the card taller, not wider. No more missing out on fields that are hiding off-screen.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FzzWEMgNZlHSXPe7O3jaB%2Feec2ed84-8c87-4d9b-9d39-a0f0efeddbd3.png?alt=media&token=ca79beac-d82e-4c54-b422-ecd36b4f16cf","id":"eec2ed84-8c87-4d9b-9d39-a0f0efeddbd3","width":1392,"height":1044,"filename":"9.png","type":"image/png","caption":"","border":false}]}
```

---

Data cards also make it easier to read long text values. There's plenty of room for the text to grow without breaking the layout or causing awkward wrapping. You can even put multiple values side-by-side in the card's body for easy comparison. And field titles are displayed with each value, so you don't have to keep scrolling up to the column headers.

Want to rearrange your cards? No problem! Just grab the header and drag the card wherever you want it. It's a simple and intuitive way to reorganize your data.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FzzWEMgNZlHSXPe7O3jaB%2Fedf2c4b7-64b8-45fd-a90d-8b7366e44201.png?alt=media&token=5d9e78d1-ac8f-4c6a-a35c-b728f289c77a","id":"edf2c4b7-64b8-45fd-a90d-8b7366e44201","width":1392,"height":1044,"filename":"6.png","type":"image/png","caption":"","border":false}]}
```

---

Sometimes you need to see more details about a specific field. With data cards, you can click to expand a table sheet from the side, which overlays the current screen so you don't lose context. This detailed view is perfect for breaking down stat numbers or displaying long data lists. And if you need to go even deeper, you can add another layer of disclosure to each table row.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FzzWEMgNZlHSXPe7O3jaB%2F0e431bd3-6b71-4a20-a130-98ce6170e80a.png?alt=media&token=7d42b393-9a94-4ceb-b9b8-af1fd4b44210","id":"0e431bd3-6b71-4a20-a130-98ce6170e80a","width":1392,"height":1044,"filename":"7.png","type":"image/png","caption":"","border":false}]}
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FzzWEMgNZlHSXPe7O3jaB%2F4489a106-665e-43df-b298-276c5aac1ac8.png?alt=media&token=be5d69cb-f72f-4404-8798-6f5468aac7a2","id":"4489a106-665e-43df-b298-276c5aac1ac8","width":1392,"height":1044,"filename":"8.png","type":"image/png","caption":"","border":false}]}
```

---

Of course, every card needs an action menu for editing and deleting. Just click the ellipsis button in the top-right corner to access these options.

Pagination can be a real challenge with large tables, but data cards make it much more manageable. Instead of scanning one long table row at a time, you can scan multiple cards per row. And if you want to compare values, just switch to the column order view. **It's that simple!**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIvmbRXMiOIZoKfcuNkNvxrZbVYr2%2FzzWEMgNZlHSXPe7O3jaB%2F751b8f0b-4ce4-406c-a6e7-805719934329.png?alt=media&token=7838d64a-5f99-4ffc-a314-1082983f3630","id":"751b8f0b-4ce4-406c-a6e7-805719934329","width":1392,"height":1044,"filename":"10.png","type":"image/png","caption":"","border":false}]}
```

So, here's the anatomy of a data card: the header is for the record ID, status, drag, and menu actions; the body is for longer textual data values; and the footer is for stat numbers. By breaking it down like this, the hierarchy becomes very clear.

Transforming tables into cards might not work for every situation, but it's definitely worth considering! Hierarchy through size, shape, color, placement, and layout can make data much easier to scan and analyze. And if you give users the option to toggle between table and card view, they can choose what works best for them.

At the end of the day, it's all about making the most of our human capacity for visual recognition.

**When you do that, you'll see a big difference in the user experience.**

Simplifying Data Tables: A Faster and Better Way

Turning "meh" into "wow", one project at a time

Crafting UX/UI Design Wonders ✨

Reimagined the Faeng website, transforming it into an immersive, adventurous experience.

Collaborated with designer Masha Melnikova to create striking visuals using Midjourney and incorporated lightmorphism for added depth and impact.

The redesigned website takes users on a captivating journey through data and mountain landscapes, featuring an animated night sky that serves as a memorable focal point.

Crafted a small corporate website for Münzen, striking a balance between a strict aesthetic and signature design elements. Incorporated engaging illustrations, a memorable UI, and subtle design metaphors to create a unique and captivating online presence.

This website served as the foundation for the development of the broader Münzen brand identity.

Münzen Website Design

Designed the user experience and interface for EZ Wallet, a platform that seamlessly converts cash into crypto, in collaboration with Only Fans.

Created a simple, enjoyable user journey that aligns with the partnership's spirit, incorporating thoughtful details and intuitive design elements throughout the platform.

EZ Wallet Platform Design

Redesigned the Near Pay Widget for Münzen, focusing on user-friendliness and visual appeal. Implemented a dynamic 'Vibrancy' background that adapts to different contexts and optimized the layout for improved brand recognition. Streamlined the payment process and ensured a consistent, intuitive experience across screen sizes.

The redesigned widget provides a seamless, enjoyable gateway to crypto transactions.

Collaborated with a startup to redesign their platform based on metrics, indicators, and local research. Conducted a thorough audit to identify areas for improvement, redesigning core service pages, revamping the filter system, navigation, and client request form. The startup focuses on booking and organizing corporate retreats for large companies. A unique challenge was tailoring the design to an older demographic.

Created UX prototypes, designed custom icons for all service sections (similar to Airbnb), developed a new UI design concept, and provided valuable recommendations for the brand's future use of the design.

TeamOut App Redesign

Transformed a challenging project with rough user flows into a successful, user-friendly app. Radically optimized the UX through iterative design and collaborated with the client on the concept, UI, and states.

Assisted with the app's launch, email campaigns, and ongoing design support, contributing to its continued growth and success.

Stored App

Streamlined Tokapi's NFT marketplace by revamping the checkout flow and optimizing navigation elements. Despite budget constraints, the targeted improvements led to a 39% increase in repeat purchases, demonstrating the significant impact of strategic UX enhancements.

Tokapi NFT Marketplace Redesign

Transformed Cedro's existing concept for a crypto lending platform into a fully redesigned product. Collaborated with the founders to evolve their initial ideas and create a user experience that prioritizes intuitive navigation and seamless interactions.

The redesigned app makes handling investments and loans simple and enjoyable, showcasing the power of user-centric design in the crypto space.

Cedro Crypto Investment App

Overhauled XYRO's crypto platform, introducing a wide range of games from classic favorites to unique originals.

Developed quirky animal mascots for each game using Midjourney, adding a playful and memorable touch to the platform's visuals. Crafted immersive interfaces with lively animations that celebrate every win. Built the platform from the ground up, focusing on UX and UI to ensure smooth, enjoyable interactions throughout.

Incorporated sleek vector illustrations and a distinctive logo to create a cohesive, exciting user experience.

XYRO Crypto Platform

Designed an innovative pitch deck for Retinica, combining familiar elements with fresh, engaging visuals.

Developed a graphic system that effectively communicates the high-end nature of the company's medical service. Translated complex data into easily digestible insights, creating a compelling narrative that showcases Retinica's vision and execution capabilities.

Retinica Pitchdeck

Another book publisher with whom we worked extensively on numerous releases. Developed brand identities for subsidiary publishers Inspiria and Audrey, designed the Inspiria launch website, created dozens of book trailers for important releases, and developed design guidelines for the publisher's Instagram content and other branches.

Publisher Subsidiary Identity Development

Led an outsourced team that performed local UX optimizations and created a UI kit for the service's design system. Our tasks included analyzing user research data to implement interface improvements and editing non-critical components of the service's design system.

Crypto Portal UX Optimization

The second NDA project, working with the well-known Russian tech giant. My studio created special projects for a marketplace catering to foreign brands, developing advertising campaign concepts, designing materials, and ensuring compliance with the marketplace's guidelines. While not particularly groundbreaking, collaborating with such a large company is a rare opportunity for young studios.

Foreign Brand Marketplace Advertising

Developed and deployed a high-converting pitch deck and landing page for a prestigious Swedish crypto advisory firm, whose clientele includes Y Combinator startups.\
\
Despite strict NDA constraints, we delivered a powerful marketing toolkit that significantly boosted their online presence. By creating a concise yet compelling pitch deck and an optimized landing page for paid traffic, we achieved a remarkable 58% increase in conversion rates.

Swedish Crypto Advisory Firm

Developed a visually striking landing page for Ante's gambling app, steering clear of generic stock photos. Leveraged Midjourney to create captivating visuals that highlight the app's characters in a unique and engaging way.

Incorporated lightmorphism to give the first screen an immersive, cinematic feel reminiscent of a jungle casino film.

The result is a compelling user experience that draws visitors into the app's world from the moment they arrive.

Ante App Landing Page

Collaborated with lead designer Masha Melnikova to create a pitch deck that stands out in the NFT space.

Opted for a dark theme to make NFT colors pop and incorporated a mix of design styles, including UI, Swiss, and Neo-brutalism, to keep viewers engaged. Selected Helvetica Neue for its on-screen readability and sharp appearance.

The final design showcases the potential of blending styles while staying true to the essence of NFTs.

Dropspot Pitchdeck

Revitalized Rollabit's gambling platform with a vibrant, engaging design. Introduced bright, acid-colored highlights and smooth, rounded edges to create a visually appealing interface that encourages user interaction.

Prioritized both aesthetics and usability, ensuring that the platform is not only stunning but also fun and intuitive to use.

This project demonstrates the impact of combining visual appeal with user-focused design principles.

Rollabit Gambling Platform

Created an attractive and functional website for the Promobile team to complement their analytics platform. The site showcases the company's team, services, and offerings while compellingly explaining why everyone should eagerly await the release of their incredible platform.

Promobile Crispy Website

The world's leading company in translations and localizations for iGaming, esports, and gambling projects. We created a large corporate website with numerous clever ideas, such as a dollhouse featuring company departments on the main page, numerous micro-interactions and animations, unique department pages, an unusual and memorable UX, and an even more memorable and vibrant UI.

Almost the entire design studio team worked on this project.

Multilingual iGaming Website Design

Developed Horizon's launchpad with a limited budget, delivering a functional and efficient platform that meets the client's needs.

Horizon Launchpad

Built Münzen's vendor app from scratch, starting with user flows and simple UX prototypes to ensure a smooth, intuitive experience. Conducted thorough testing and optimization to refine the app's usability. Developed a sleek, modern design that aligns with the Münzen brand, and translated it into a pixel-perfect UI. Optimized the app for web, resulting in a polished, user-friendly product that streamlines vendor interactions.

Münzen Merchant's Widget

Crafted a visually stunning and vibrant wallet with innovative usage scenarios and functionality. Implemented features such as the ability to pay for regular subscriptions using a custodial wallet with an on-ramp.

Bold Custodial Subscriptions Crypto Wallet

Redefined the online poker experience with Poker DAO, creating a warm, inviting atmosphere through a minimalist design approach. Utilized a calming color palette of soft purples and deep charcoals to differentiate the platform from traditional gaming portals. Crafted an intuitive, immersive user interface with engaging visuals and thoughtful layouts to elevate the gaming experience.

The result is a beautiful, user-centric poker platform that sets a new standard for online gaming.

Designed a comprehensive, large-scale analytics platform for app marketing and promotion. Collaborated with the Pixpowder team to create a feature-rich solution, including extensive analytics, toggles, metrics, reports, asynchronous campaign launches, multi-language support, a custom design system, and a dark theme.

Worked closely with the development team to ensure accurate implementation and optimal performance.

Promobile Analytics Platform

Worked with this top-20 federal bank in Russia through my design studio, Lunapark. Developed a simple online banking system, managed print and advertising materials, analyzed website metrics, and optimized design processes for digital and print advertising products. Created a year-long anniversary design for the bank's 25th anniversary and several important special projects.

Corporate Bank Design Overhaul

One of the few NDA projects mentioned here, It's is a service that collects and analyzes big data on urban communications and infrastructure at the level of individual buildings, streets, districts, cities, and even entire regions. It provides insights into popular products in specific areas, credit usage, road traffic, utility payments, and more.

Pixpowder designed the entire client and administrative interface from a UX perspective, prototyped and optimized user flows, created the UI, graphics, and metrics, and developed responsive versions for web and mobile use.

This challenging project was one of the most extensive in my career.

NDA-project

Developed a highly customizable acquiring for Coin Pipe that automatically adapts its appearance based on the connected vendor's website. Implemented a dynamic system that pulls assets from the vendor's site to generate a fully branded look and feel on the fly.

This innovative approach enhances the user experience by creating a seamless, tailored wallet interface for each vendor.

Coin Pipe Embed Acquiring

Developed a simple and elegant wallet for the Munzen holding ecosystem, which I mentioned earlier. Designed and created UI for all basic mechanics, added NFT management, and successfully launched the project.

Simple Munzen Ecosystem Wallet

Designed a warm, inviting landing page for Coin Pipe that breaks away from the complexity often associated with crypto platforms. Employed a story-led design with calming visuals to guide users through the Coin Pipe experience, fostering a friendly, accessible introduction to the crypto space.

Coin Pipe Website

Launched quv.io's landing page, iterating from the MVP to the final release. Created a clean, welcoming design that embodies the simplicity and user-friendliness of the crypto wallet. Focused on making visitors feel at home, establishing quv.io as the most accessible and inviting option in the market.

Quv Website and Wallet App

Collaborated with Rockethub, a gambling platform featuring skins from popular video games like CS:GO, Rust, and Dota, owned by an incredibly energetic individual.

Conducted a complete redesign of the platform while optimizing the UX. Developed new flows from scratch, such as multimodal games with 4, 5, or 6 lootboxes in a single line. Assisted the owner, Martinez, in defining the brand identity, which evolved throughout the process.

Created numerous images using Midjourney and designed a chat system and rewards mechanics for user activity on the platform.

CS:GO Gambling Skins Platform Redesign

Russia's largest book publisher at the time. Collaborated through my design studio to create dozens of book trailers for significant releases, assist with website metric analysis, and develop the complete corporate identity and design production for the "What to Read Next" (CCD) online festival for its first two years. This annual event, organized in partnership with VK.COM and other business leaders in Russia, was groundbreaking in many ways, with a live online audience of 500,000 people.

Book Publisher Festival Branding

Developed a pitch deck for a metaverse project featuring a full-fledged city with apartments, suburbs, parks, office centers, and more.

While the project was relatively straightforward, the pitch deck helped the client raise nearly a million dollars in the first round of investment.

Focused on effectively packaging the project's value proposition, clearly presenting the roadmap, and refining the business positioning to ensure the unique selling point was concise, clear, accessible, and relatable to the target audience.

Reach Pitchdeck

Created a visually stunning launchpad for Meadow, overcoming limited client input and the absence of brand guidelines. Trusted instincts and creative expertise to design one of the most attractive launchpads in the web3 space, prioritizing flexibility and innovation in the MVP development process.

Meadow Launchpad

Developed a sophisticated corporate website for iRest, a Dubai-based real estate and capital management firm.

Incorporated impressive effects, video headers, and an understated luxury aesthetic to showcase iRest's unique services.

Prioritized a seamless user experience while highlighting the firm's expertise in Dubai real estate and financial management, striking a balance between functionality and exclusivity.

iRest Website Design

Completely redesigned and revitalized the corporate website for the $PAWTH cryptocurrency, delivering a modern, empathetic, and visually striking platform. Initially engaged for comprehensive business consulting, we seamlessly transitioned into a full-scale redesign project.\
\
Leveraging the currency's unique value proposition of charitable contributions to animal welfare, we crafted a design that not only strengthened the currency's brand image but also modernized its overall vibe. By placing a strategic emphasis on showcasing rescued animals, we created an emotionally resonant and impactful user experience.\
\
The result is a website that not only meets business objectives but also effectively communicates the project's core values, significantly enhancing user engagement and emotional connection with the brand.

Pawtherium

Rapidly developed and continue to support, refine, and enhance a Telegram web API tapper application with a mind-blowing visual style. Created the app from scratch and maintain it independently. Within the first month of launch, with minimal marketing expenditure, the app attracted 250,000 users. Currently preparing to launch an L2 Chain for developing new applications within this project framework.

Roketo App

In just two weeks, we designed a full-fledged investment platform for Cybro.io, featuring Vaults where users could invest USDT funds from various networks under different APY indicators. By combining the profitability calculator and deposit/withdraw functionality into a single, user-friendly widget, we streamlined the user experience and delivered a visually appealing, functional, and user-centric platform that met both business objectives and user needs within an impressively short timeframe.

Cybro Vaults dApp

A startup with a web application that aids in the analytics and management of advertising campaigns related to sports teams, players, and clubs. Users can select the most profitable investments for their advertising campaigns and formats, such as jersey advertising or home arena advertising, using tables filtered by various sports.

This was the first Pixpowder project I led as an invited art director. We designed the entire UX and UI of the platform, developing flows for filtering, budget selection, user data input, result output, registration, and more.

The result was vibrant and sporty, and I'm pleased with the outcome.

Sports Advertising Analytics Web-App

A widget project by Denis Balon for testing marketing hypotheses and creating embeddable polls on any website.

Despite its simplicity, we implemented several clever UX and UI micro-solutions, created dark and light themes using tokens, and designed a smooth, optimized UX.

The project's standout features were the speed of design development and the optimized, smooth release.

Embed Lightweight Poll Widget Design

Rapidly executed critical upgrades for this Tier-1 project on the Blast chain, focusing on key user-centric features. In a short timeframe, we completely overhauled multiple core functionalities, including staking mechanisms, referral program dynamics, and the platform's internal points system.\
\
Our approach combined technical expertise with creative flair, resulting in a vibrant and engaging user interface that significantly enhances the overall user experience. This project showcases our ability to deliver high-impact improvements efficiently, even within the constraints of established blockchain ecosystems.

BlastUP Flows Redesign

A web app for exchanging cryptocurrencies from different blockchains using Bridge technology.

An interesting project with a significant UX component and creative solutions.

Although it never launched, we designed the entire UX, including user flows for balance replenishment, multi-bridge and multi-blockchain swaps, contextual currency search, and more.

Crypto Bridge Swap UX & UI

Got fed up with the same ol' Unsplash pics and decided to shake things up for my fellow Midjourney enthusiasts. No more stock photo snooze fest. We're making brand visuals for clients that are legit unique and jaw-dropping. Welcome to the era of designing with flair and a punch of uniqueness. Because who said you can't stand out and wow your clients without digging through stock galleries? Not us, that's for sure. Let's ditch the generic and make some design magic. 🎨✨

Artomatic_4K

Starting as a senior designer and advancing to the role of creative director, I spearheaded numerous projects at Artonica. I developed my leadership skills, managing creative teams, engaging with clients at all levels, and presenting products effectively.

Our client roster included prestigious brands such as Suzuki, VK, Haval, Efes, and Sony.

Creative Director

Joining Plusmedia as a designer for two massive web projects, gorko.ru and svadba-msk, I quickly realized the complexity of the challenge ahead. Rising to the occasion, I rapidly acquired new skills and adapted to the fast-paced environment, delivering successful results.

UX/UI Designer

Co-founding Lunapark, a design studio built from the ground up, I gained comprehensive experience in all aspects of the design and project management process. Our diverse clientele ranged from small businesses to large corporations, including Severgazbank, EKSMO, Yandex, VK, and Wargaming. I'm happy to provide a separate presentation detailing our projects upon request.

Co-Founder | Art Director

As a freelancer, I experienced the full spectrum of challenges: endless revisions, non-payments, and occasional chaos.

Working primarily through freelance marketplaces, I honed my skills in graphic design, copywriting, and content management, tackling a diverse range of projects.

Design / Copywriting

Currently, I am the founder of Unipaws, a boutique design studio established in collaboration with Marie, lead designer from Pixpowder, and Alice, an exceptional project manager.

We are building our studio at our own pace, prioritizing quality, creativity, and a love for our craft over rapid expansion.

Our focus is on creating work that reflects our passion and values.

Transitioning to an in-house designer role at ArtCream, a pioneering web design company known for its cutting-edge work, I collaborated closely with clients on website design and iterative improvements. This experience sharpened my client communication and project management abilities.

Designer

Joining Pixpowder as an experienced art director, I found an exceptional product design studio and the best team I've ever worked with. In this supportive and inspiring environment, I not only forged genuine friendships but also co-created a thriving studio from scratch.

I developed numerous processes at both macro and micro levels, and contributed to over 50 projects.

Art Director

I turned a unique opportunity into a thriving venture when I convinced a popular VK community admin to fund my idea for an online magazine. Assembling a talented team, I launched LOOK3, effectively monetizing it through advertising and special projects.

Ivan Kalkaev

2024