Back

How we redesigned a streaming app in a month and a half and met the expectations of a demanding client. Voxtox case

Our clients developed a streaming app with personalized audio content. They released an MVP, gathered user feedback, and decided to improve the design and the app’s UI.

At first, they designed the new UI/UX on their own but at some point, they realized that it would be nice to commission an outsourcing design team. It was a good solution: a fresh look from the outside helps get a new understanding of the product and its capabilities.

In this case, we will tell you how we redesigned an app that had to replace a radio and turned the client’s B&W mockups into a real product.

Reading time: 9 minutes

редизайн стриминг-приложения
Table of contents

voxtox: a social network with personalized audio content

Once, a client from the Czech Republic contacted us. He works as a product director at voxtox. The guys decided to make not just a music streaming service, but a platform where users can listen to absolutely different audio content: music, podcasts, news, and even voice messages.

According to its concept, the product is a modern personalized radio with social media elements. It allows users to both consume and create content right in the app. For example, they can record voice messages and podcasts. The entire content matches users’ preferences to the highest degree: even ads are selected based on the user’s interests.

A page from the voxtox web app

A page from the voxtox web app

The user can compile a custom audio program from any content available in voxtox and share it with other users. Also, they can leave comments, including voice comments, under every playlist. According to the app creators’ idea, this motivates users to build a community around audio.

The team worked on the product for a year and a half and released an MVP — both mobile and web versions. They gathered feedback from users, conducted research with focus groups, used the product themselves, and understood that both the user path and the UI needed improvement. Besides, they added new features that the MVP didn’t have. Therefore, this changed the app logic, so specific app and flow parts had to be modified.

They planned to deal with this on their own. The product director started working on the user experience, and their in-house designer, who had already designed the MVP, took on the redesign task.

But at some point, the voxtox team realized they needed a fresh look at the product and the expertise of experienced design specialists.
See also  How to Redesign an Application: a step-by-step guide

The client fell in love with our Dribbble works

Just in case, let us remind you that Dribbble is a popular platform where designer teams and individual professionals share their works. There, the projects are published as “shots” — small images that help users quickly evaluate a design and understand whether they like it or not.

That’s why many people create Dribbble portfolios, and clients look for contractors there. By the way, in this article, we describe other ways to find good UI/UX designers (a job that may turn into a true quest) — it’s definitely worth reading.

We like this platform and post our works on Dribbble. Many times future clients have turned to us for a design after seeing our work there. The guys from voxtox are not an exception 🙂

The product director was searching for a portfolio with social media and audio streaming UIs. He really liked our Dribbble shots and contacted us.

One of the music apps we made. Dribbble shot.

One of the music apps we made. Dribbble shot.

The podcast app with the design that we created. Dribbble shot.

The podcast app with the design that we created. Dribbble shot.

See also  Music marketplace for author of Hollywood trailers: how we helped the client jump into a highly competitive market. Purrweb’s case

Attracting new clients is the main redesign goal

Our client wanted the voxtox app to be user-friendly, even for an elderly lady who has recently got a new smartphone from her grandchildren 🧓 This meant that the user path had to be as native as possible — the desired content had to literally appear with a tap.

According to the client, this simplicity would attract more new users and increase the loyalty of the current ones. This was the main goal of the redesign.

We absolutely agree that the “Keep It Simple” principle is just perfect for apps. It’s worth getting rid of extra features and stripping the UI of unnecessary elements. As a result, users will solve their problems faster, and every time they will thank you for such a convenient and clear app. Later, your conversions will skyrocket.

If you want to learn more about how to attract users to your product with an elaborate UI/UX, read this: we gathered all the tips in a single article.

Need to redesign your app?
We can help you. After 300+ completed projects, we can design an app in any niche — from marketplaces to streaming services. Contact us and get a free product estimation in 48 hours.
Get an estimation

How we surprised our clients with a design concept

We understood our client’s task pretty well and were ready to rush into the redesign, but the client had other plans 🙂 At the same time, they communicated with a few other teams and suggested doing a test — preparing the main page concept. By the way, this is what it looked like originally.

The voxtox main page before the redesign

The voxtox main page before the redesign

The client wanted to see how different designers could approach the same task. If they liked our concept, they would be ready to proceed with us. We had a week to do the job.

We had to meet the client’s expectations and take their wishes into consideration with the references provided and the existing design of the app. We totally understand why design concepts are important: they give clients insight into our work and save them time if they are not interested. At the same time, we can show what we can do and demonstrate our expertise.

This is the concept our designers made for voxtox during the test.

The voxtox main page concept by the Purrweb designers

The voxtox main page concept by the Purrweb designers

The client noted that we captured the voxtox vibe and represented it in our concept. They liked the overall style, design, and quality of our work. This was exactly what voxtox needed. So, they continued to work with us.

See also  How to Create a Design Concept in 40 Hours: a Crypto Project Example

What we had to do

We had to:

    • Develop a mobile app design that would stand out from similar products.
    • Ensure a convenient and intuitive navigation.
    • Ensure users can complete tasks quickly and with minimal effort — this would increase product loyalty.
    • Create interconnected app pages to help users navigate between them without going back to the main menu.
    • Consider possible future improvements and expansion of product features.

