Front-end User Stories

• Visual Aesthetics

  As a user, I want to be able to view a presentation of the different aspects of my personal Spotify music listening tastes displayed in colorful and fun ways.
  
  As a user, I want to see transition animations between each Spotify Wrapped page and hover effects on some of the pages.

  

• Accessibility and UI

  As a user, I would like to be able to access the website on my phone with a well-designed and mobile friendly UI.
  
  As a user, I would like to be able to toggle a dark-mode that applies to all UI on the website

  

• Personalization

  As a user, I would like to create Spotify Wraps over short, medium, and long terms of my listening history.
  
  As a user, I would like to be able to create and login to an account that saves my previously generated Spotify wraps.

  

• Additional Features

  As a user, I would like to be able to hear clips from some of my top songs play during my Spotify Wrapped.
  
  As a user, I would like to be able to access a “contact the developers” page where I can read more about the development team and easily send them feedback.

  

The Process

Planning

This project was split into two sprints (1st sprint: user authentication/Spotify's API, front-end designs; 2nd sprint: connecting front-end and back-end, profile management, UI across various resolution sizes). We used tools like Google Calendar, Trello, and Discord for team coordination. Each sprint began with a plan meeting, and we would update our individual tasks and troubleshoot problems as a team with semi-weekly updates.

The Design Process

We used Figma to create detailed wireframes and user flows, followed by prototypes that reflected the Spotify's branding and functionality. The front-end developers focused on making the design visually appealing while ensuring it worked across different screen sizes. Bright colors and abstract shapes were incorporated to give a modern and electric feel while enhance visual engagement.

Building the App

The main challenge came with user authentication, as we had to integrate Spotify’s API for unique user profiles. We overcame this by working collaboratively and refining our user authentication flow. Each user story was broken into smaller tasks, and code reviews were essential for maintaining quality and ensuring progress. Collaborating and supporting each other helped keep the project on track.

Testing and Deployment

The last part of the process focused on testing and ensuring functionality. Throughout the project, we ensured testing was continuous, using Git branches for testing new features and avoiding conflicts. Testing was done iteratively, allowing us to catch and fix bugs early, which was critical for smooth deployment.

Watch our demo