Double Diamond design process highlighting key project phases.
Nov 2023 - Sep 2024
Client project: end-to-end UX/UI and brand identity redesign
busk.town is a platform that empowers musicians, singers, and bands by providing tools for accurate chord viewing and enhanced live performance management. I was tasked with redesigning the platform’s UX/UI, developing new features, and creating a cohesive brand identity, all backed by user research.
Visit the site (in development):
busk.town
Full brand identity process:
busk.town Brand Identity
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.
Responsibilities
As the first and sole designer on the project, I was responsible for all design aspects from initial research through implementation.
Measurable Impact
29.7%
reduction in task completion time
100%
reduction in errors
Based on before-and-after user testing of the most critical task, identified through initial usability testing.
Looking forward to gathering more metrics once the new design is fully launched!
Usability Evaluation
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.
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.
Participant demographics and affinity diagram categorising key findings.
Issue prioritisation matrix using Usability Severity Rating Scale to determine development focus.
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.
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.
Streamlining the User Flow
Research insights directly informed my interface improvements. For example, I added a 'Create New Setlist' option directly within the 'Add to Setlist' flow, eliminating unnecessary navigation steps. Similarly, settings pages now include visual previews to reduce errors and ease the learning curve.
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.
Validating Design Decisions
I conducted usability testing with a high-fidelity Figma prototype to confirm the effectiveness of my solutions. Tasks designed to test key features revealed the new design helped users complete a specific action 29.7% faster. This outcome verified that the redesigned interface not only felt familiar but significantly improved efficiency, proving that the adjustments 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.
The Challenge of Redesign
My biggest challenge on this project wasn't figuring out what needed fixing. The client wanted a redesign, and my research pointed to clear UX improvements. It was deciding how much visual change was too much. I found myself constantly asking: "Am I being creative enough?" quickly followed by "But am I changing too much?"
After stepping back and thinking it through, I realised I didn't need to overhaul everything completely. It was more about strategically adding new design elements only where they reinforced better experiences. I also found out where to add fun brand visuals and where I shouldn't. This mindset helped me create a design that felt fresh and on-brand without throwing users into unfamiliar territory.
Design Handoff
I was glad that Figma released its variables feature before this project began. I had fun exploring design tokens, primitives, and semantic variables. It was a lot of self-learning as I went, but it's definitely knowledge I'll carry forward to other projects.
The great feedback was that the devs really appreciated how I organised the tokens and Figma files. However, I wish I'd been more thorough with annotations. I only annotated some pages since we had regular meetings and the team already knew their product inside out. I recognise that strong handoff skills would be super valuable for projects with external developers. So, this is definitely something I'll explore more in the next projects.
Smon quickly learned about every details in the existing application and identified key issues ... She was very easy to work with. She neatly keeps all her deliverables in a single file and consistently shows progress every week. She is able to incorporate new feedback into her design and handle abrupt priority changes during the project. She is also highly trustworthy and has a strong sense of ownership. I would recommend Smon to anyone looking for a great UX researcher or UI designer.
