I began by thoroughly testing the original design through different scenarios to identify issues. I presented these findings to the client to align our understanding of the problems. These insights later shaped my user testing tasks to verify if others faced similar friction points.
Aug 2024
Client project: End-to-end UX/UI and branding redesign
busk.town is a platform that empowers musicians, singers, and bands by providing tools for accurate chord viewing, seamless setlist management, and real-time collaboration to enhance live performances. I was tasked with redesigning the platform’s UX/UI, designing the UX/UI for new features, and creating a new brand identity along with a set of brand collateral, all backed by user research.
Visit the site (in development):
busk.town
Building on the foundation of my personal project, Chordette, I was commissioned to bring that vision to life on a larger scale with busk.town.
The product
busk.town is a platform that empowers musicians, singers, and bands by providing tools for accurate chord viewing, seamless setlist management, and real-time collaboration to enhance live performances.
The problem
busk.town was created by a group of passionate musicians who also took on development roles. However, it was initially built without the involvement of a designer, which resulted in some usability challenges and a lack of cohesive branding.
The goal
To prepare busk.town for growth by refining its brand identity to align with the client's new vision. This included enhancing usability, and creating a seamless experience for new features, all while maintaining consistency across the updated interfaces.
Measurable Impact
29.7%
reduction in task completion time
100%
reduction in errors
Simplified the flow by adding a single button.
Achieved by comparing user testing results from the old design (before redesign) and the new design (after redesign) for a specific task.
Looking forward to gathering more metrics once the new design is fully launched!
Usability Evaluation
User Research
I conducted research with participants across different groups; singers and musicians, as well as new and current users of the product. My approach combined semi-structured interviews to understand behaviours, usability testing to identify pain points, and A/B testing of moodboards for brand direction.
After combining insights from both my initial evaluation and these research sessions, I organised all findings using affinity diagramming and ranked key issues with the Usability Severity Rating Scale. This helped me prioritise which features needed improvement and identify gaps where new features were required.
Affinity diagram and issue prioritisation.
Visualising Brand Personality
I translated busk.town's new key personalities; modern, simple, unique, friendly, and earnest, into a comprehensive visual system. In each draft, rather than focusing solely on logo design, I developed how visual elements work together to better communicate a cohesive and practical brand identity to clients.
Brand identity design evolution from initial concepts to final drafts.
Establishing Design Foundations in Parallel
I approached typography and colour selection to serve both brand expression and digital platform needs simultaneously, ensuring they work effectively across all touchpoints.
The previous Thai typeface used a loopless style, which despite its modern appearance, compromised readability in text-heavy platforms like busk.town. I chose a modern loop typeface that balances contemporary aesthetics with improved legibility.
For the colour palette, I selected orange for its ability to effectively highlight key elements across both light and dark backgrounds, all pass accessibility standards. Multiple shades were developed to maintain strong contrast ratios throughout the interface.
Creating Brand Guidelines
The final identity system incorporates musical symbols in the logo and staff lines as key graphic elements. I compiled all design decisions into comprehensive brand guidelines, detailing logo usage, colour applications, typography rules, graphic elements, and photography direction, with examples across digital and physical applications.
Brand guideline page examples.
Applications across social media, business cards, photography, and poster designs.
Evolving the Interface While Preserving Familiarity
With a solid base of active users, I knew busk.town needed evolution, not revolution. Rather than a complete redesign, I preserved familiar elements to match users' mental models while introducing subtle improvements to the flow. Through wireframing, prototyping, and testing, I developed solutions that enhanced usability without disrupting user familiarity.
Wireframe sketches of the dashboard and new features.
Adding the Music Performer's Touch
As a musician myself redesigning a platform built by musicians, I ensured critical details weren't overlooked. Small but impactful additions, like queue duration displays to help with set timing, came from real-world performing experience. User testing helped confirm these additions hit the right note.
Building a Scalable Design System
I utilised Figma's Variables feature to create a comprehensive design system handling multiple device sizes, colour modes, and language options. This systematic approach made it efficient to implement changes consistently across all designs.
Design system using Figma variables.
Dark mode tablet and light mode mobile song page examples.
Responsive landing page hero section across devices.
Landing page lower sections.
