UI/UX CASE STUDY
The style of eighties music has been making a comeback, and the sound of new songs invoke nostalgia despite being released in the 2020s. There has been a growing demand for retro sound - old and new - but no media app with a decent selection. Apps for eighties music ignore the newer songs, and their user interface is outdated and out of touch. Gruuv is here to bridge the gap.
PROGRAMS USED /
Adobe XD, Illustrator, Photoshop
Sole Designer & Owner
As the sole designer with a time limit of 90 hours to complete the project, I created a project plan and designed a logo. To speed up the design process, I referenced a UI kit for color palettes and iconography. After executing and synthesizing my research plan, I created low-fidelity wireframes from user flows and remotely user-tested them before moving onto the first round of high-fidelity prototypes. For the second round of the prototype, I animated all interactions and advertisements and added music to simulate a realistic testing experience.
Gruuv was a startup launched two years ago as a media app for nostalgic retro music. It was a freemium model that had a mobile app for iOS. The company’s business strategy was to first build a user base by offering a free product and then evolving the feature set to monetize on a premium (paid) product.
By this point, the product had been well received and had a healthy user base of free users. My task was to design a new experience - within 90 hours - that would allow users to subscribe and pay a monthly fee. The company had two main business goals. The first was to create the opportunity for new users to subscribe to the premium product upon registration in the signup flow. The second was to create the opportunity for returning free users to become paid subscribers in the sign-in flow and within the product once logged in.
One method designers use to develop solutions is to analyze how other designers have approached similar problems to achieve similar business goals. Studying the work of others can help to lay the foundation for a solution by evaluating features to include and identifying pitfalls to avoid.
Scope of Work
to assess the industry leaders and other products that offer monthly subscriptions to a free user base.
to understand pain points and methods of restricting access to paid content.
1 Round Usability Testing
with low-fidelity wireframes.
1 Round of Usability Testing
with a high-fidelity prototype.
Exclusive content curated for premium users.
Offer discounts for users who commit to 6 or 12-month subscriptions.
Call to Action (CTAs):
Clear side-by-side comparisons after user signup.
Display premium content to tease free users
Offer ad-free experience
Limit free plan by quantity over features. Free users have the same features as premium members but can't use them at the same volume.
Create cost differences between the number of users without affecting the quality and quantity of features.
HD listening, 4K streams, and downloadable content are available with an affordable monthly subscription, available as a personal plan, duo plan, a family plan, and a plan for friends. Premium members will have access to a curated playlist of new music with the retro sound.
Competitive Research - Industry Leaders
Access industry leaders and other products that offer monthly subscriptions to a free user base.
Pandora, Spotify, YouTube, Audible, Crunchyroll
By studying industry leaders, I extracted elements that I liked and disliked, and then listed actionable items for each application. For example, it appealed to me how Spotify split their subscription tiers by number of users, how Crunchyroll offered a free trial for 14 days, and how Audible only displayed an option to upgrade when a premium audio book is tapped.
The ‘Red Route’ is the most critical task performed by users. The website cannot function without it. ‘Normal Routes’ are secondary tasks that are important but not critical.
Low Fidelity Wireframes
Next, I designed low fidelity screens, or wireframes, based on my user flows which addressed the business goals outlined in the Problem. Below are some key screens in the low-fidelity wireframes.
New Users Key Screens
Returning Users Key Screens
Test the low-fidelity redesign of the website.
30-minute remote usability testing using the mobile prototype.
I remotely tested five participants via Zoom and Discord. The main purpose was to gather feedback about the balance between premium features worth paying for and brief interruptions that invite users to upgrade from the free plan.
Overall, users were able to understand subscription upgrade requirements and features. There are a few major issues that, if improved, can increase ease of use. For example, participants who currently share a family subscription with friends wished there was a plan for friends that exceeded the number of people within the family plan.
Style Guide - About Gruuv
Uniquely diverse, but somehow always familiar. This creates the need for design to balance that tension.
Gruuv is a mobile application where users may enjoy a library of retro music, HD listening, 4K streams, and downloadable content with an affordable monthly subscription, a personal plan, a duo plan, a family plan, and a plan for friends. Premium members have access to a curated playlist of new music that has a retro-style sound.
Style Guide - Logo
Style Guide - Color
Style Guide - Typography
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
0 1 2 3 4 5 6 7 8 9 ? ! % & ? ()
Circular Std Book
Circular Std Medium
Style Guide - Iconography
Style Guide - UI Elements
High Fidelity Design
After creating a Style Guide, I created solutions for the issues gathered from
usability testing and applied them to the high fidelity prototype.
High Fidelity Prototype
Usability Testing - Round Two
Test the high-fidelity prototype.
30-minute remote usability testing using the mobile prototype.
I remotely tested another five participants via Zoom and Discord.
With realistic graphics and color added, users found the prototype much easier to use. Most feedback calls for adjustments to the duration of ads. Users also wanted to be able to download tracks from the list view, before tapping into a song.
High Fidelity Design - Iteration
In my iteration of the high fidelity prototype, I improved my solutions, added
real-duration ads, playable soundtracks, and made interactions smoother.
Onboarding - Before
Onboarding - After
Library - Before
Library - After
High Fidelity Prototype - Iteration
Sign Up + Onboarding
Download (has sound)
The company had two main business goals. The first was to create the opportunity for new users to subscribe to the premium product upon registration in the signup flow. The second was to create the opportunity for returning free users to become paid subscribers in the sign-in flow and within the product once logged in.
The most difficult part of the design process was figuring out where and how often prompts for users to subscribe should appear. It was tricky to balance it, so users didn’t get too comfortable using the product on a free plan but also didn’t get annoyed to the point where they would abandon the app altogether.
I learned from the testing sessions that if there is a special value in the product to the user that other products lack, users won’t mind paying a subscription fee to improve their experience.
My design solutions were focused on creating that value and finding that balance.
In hindsight, this project offered a lot more creative freedom when compared to the first capstone project and proposed a fun challenge with a 90-hour time limit. It was a rewarding experience to hone in on the micro-interactions and design the content from the user’s perspective and on a business level.