Ukulele: The largest ukulele tabs archive
PRODUCT DESIGN
QUALITY ASSURANCE
Ukulele is a comprehensive online resource that will quickly revolutionize the way you learn to play the ukulele. Cinnamon’s goal was to provide users with everything they need while delivering a superior and fun user experience. Users will be able not only to tune their ukuleles but to find tabs and scales, upload videos, and join the biggest community of ukulele players.
Scope of work
Strategy
UX Design
UI Design
Frontend development
Manual testing
More than a tab catalog
The challenge: attract new users and keep the existing ones by expanding the user profile capabilities while retaining the essence of the product - the music. A gamification strategy was employed alongside new features such as adding friends, level badges, messaging, and contributing to the Ukulele community by sharing tabs, videos, and more.
Smooth flow of the design process
Gamification
system
Earn points for your contributions and badge levels that bring your profile to the top.
Sunny
and fun
Aiming to stir up a positive feeling, we created a cheerful design targeting youth.
Advanced tab search
Advanced players can now filter their results with expanded search options.
Improved
SEO
We focused the entire design on improving the website's SEO with carefully chosen content.
Understanding the user perspective
Understanding our target audience’s key needs and motivations was vital to developing a successful product. We established two distinct user groups during our initial research phase—beginner and advanced players. We added easy and fun features that would satisfy the needs of beginners while providing advanced players with engaging challenges and badges.
A wireframe walkthrough
The high-fidelity wireframes in our design mockups were updated with several details, and we confirmed and polished all the UX flows. We visualized the final layouts for the website while updating our low-fidelity sketches.
Play ukulele Enjoy the sun
The client's wish was to capture the warmth of Hawaii and put it into their website, and we did so by including simple elements in the entire UI design, that would bring the users to a fun and positive feeling while playing their favorite songs.
An interface adjusted for both B2B and B2C customers
One of the principal features of the website is the user's ability to explore different music genres and discover a variety of ukulele tabs. Inspired by Spotify, users can create their accounts, save their favorite songbooks, and share them with the community.
Ukulele’s simple website encourages users to share their content and connect with other musicians, as it rewards users with points and different level badges. The site makes it easy for them to have fun while they are learning.
Frontend development
From the perspective of page numbers and dynamic content coming from API, the developers of Cinnamon consider Ukulele as one of the most extensive projects.
The biggest challenge of Ukulele was how to support multi-language, SEO, replicate complex UI, and manage all the filters, without losing on the performance of the page. To accomplish this demand, we gathered all the existing experience and came up with the optimal solution. And these frameworks made this happen.
For internationalisation, we relied on i18next, which is our go-to framework for supporting multi-language in Next.js apps. Due to many sorts, filters and searches, we decided to use React Query. With React Query we are caching all the data, which ends up with users getting fast results, and that is all that matters.
Quality assurance
For the Ukulele app, we focused on the functionality tests. The app has many features, including messaging, searching, adding friends, creating songbooks and collections, and, most importantly, viewing the songs and adjusting the tuning and transposing. The features, especially the messaging and the notifications, may appear elementary, but they presented significant testing challenges and edge cases. In order to achieve quality and distinguish frontend from backend issues, it was crucial to perform extensive testing on the APIs.
The user interface was the second most critical feature. Identifying UX problems was crucial to making sure the app had a high-quality user interface. Finding all the UI bugs took a considerable amount of time due to the size of the app (approximately 50 screens), the multiple browsers we tested it in (Safari, Chrome, Opera, Firefox), and the different screen sizes (from mobile screens, tablets, laptops), but it is crucial that the clients get the exact design that they wanted.
Whole process was smooth, from day one to the last.
“Wonderful experience; the project manager and the designer were available for all my questions and at no point did I feel they struggle to create the design.The result is a-b-s-o-l-u-t-e-l-y perfect. Top-notch!”
Eric Couchelou,
Founder Websun Solutions UG., Berlin, Germany
Client & team with one vision
When you work with the right client, the entire experience is more enjoyable. We collaborated with a positive and insightful client, who was open to new ideas and receptive to our suggestions.
Because of excellent brainstorming and effective communication, we added distinct changes and implemented them as part of the redesign process. We learned that visual design plays a big role in the user experience, and in order to balance out our complex UX, long tabs, chords, and other tools, we used sunny tones and cheerful illustrations to influence the platform’s mood and how it is used. We're very proud of the result!
Similar projects
product design
mobile development
web development
quality assurance
marketing & growth
End procrastination
Stake Something challenges users to risk their own money by either fulfilling their goals and keeping their stakes, or transferring that money to a charity if they fail.
