Ukulele: The largest
ukulele tabs archive

Ukulele is the number one ukulele community, where players of any level can find the most complete tabs and chords.

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

PROJECT PLANNING

USER PERSONA

COMPETITIVE ANALYSIS

UX Design

INFORMATION ARCHITECTURE

USER FLOW

WIREFRAMING

PROTOTYPING

UI Design

VISUAL DESIGN

INTERACTION DESIGN

DESIGN SYSTEMS

Frontend development

REACT

NEXT.JS

Manual testing

PROJECT QUALITY

TEST PLAN

TEST CASES

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.

See all projects

Ukulele: The largest
ukulele tabs archive

Scope of work

Strategy

UX Design

UI Design

Frontend development

Manual testing

More than a tab catalog

Smooth flow of
the design process

Gamification
system

Sunny
and fun

Advanced tab search

Improved
SEO

Understanding the user perspective

A wireframe
walkthrough

Play ukulele Enjoy the sun

An interface adjusted for both B2B and B2C customers

Frontend development

Quality assurance

Whole process was smooth, from day one to the last.

Eric Couchelou,

Client & team with one vision

Similar projects

End procrastination

Have a project in mind?

Let's work together.

Ukulele: The largest ukulele tabs archive

Scope of work

Strategy

UX Design

UI Design

Frontend development

Manual testing

More than a tab catalog

Smooth flow of the design process

Gamification system

Sunny and fun

Advanced tab search

Improved SEO

Understanding the user perspective

A wireframe walkthrough

Play ukulele Enjoy the sun

An interface adjusted for both B2B and B2C customers

Frontend development

Quality assurance

Whole process was smooth, from day one to the last.

Eric Couchelou,

Client & team with one vision

Similar projects

End procrastination

Have a project in mind?

Let's work together.

Ukulele: The largest
ukulele tabs archive

Smooth flow of
the design process

Gamification
system

Sunny
and fun

Improved
SEO

A wireframe
walkthrough