Station UI
Open-Source Component Library for Elixir & LiveView Native
Station UI originated as an internal DockYard project designed to streamline the development of fast, native mobile experiences. It achieves this by providing pre-built, customizable UI elements. By prioritizing accessibility, responsiveness, and seamless team collaboration, it transforms complex development processes into efficient Minimum Viable Products (MVPs).
The Challenge
Many traditional component libraries either gate advanced features behind paywalls or fail to address native user experience (UX) subtleties. Our imperative was to create a free, highly extensible system that successfully balanced speed, customization, and inclusivity without compromising developer productivity.
My Contribution
I collaborated closely with front-end engineers to refine the atomic design principles. My work included prototyping interactive components, ensuring cross-platform consistency, and conducting comprehensive user testing and accessibility audits.
Design Process:
-
Defining the User
We aimed to create a solution for all cross-functional teams. It was designed to significantly accelerate the workflow for both designers and engineers, while also enabling non-technical users, such as the marketing team, to independently build content pages.
-
Setting Principles and Terminology
I conducted an extensive audit of competitor libraries and user pain points to establish clear design principles. Key principles included “atomic flavoring” for scalable theming and “device-first” interactions. These shared principles fostered a common language across all teams, which expedited collaboration and consistently guided development decisions toward the primary user's needs.
-
Prototyping
I developed Figma prototypes for over 20 components, including complex features like sortable lists, providing engineers with live previews for immediate feedback.Built Figma prototypes for 20+ components, complex features like sortable lists, with live previews for engineer feedback.
-
Iteration and Testing
Usability tests were conducted with over 15 developers. The subsequent refinement based on this feedback successfully boosted adoption metrics by 40% during the early beta phase.
From inception, our components were designed to adhere strictly to the native user experience best practices and guidelines of both Android and iOS. This focus allows teams to rapidly develop intuitive experiences before applying a custom brand style.
Launch and Impact
Station UI launched with a robust set of 50+ components, complete with a live playground for real-time experimentation and GitHub integration for simplified forking.
For early adopters, it reduced build time by 60% and established a collaborative platform for smooth design-development handoffs. Today, it successfully powers innovative Elixir applications, serving as proof that thoughtful, strategic design unlocks limitless potential.
