An iOS mobile music app
3.5 months (ongoing support)
The client came to us with an idea to create an iOS app based on an existing Android app and a website. They wanted the users to be able to listen to online radio, check out available shows, and read music industry news. Our task was to adapt and improve the design and create the application for iOS from scratch.
The client had
- An Android app
- A web platform
We were responsible for
- UX/UI design
- iOS app development
Listen to your favorite music. Stay tuned with the latest music news. Choose your favorite show to get in the mood
We started the design process by creating a set of wireframes to see how the app would look on the iOS devices.
Two iOS engineers
MVVM + C
SwiftUI + UIKit
REST API, Alamofire, Starscream
Here is what we started with: a clickable prototype to see if the user flow is clear and smooth. It allowed us to stay on the same page with the client and refine the app’s logic. Through constant communication and feedback gathering, we were able to create a mobile app that not only met the user's needs but also delivered an intuitive and enjoyable experience.
You can click through it right here!
Here is what the app’s final UX/UI design looks like.
A user can join the broadcast, listen to their favorite music, and navigate the audio through the player.
A collection of playlists and podcasts that a user can choose and listen to independently from the main broadcast.
Keep in touch w/ur favorite artists
A selection of the freshest news in the music industry for people who want to know more about the latest releases and debut artists.
Challenges and Solutions
Due to SwiftUI limitations, we weren’t able to implement the navigation between screens the way we wanted.
We used the UIKit navigation + UIHostingController for SwiftUI views wrapping to UIKit.
Home screen Shows paging
We needed to build the navigation between shows, but SwiftUI didn’t allow us to realize it the way we wanted, with one show in the middle and the previous and the following shows popping out from either side of the screen.
We created an alternative design with the custom page control.
The miniplayer should stay on all the screens, but it was hard to implement with SwiftUI.
We decided to change the app’s architecture to put a miniplayer in front of other content. We also implemented a custom transition animation with the help of UIViewControllerTransitionalDelegate, UIViewControllerAnimatedTransitioning, and UIPersentDrivenInteractiveTransition.
News overview page and backend
The app’s backend is based on a framework that works best with web solutions, so when a user clicked on the news they wanted to read, the backend response contained just a line with iframes, links, and text.
We redesigned buttons and e thexternal links visualization. We also fixed content parsing with the Swifty Markdown library and custom logic for clear backend content.
What we have now
The app is ready for the release. We are now polishing the design and fixing minor bugs.