Cinnamon logo
Cinnamon logo
Cinnamon logo
Close

Home

Projects

Services

About Us

Careers

Blog

Contact Us

Close

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. Cinnamon offered a complete platform redesign including expansions and new features, focusing on keeping the user longer on the website.

PRODUCT DESIGN

WEB DEVELOPMENT

QUALITY ASSURANCE

placeholderthumbnail.png

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
placeholderintro-photo.png

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.

placeholderchallange-photo.png

Smooth flow of
the design process

thumbnail.png
Gamification
system

Earn points for your contributions and badge levels that bring your profile to the top.

thumbnail.png
Sunny
and fun

Aiming to stir up a positive feeling, we created a cheerful design targeting youth.

thumbnail.png
Advanced tab search

Advanced players can now filter their results with expanded search options.

thumbnail.png
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.

placeholderPersona-left.png
placeholderPersona-right.png

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.

placeholderMask Group.png
placeholderImage-02-desktop.png

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.

placeholderUI-flowers-desktop.png

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.

placeholderMockup.png

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 multilanguage, 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 internationalization, we relied on i18next, which is our go-to framework for supporting multilanguage 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.

placeholderMask Group 2.png
placeholderImage-3.png

Styleguide

placeholderTypography-desktop.png
placeholderColors-desktop.png

Their team’s design skills definitely set them apart.

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!

MicrosoftTeams-image (101).png
Eric C.,

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

placeholderthumbnail-large.png

product design

mobile development

web development

quality assurance

marketing & growth

Stake Something:
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. Cinnamon constructed an intuitive flow accompanied by playful and inviting illustrations.

arrow right

See all projects

Job application illustration

Have a project in mind?

Let's work together.