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
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.
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.
The podcast app with the design that we created. Dribbble shot.
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.
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 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 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.
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
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
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
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.
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
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
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
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
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
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
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
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
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.