The client provided tons of materials: positive and negative references, a scheme explaining the app logic and user path in detail, and pre-made schemes with all the wishes concerning the future UX. It was necessary to take them into consideration.

Miro board with the client’s references

Miro board with the client’s references

The client worked out the user path themselves, but they were ready to discuss our suggestions and proposals for making it better.

This is how the client wanted to change the home page design

This is how the client wanted to change the home page design

With such extensive references, we had no trouble understanding the context. We didn’t have to conduct preliminary research on the best market solutions, so we took on the task faster.

When a client approaches us with a clear vision and idea of the design they want, it’s always an advantage. This way, we have more chances to understand each other and do what’s needed.

Voxtox features and killer feature: location-based ads

Listening to audio content is the main feature here. But voxtox had many other features that set it apart from streaming services like Spotify.

Voxtox features

Voxtox features

Some features seem unusual. The voxtox product director explained how they work.

For example, the app learns from the audio history and queries that the user is a soccer fan. If their favorite team scores a goal during a match, the bot interrupts a stream to announce the news.

The app has one more killer feature — it provides audio ads based on a user’s location. When they pass by certain cafes and restaurants the app recommends visiting them.

The voxtox team planned to implement these features in the updated version of the product and we had to develop the necessary screens.

Want to develop your own audio streaming app?
After 300+ completed projects, we can design an app in any niche — from eCommerce to online cinemas. Contact us, and you will get a free product evaluation in 48 hours.
Get an estimation

Result: from wireframes to the final design

We will show you a few screens to help you see how wireframes with a raw layout turn into a final design.

The main page of the app: the client’s draft

The main page of the app: the client’s draft

In the client’s draft, the Like, Save, Comment, and Share buttons were paired, but this layout contradicts the common UX patterns. Besides, all the buttons were placed in a row. This visually overwhelms the user, so they get confused and don’t understand what to do.

The redesign of the voxtox main page

The redesign of the voxtox main page

We decided to group the buttons differently: added more space between them, and placed Share and Save at the top — these are the key actions that need to be emphasized. Then, we moved the Like and Comment buttons lower. We left numbers only for likes and comments to motivate users. Numbers have no significant meaning for the Save and Share buttons — they just clutter the UI.

The main page in the light theme

The main page in the light theme

My tune page: the client’s draft

My tune page: the client’s draft

The bottom location of the search bar contradicted the usual UX pattern. Users are used to the search bar being at the top, so they could easily miss it.

My tune page redesign

My tune page redesign

We decluttered the top menu navigation: the draft contained everything the app had 🙂 We left only the important things. Then, we placed all the sections neatly in the center of the screen to help the user scan the content and immediately understand which section they want to open and what action they need to take.

Recording screen: draft

Recording screen: draft

In the draft, the recording section contains a lot of actions: the user can think of a track title, upload a cover, and delete or save the record. All of this can distract the user from the recording process itself.

The recording screen after the redesign

The recording screen after the redesign

We decided to focus on the essentials. During the recording process, we suggest the user just hit pause or stop recording. We created a special screen for further actions.

A special screen for editing tracks

A special screen for editing tracks

My storage: wireframe

My storage: wireframe

A user saves tracks in My storage to get back to them and listen. This means that the main goal of the section is to display a list of all the saved tracks, help the user find the necessary things by keywords, and play all or a single track.

In the draft, all the tracks were mixed up. And users wouldn’t be grateful if we implemented this design 🙂

My bookmarks after the redesign

My bookmarks after the redesign

We grouped the saved tracks into two types: audio programs (playlists) and individual tracks. This way, users won’t get lost and will find what they need.

Other voxtox screens

Let us show you a few other screens. In all cases, we kept in mind the client’s key business task: make a convenient app that a user would come back to again and again. Of course, we never forgot about the attractive visual component.

We took the initiative and suggested options that we knew from experience would improve the UX and be more efficient than the client’s original variant.

It was a fruitful collaboration: the client paid attention to our solutions and their feedback was always relevant. That’s why we moved quickly and completed the redesign in a month and a half.

Result

The project is paused now: the client is searching for investments. However, some user flows are already implemented in the mobile app.

The product director noted that we met his expectations by 85% 🙂 Considering the client’s high level of involvement, we think that it’s a great result.

Besides, he admitted that the collaboration with Purrweb became his best experience in IT. Our project manager answered the client’s questions faster than his colleagues, and he was quite impressed by that 🙂

The client highly appreciated our project manager’s diplomatic skills: she built communication between him and our designer. Throughout the project, she helped find compromises.

This, of course, had an impact on the work. We processed feedback properly, solved issues quickly, and searched for the best solutions together.

We’re sure that voxtox will come back, we will continue our cooperation, and contribute to the creation of a new interesting product in the audio streaming niche.

If your product needs a redesign, fill out our form to contact us. We will hear you out, share our experience, and estimate costs and time.

How useful was this post?

Rate this article!

4 ratings, аverage 5 out of 5.

No votes so far! Be the first to rate this post.

As you found this post useful...

Follow us on social media!

Share