The Ask
Boardssey aimed to create an engaging and intuitive platform for board game enthusiasts, streamlining their experience from game discovery to purchasing. The primary ask was to refine the UI based on existing wireframes and product manager recommendations, with a particular focus on usability and accessibility. Given that development would be handled by a third-party developer who wouldn’t be available for consultation, it was crucial to ensure that the designs were clear, implementable, and adaptable to the provided components and libraries. The challenge was not just to create visually appealing designs but also to consider the constraints of development, making the UI both practical and delightful for users.
My Role
As the lead UI designer, I collaborated closely with the Co-Founders and the Game Board Specialist. Our existing professional relationship allowed us to quickly align on project goals and expectations. My primary responsibilities included refining the UI to ensure it was user-centered and aligned with the product’s vision. I translated wireframes into high-fidelity designs, incorporating feedback from product managers while adhering to principles of usability and accessibility. My role also extended to preparing design assets and guidelines for the third-party developer, ensuring a seamless handoff that minimized the risk of misinterpretation or implementation errors. This involved three targeted feedback sessions, each lasting one hour, to keep the design process on track and responsive to evolving needs.
Wireframes
The Process
The design process was structured around a user-centered approach, emphasizing usability, consistency, and scalability:
Discovery and Alignment: I began by deeply understanding the provided wireframes and product requirements. This phase involved identifying key user journeys, pain points, and opportunities for enhancement, aligning with best practices of user-centered design.
Design Strategy: I developed a design strategy that balanced user needs with technical constraints. Given the involvement of a third-party developer with limited consultation opportunities, I prioritized clear, straightforward design patterns and created a detailed component library that matched the provided development resources. I also established a visual hierarchy to guide users through the interface effortlessly, enhancing their overall experience.
Iterative Design and Feedback Loops: Throughout the process, I employed an iterative design approach. Using feedback from our calls, I refined the UI to address both usability issues and stakeholder expectations. The feedback incorporation and iteration played a pivotal role here, ensuring that each design iteration brought us closer to a user-friendly, efficient product.
Handoff and Documentation: To facilitate a smooth development process, I meticulously documented the design specifications and created clear guidelines for implementation. This included detailed annotations on interactions, states, and accessibility considerations, in line with the need to communicate effectively with a non-consultative third-party developer.
The Result
The refined UI for Boardssey effectively transformed complex user needs into a simple and intuitive interface. The final design met all functional requirements from the product managers while enhancing the brand's digital presence. The platform’s layout facilitated easy navigation and an enjoyable user experience, appealing to both novice and seasoned users alike. The comprehensive design system allowed for seamless implementation by the third-party developer, showcasing the value of clear design documentation. Post-launch feedback highlighted the platform's ease of use and visually appealing design, exceeding initial project goals.
