A Diamond in the rough

Glazy.org is a non-profit platform developed by Derek Philip Au, a solo software developer who also has a second career as a ceramicist and artist (just like me!). His passion project combines both worlds into this unique website where ceramicists and fellow alchemists can share recipes and stay updated on the latest materials, with a special focus on those from different continents.

Let's Start Polishing the Gem

Join me as we dive into the product, translating its structure into Figma while documenting and writing feature requests whenever I spot opportunities for improvements. Through this process, we’ll uncover the strengths and potential areas for enhancement, bringing clarity and refinement to this valuable tool.

Timeline

10.09.2024 - today

Tools

Figma

1. Design System

To begin, I translated the product's components and styles into Figma. While working, I used screenshots as a reference and consistently adhered to the 4-pixel rule throughout the process. Based on what I discovered through testing and exploring the developer tools, I created the components and translated my initial insights into feature requests.

Design System Adjustment Request 001:

Title: Button State Update

Problem: Looking at the button types, some states either didn’t visually differ from one another or were not defined at all, meaning they were missing. Additionally, there was a lack of consistency, as some buttons became brighter while others became darker during interactions.

From a usability perspective, this is problematic because clearly defined button states (such as hover, active, disabled, etc.) provide essential feedback to the user. Without these visual cues, users may struggle to understand whether an action has been performed or if a button is interactable, leading to confusion and frustration.

Moreover, consistency in how buttons behave is critical to maintaining a cohesive user experience. If buttons respond differently to similar interactions (e.g., some becoming brighter, others darker), it can disrupt the user’s understanding of how the interface works, leading to uncertainty. A consistent approach helps build predictability, allowing users to navigate more smoothly and confidently.

Description: Several button states were updated to ensure that their visual differences are clear and distinct from one another, with a consistent approach applied across all button types.

Design System Adjustment Request 002:

Title: Color System Update

Problem: While updating the buttons, I found the need to add primary colors and neutral shades. I also redefined the neutrals, shifting them from purely grayscale tones (achromatic colors) to shades derived from the primary color palette.

From a user experience perspective, this approach is more visually pleasing. Neutral tones based on the primary colors create a more harmonious design, reducing visual tension and making the interface feel more cohesive. It prevents stark contrasts that can feel jarring and ensures the entire color system feels unified and well-balanced.

Description: Added additional shades to the color palette and redefined the neutrals to be more cohesive with the primary colors.

Feature Requests

The next step involves product discovery and enhancing the user experience. I'm approaching this by analyzing the product from the perspective of different personas, such as a beginner in glazing and a glazing expert.

Feature Request 001:

Title: The Interactive UMF Chart

Problem: The visual background of the UMF chart provides feedback on the glazing outcome, but this is unclear for beginners. To address this, the chart should become interactive, offering additional feedback on specific areas to enhance clarity for users with different levels of experience.

From a user experience perspective, providing this extra information helps prevent users from feeling overwhelmed due to a lack of guidance.

Description: Introduce interactive overlays to the UMF chart to offer detailed insights.

Hint: This feature request is a work in progress. I’m currently exploring two color schemes. The first prioritizes accessibility, particularly for users with color blindness, and minimizes confusion. The second is closer to the original design and appears more subdued. Ongoing research will determine the optimal approach. Updates will follow.

TBC.

Feature Request 002:

Title: (Working Title: The Wild Cards)

Problem: In this view, multiple aspects are visible at once. The design of the buttons requires a content update to avoid confusion regarding their functions. Every linked text appears in blue, which creates a lack of hierarchy and a cluttered impression due to the varying sizes of the cards. We'll also reassess the relevance of all functions and information presented in this view. Ultimately, the user should receive clearer guidance in this area.

Description: TBC.

Hint: This is a work in progress, but I'll go ahead and show you the current "before" screenshot. 👇

Less Distraction, More Ease for Effortless Navigation 👇

The article is a work in progress.

Latest Update: 18.09.2024