An app built in React Native that connects users through proximity-based music discovery
wave imagery
"Music has always been one of the strongest facilitators of human connection. Whether it's a concert you both attend, or a song you both like, music has the potential to bring people together, in one shared experience. Souvinear is a mobile app for music communities. We provide a specific platform for discovering new music & live events, facilitating stronger connections between fans, and promoting upcoming artists."
My Role  Branding  •  Research  •  Wireframing  •  High-Fidelity Design  •  Front-End Development
Timeline September 2017 - Current
The Problem
Current online music services feel deeply disconnected
Despite the feeling of connection music can provide, current services such as Ticketmaster, Apple Music, and Spotify provide no singular place where you can find access to all of these services in one complete experience. Each service only handles one aspect of the overall music experience which can encompass a plethora of applications across different platforms. This leaves us with a disconnected experience which asks:
How can we combine the digital music experience to encourage further connection between fans, artists, and venue?
Key: Focus on the user
We knew a heavy emphasis on user experience was a necessity with this project. We began defining our core users and audience through research including surveys regarding music listening habits, frequency of concert attendance, and how people connect through music currently. We also began interviewing active members in the local music community to gauge their reception of the idea, describe their pain-points with current services, and help define our target audience. This research was analyzed and consolidated into user personas which gave us a tangible reference point of the different kinds of users we were designing for.
As we continued research, we were able to reach back into this pool of potential users and have them participate in various other exercises such as card sorting, focus groups, and affinity mapping, with the goal of proposing features and defining what users actually wanted out of this experience. From these exercises we were able to create low-fidelity wireframes.
As usability testing began with the low-fidelity versions of the app, we began developing a simple design system. The developments from both of these processes were used to create mid-fidelity digital "grey-box" mockups and then eventually high-fidelity mocks which included font choices, colors, and UI elements.
With a design system in place, we were able to create a style guide which made making alterations and additional screens much easier to do while maintaining the brand that we had developed up to this point.
These high-fidelity mocks were turned into a clickable-prototype which was used to do more extensive testing on the app as development started.
The Solution
An app emerges
Since its conception in 2017, Souvinear has taken on many forms and iterations. Our first functional prototype was a proof of concept web app using Google Maps API, a PHP database, and Angular.js. Throughout this process we maintained an agile work process and reiterated upon our designs with new feedback from users each week.
Souvinear then moved into native MVP development starting November 2018. Technologies included Xcode, Swift, Google Maps API, Spotify API, and Firebase. Spotify's API provided a large library of music for users to pin and swap, while Google Maps API provided a base map for users to update in realtime with hotspots of the events happening around them. Firebase was used to maintain user's data securely. While heavy development was was underway, we never stopped our original process of reaching out to users, getting feedback, testing or product, and tweaking the direction we were heading.
This process led us to our MVP presented as my senior capstone project at Drexel University. Below are a few videos showcasing some of the bigger features of the final product.
Using the Spotify API, users pin their favorite song at the moment to their profile to be shared with other users.
Users can explore the map page which shows them details of local events happening around them. When a user physically enters this spot their song is left behind and they pick up the songs of other users that are there.
Users can easily create their own hotspots if they are hosting an event such as a house show, or even just want to see what those around them are listening to.
Users can then browse to the songs that they picked up throughout the city. If a user is not feeling a song they picked up, they can swipe up to discard it. If they like a song, they can swipe down to save it to their collection. Collected songs can then be exported back out to Spotify in the form of a 'Souvinear Discovered Songs' playlist.
After almost two years of hard work and dedication, we successfully released an alpha iOS application through TestFlight. To celebrate this milestone, we hosted a soft-launch event in the lobby of Westphal College of Media Arts and Design where real users were able to use the app. Over 100 people in attended, the app was downloaded 70 times, and 50 songs were swapped. We had 5 local Philly acts play live music, 2 of them from our very own team. Through this projects timeline we were also honored with a few awards:
The Future of Souvinear
So what's next?
Souvinear is currently in its third and final iteration, which will support both Android and iOS. Since our soft-launch, I've given the interface a face-lift that will bring a more modern and sleek feeling to our first publicly launched version of the app, which is planned for late spring 2021. Here's a sneak peak:
Sign Up
Your Scene
New Music
With Others
Whew! That was a lot, if you made it this far thanks for reading. 😊
Back to Top ⬆
© 2020 built by victoria stewart