Allie Bernhard



Personify x SpotifyA UI/UX redesign of Spotify’s current homepage; one that prioritizes customization and organization for a confusion and stress-free experience.


Research
Overall: Discovered the Spotify homepage was overwhelming, crowded, minimally interacted with, and that the left-hand navigation was underutilized.



Studied Spotify’s current homepage and left-hand navigation bar.


Current Spotify homepage layout (as of 9/24)
Select “A” to access the left-hand navigation bar
(the letter aligns with the user’s first initial; in this case it is “A for Allie”)


Current Left-hand navigation bar



    Followed by scrolling to the very bottom of the homepage screen.

    From top to bottom, this took 25 separate thumb scrolls.


    Opening Homepage
    (A Homepage switch-up)
      First Scroll
      Second Scroll
      Third Scroll 
      Fourth Scroll...



    Tenth Scroll
    Eleventh Scroll
    Twelfth Scroll...
    Eighteenth Scroll...
    Twenty First Scroll...
    Twenty Fifth Scroll!






    SWOT Analysis

    Conducted a SWOT analysis by synthesizing data gathered from ethnographic research and interviews of 10 Spotify users and non-users.





    Questions:

    1.    What is your experience using Spotify?
    2.    How long have you used Spotify for?
    3.    How often do you use Spotify?
    4.    How does the Spotify homepage make you feel upon opening the app?
    5.    Which parts of the homepage do you interact with?
    6.    What features do you use?
    7.    What are your least favorite things?
    8.    What are your most favorite things?
    9.    How far do you normally scroll?
    10.  Why do you interact and/or scroll as far as you do?
    11.  What do you think of the left hand navigation page?
    12.  How do you think any of these things could be improved, if at all?

    Strengths
    Weaknesses
    Opportunities
    Threats
    • Colorful and legible images and fonts
    • Indicative upper navigation bar (All, Music, Podcasts, Audiobooks)
    • Indicative lower navigation bar (Home, Search, and Your Library)
    • Featured music categories lack consistency because the algorithm changes the homepage every few hours
    • Users feel overwhelmed by the homepage because of the options and inclusion of so many songs, etc.
    • Hard to focus on and navigate because of amount of content and complicated layout
    • Users rarely interact with the changing algorithmic content
    • Continuous scrolling minimally used (user interviews indicated that 70% of people do not scroll on the homepage at all)
    • If users do use the continuous scroll, they often do not scroll past one full scroll (many people did not know the full extent of the homepage until prompted during the interview)
    • Landing screen lacks clear distinction; looks too similar to the Search screen
    • Left-hand navigation bar is sparse, underdeveloped, and underutilized
    • The homepage was compared negatively to Apple Music’s “better” layout
    • Introduce a more distinct homepage landing screen (include “Welcome” at the top of the screen)
    • Allow users to select the specific content they want on their homepage
    • Enable an option to delete unwanted content from the homepage screen
    • Enable an option to freely shift content on the screen to your liking
    • Make homepage sections more distinct to highlight their different value adds
    • Make the homepage more straight forward and less crowded to avoid overwhelming users
    • Repurpose left-hand navigation bar to be more useful and purposeful
    • Requiring users to adapt to a new layout





    Insights:

    Concluded that users feel the current Spotify homepage is busy, distracting, and overwhelming due to its structure, size, and shape; in addition to its ever-changing homepage features due to the automation of its algorithm.


    Action:

    Sought to address this user experience issue through reorganizing the homepage layout while also introducing widgets that compact, customize, organize, and relax the overall homepage experience- ultimately giving experiential power back to its users.




    Concept Development

    Consisted of 5 steps: hand sketching and rapid prototyping, wireframing, developing the first iteration, second iteration, and third iteration.



    Original:
    Homepage and Left-Hand Navigation Bar


    Features:
    • Half-split screen between recently listened-to music, podcasts, and audiobooks (unlabeled); and algorithmic suggestions
    • Recently listened-to is made up of the 8 most recent titles in small tile formatting
    • Algorithmic suggestions display large tile formatting of two options before sideways scrolling


    Features:
    • Three options:    
                   - “What’s new”
                   - “Listening history”
                   - “Settings and privacy”
    • Sixty percent of navigation bar unused
    The original Spotify homepage lacked the benefit of compartmentalized structure and true indication of it being the homepage. Meanwhile, the left-hand navigation bar went underutilized with more than half of its screen space unused. Additionally, few users knew about the left-hand navigation bar and no users actually used the three options listed in the navigation bar.




    Hand Sketching and Rapid Prototyping
    Foundational ideas focused on restructuring the homepage and repurposing the current left-hand navigation bar.

    Features Include:
    • Music, podcast, and audiobook selections capable of being pinned to the homepage, called “widgets”
    • A split homepage screen with sections called Widgets (upper-half) and Recents (lower-half)
    • Widgets chosen from the left-hand navigation where users check off their favorite music, podcast, or audiobook groups to pin for immediate access on the homepage (a macro level concept)
    • Recents section listing specific titles of music, podcasts, or audiobooks that were recently listened to (a micro level concept)




       
      Hand Sketched Wireframe and Rapid Ideations



       




    Wireframing (Low Fidelity)
    Wireframes focused around enabling customization through personalized left-hand navigation bar options and simplifying structure through just two homepage sections.
    Created using Figma.



            First Iteration      
                      Second Iteration
    The first iteration focused around blocking out an idealized new format for the homepage and left-hand navigation bar based on research insights
                       
    The second iteration focused on developing more homepage and left-hand
    navigation bar details.
                                                                     



    Features      

    • Upper half of homescreen dedicated to selections chosen through the Widget Checklist
    • Lower half of homescreen dedicated to the Recents section where specific titles of recently listened music, podcasts, or audiobooks will be displayed
    • Left-hand navigation bar repurposed to host the Widget Checklist, comprised of music, podcast, and audiobook selection sections
    Features  

    • Upper half of homescreen dedicated to the Widgets (Pinned) section made of 2 different sized widget blocks
    • Lower half of homescreen dedicated to the Recents section where specific titles of up to 8 recently listened music, podcasts, or audiobooks will be displayed
    • Left-hand navigation bar features the Widget Checklist, comprised of 3 categories and 4 checklist subcategories 






    First Iteration (MVP)

    The first iterations focused on bringing Personify x Spotify to life by creating the Minimum Viable Product (MVP) of a new and customizable homepage and left-hand navigation bar.

    Homepage MVP:
     Left-Hand Navigation MVP:                   















       

    The Minimum Viable Product version of the Spotify homepage included a customizable pinned favorites section and a recents section. The pinned half is a more macro view while the recents section is on a more micro level of detail.





    Features
    • A “Your Spotify” section for pinned music, podcasts, and audiobooks (macro detail)
    • Two size variations of widgets in the pinned upper-half section
    • A “Recents” section for the most recetly listened to titles (micro detail)
    • Able to shift widgets around
         Features:
    • Named the left-hand navigation bar “Spotify Widget”
    • Square-shaped checkmarks
    • Removed “What’s New” and “Listening History” from the original left-hand navigation bar (learned through user interviews that 100% of users did not use these features
    • Moved the previous “Settings and privacy” feature into the new rotary icon in the top right-hand corner (representative of Settings)
    • Received positive user feedback about shifting the Settings into a rotary icon in the top-right corner





    Second Iteration (Medium-High Fidelity)
    The second iteration focused on developing functional details, such as building out checklist subcategories and being able to interact with widgets directly from the homepage.



                        Homepage
    Features
    • Three size variations of widgets (increased from two)
    • Renamed “Your Spotify” pinned section to “Personify by Spotify” with a brief description below the title
    • Added an indicative Welcome header to help situate users
    • A “Recents” section for the most recently 8 listened to songs, podcasts, or audiobooks
    • Able to shift, share, or delete widgets from the homepage by holding down the widget for two to three seconds





                 













          Left-Hand Navigation Bar
    Features:
    • Renamed the new customizable Spotify feature “Personify by Spotify”
    • Renamed the left-hand navigation bar “Personify by Spotify”
    • Added a “Personify by Shopify” description in the navigation bar 
    • Added a “See More” Feature to enable an entire view of checklist options (includes 6 immediately viewable options, exluding subcategories) 
    • Enabled drop down arrows that expand for a more specific selection
    • Scroll bars
    Checklist Interaction:
    • The checklist changes as the user deletes a widget from the homescreen
    • The checklist can specifically be seen having “Daily Mix 2” go from checked to unchecked as the user (in the above example) deletes it from the homepage directly







      Third Iteration (High Fidelity)
      The third iteration focused on developing even greater detail for the user experience, such as various homepage and left-hand navigation bar functionalities.

      The three homepage functionalities include repositioning, sharing, or deleting a widget from the Personify x Shopify pinned homepage section for the ultimate customizable experience.


      Final Features:
      Homepage

      • Three size variations of widgets
      • “Personify by Spotify” title with a brief description below the title
      • An indicative Welcome header to help situate users
      • A “Recents” section relocated to the bottom half of the screen
      • Able to shift, share, or delete widgets from the homepage by holding down the widget for two to three seconds
      Checklist
      • Repurposed the navigation bar to interact with the homepage
      • Named the navigation bar to “Personify by Spotify” with a desciption beneath the header
      • See More features to enable an extra detailed view of checklist options (includes 6 immediately viewable options, excluding 4 subcategories) 
      • Enabled drop down arrows that expand for subcategory selection
      • Scroll bars
      • Rounded checkmarks to blend better with the friendly Spotify persona (based on user interview)


      1. Repositioning

      • Customizable homepage made of small, medium, and large widgets


      • Hold down widget for two seconds
      • The widget enters editable mode


      • In editable mode, the widget can be repositioned by selecting and holding the icon
      • Once selected, the user is able to reposition the widget anywhere on Personify x Spotify section

      • The widget will change shape as it adapts to its surrounding widgets and their respective sizes
      • The widget will enter editable mode once the user releases the button


      • The user taps anywhere on the screen to exit editable mode

      2. Sharing

      • Customizable homepage made of small, medium, and large widgets

      • Hold down widget for two seconds
      • The widget enters editable mode
      • In editable mode, the widget can be shared by selecting the icon



      • Once selected, the user is able to share the widget via multiple platforms


      • After sharing, the user will be returned to the homepage with editable mode still live

      • The user taps anywhere on the screen to exit editable mode 

      3. Deleting

      • Personify x Spotify left-hand navigation selections are selected, determining homepage display


      • Hold down widget for two seconds
      • The widget enters editable mode


      • In editable mode, the widget can be shared by selecting the icon





      • User can delete widget directly from the homepage
      • The homepage will automatically reconfigure itself upon deleting widget
      • If user selects “No”, the user returns to editable mode and may tap anywhere on the screen to exit editable mode





      • Widget is deleted from the homepage and also from the left-hand navigation selection








      AB 2025

      New York, NY