Mr. Problem

We have seen many desktop apps specialized in audio creation and editing (namely FL Studio, Logic Pro, Audacity, GarageBand, etc.) that use a horizontal stacking system for each audio clip. Then a group of those clips, including transitions, effects, etc,... makes up a single compound audio file. The same thing also applies to video editing apps (Final Cut, iMovie,...) where audio clips are replaced with videos. Power users love them, in fact, use them mainly in professional workflows.

However, our user research conduct found out that that they hardly have any other option - which means they have to rely solely on their bulky desktops, or find it too cumbersome to bring the whole laptop with them. A phone would be the most convenient way to go. But, if we try to fit those apps into our smartphones, we would have to deal with many cumbersome problems or would have to sacrifice many useful functionalities.

Then came the question: How do we fit such complex desktop apps into devices as small as a smartphone?

Why is it “Breadslice”?

First, let’s start with the name.
It came as a great idea when we were having breakfast with a tasty loaf of bread cut into small slices, while ideating on our new podcast creation app.
And then a lot of things have happened afterwards. We really thought that a delicious sounding name would attract users into using the app, so there we went.
However, the task of coming up with the mechanics of an editor application of all kinds is no easy task whatsoever, then we looked at the name again.

“What if we put the whole ‘bread and slice’ thing into the systematics of our app?”

Early concepts

In the early period we solely thought about designing a mobile app with audio recording and editing capabilities that are much more advanced than what the world had at that time.

Our only options were a few, namely the default audio recorder on our phones, or third party apps like Ferrite, Anchor, etc...

Regarding the ‘bread and slice’ idea at first, we agreed to build the whole framework based on the loaf of bread itself. After hours of ideation, we finally decided to make it so that:

A regular session file would be named “Loaf”
Each “loaf” consists of multiple clips, or parts, called “Slice”.

In this way, we made sure that all of those slices in a loaf would be stacked vertically to utilize the vertical aspect ratio of a phone, which enables users to use most the app’s functionalities without the need to rotate their phones.

Sweet, let’s take this concept into account.

The ideation step

After creating some early draft sketches for the design of Breadslice podcast app, we all felt excited and curious about how to improve them.

Personally, I looked at some examples of successful podcast apps and analyzed their strengths and weaknesses. I brainstormed some ideas for the layout, color scheme, typography and icons of the app, and sketched them my iPad.

Then we all thought about what features we should put in the app, what business strategies that can be derived from those features, and how the users would feel when they’re using them.

When the visualization for the big picture is completed in our heads, and some messy sketches were handed out to the whole team for decision - it’s time to move on to the next step.

The Ideation Process

We mainly used Lean UX techniques for this part of the development journey. Lean UX is incredibly useful when working on projects where the Agile development method is used.

In traditional UX the project is built upon requirements capture and deliverables. The objective is to ensure that deliverables are as detailed as possible and respond adequately to the requirements that are laid down at the start of the project.

Lean UX is slightly different. You aren’t focused on detailed deliverables. You are looking to produce changes that improve the product in the here and now – essentially to mould the outcome for the better. For Breadslice, we had loads of iterations across the board, after each iteration we aim to deliver better solutions than the last ones.

Wireframes

With all of our ideas fully assembled, time to mock things up. Here are the steps that we utilized in order to create wireframes that visualize our initial ideas. While working on these wireframes, we also sketched out the overall logical flows for Breadslice using FigJam. Wow, so many things to keep in mind about the concept.

High Fidelity Prototypes

Breadslice starts with a dark theme, which we think is a trend these days.

Shades of grey, with a touch of fantastic yellow, some would say our app ‘somewhat resembles’ Binance. But hey, that’s not our main goal, right?

Audio call functions

One of the features that Breadslice offers is an audio calling function, which allows podcasters to conduct remote interviews or discussions with guests. Here's an outline of how the audio calling function works within Breadslice:

The steps of making an Audio Call in Breadslice:

Accessing the Audio Call Feature: To set up an audio call within the Breadslice app, the user can access it within the “Collab” section in the Session menu. Next they can configure the technical stuffs, like what format the call will be recorded in, what external devices should be used, how to export the call for later use, etc...

Inviting a Connection: Once the audio call feature is selected, the user can invite guests to join the call. The user can invite guests by choosing a person that they’ve connected to, or by sending them a unique link or code via email, text message, or social media.

Connecting the Call: After the guests have received the invitation and make a consent, they will be prompted to connect the call within the Breadslice app.

Recording the Call: Once the call is connected, the user can begin recording the audio. During the call, the user can manage the audio settings, such as muting or adjusting the volume of the guest. The user can also slice, pause or stop the recording at any time.

Ending the Call: Once the call is complete, the user can end the call and save the recording. Breadslice offers recording tools and effects, such as volume adjustment and equalization, to enhance post-call audio quality. The recording can then be edited and uploaded to the podcast hosting platform.

Call recording using Breadslice has the following benefits:

Remote Interviews: The audio calling function allows podcasters to conduct remote interviews or discussions with guests, regardless of their location. This can help to expand the range of guests that podcasters can interview and add variety to the podcast's content. In addition, remote interviews can help to bring in a wider range of perspectives and ideas, since guests from different locations may have different experiences and insights to share.

Pro Audio Quality: Breadslice's recording tools and effects help to enhance the audio quality of the call, ensuring that the podcast's production value is maintained. With the audio calling function, podcasters can ensure that their guests sound crisp and clear, even if they are not in the same room.

Time and Cost Saving: Conducting remote interviews using the audio calling function can save time and money for podcasters, as it eliminates the need for travel and in-person meetings. This can be especially beneficial for podcasters who are just starting out and may not have a large budget for travel or equipment. By using the audio calling function, podcasters can conduct interviews with guests from around the world without ever leaving their home or office.

Session editing tools

No audio app is complete without editing tools - the key factor that makes any podcast sound amazing and professional.

Editing tools for each slice are accessible via the “Session” tab. From there, the user can add recordings, add sound effects, music, and transitions, and adjust the volume, speed, and pitch of any audio slice. One can also trim, crop, cut, copy, paste, and rearrange their slices with simple gestures. Many more tools are currently under development (at the time I’m writing this), which includes AI/ML Audio enhancement processing, resampling, synthesizers and so on.

At its core, Breadslice has tools that one needs to unleash their creativity. Many of these tools are easy to use, intuitive and thoroughly guided. Below are the assembly components for these tools - you can try these out in the official Breadslice release.

Editing “containers” and layers

Breadslice also has many customizable components for recording and editing that the user can utilize to suit their workflow.

In fact, many interface layouts or logic processes can be “pre-defined” to maximize workflow efficiency.

This includes many “quicksets” - groups of presets and settings that can run various number of tasks with just the tap of one’s finger; customizable work layouts that suit any people no matter left-handed or right-handed, has color blindness, or trouble holding their phones.

Breadslice on Wearables

We were also able to design a Breadslice companion app on the Apple Watch. It is the perfect "extension" of the main Breadslice phone app, offering users a seamless way to record and manage audio on the go. Designed with convenience and functionality in mind, this app enhances the Breadslice experience by making it even more accessible for users who rely on discreet, mobile audio tools while on the go.

Users can make recordings directly from the Watch's built-in microphone, straight from their wrist. Whether in a meeting, a lecture, or capturing spontaneous thoughts, the watch offers a subtle and efficient recording solution that blends into any environment. Audio bookmarks can be quickly created during recordings to highlight key moments. At the end, all recordings and bookmarks made on the watch are automatically synced to the user’s iPhone. This ensures that their audio files are always accessible and securely stored.

The Development Process

We follow the Agile methodology in product development. This is a flexible and collaborative approach to software development that values customer feedback, continuous improvement, and adaptive planning. Since we’re a small team of developers, Agile allows us to deliver high-quality software faster and more efficiently.

Design handoff

Hand-off is the process of transferring design files from designers to developers for implementation. It is an important step in the design process that ensures that the final product is consistent with the original design.

While Breadslice was under design iterations, we decided that we would handoff a number of finished designs to our developers to keep the workflow agile and tidy. Zeplin was utilized in the process because of the extensive features it provides - including exporting components, assets, and so on.

Development

In terms of development, we used Firebase and Flutter as our major cross-platform tool. Firebase is an app development platform that provides detailed documentation and cross-platform SDKs to help you build and ship apps on iOS, Android, and the Web.

Firebase provides a wide range of features that make it an attractive choice for developers. We rely on Firebase because of extensive tools, fast development, and real-time databases to make interactive apps. Firebase also offers a variety of products and solutions to help you with your app development journey. For example, you can use Cloud Firestore to store and sync your podcast data across devices, Authentication to manage your users' sign-in and sign-up flows, Cloud Messaging to send notifications and messages to your users, and Google Analytics to measure your app's performance and user behavior.

Firebase also integrates well with Flutter, a UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.

Other than that, there are some tools that we made use of in the development process to make it faster, easier and more fun to do - since the original Breadslice team has only four members to get the big picture done.

Using Rive for animations

Rive is an animation tool that allows designers and developers to create high-quality animations for various platforms, including mobile apps. Rive offers a range of features, including a simple user interface, a wide variety of animation tools and effects, and the ability to export animations for use in different platforms and programming languages.

Using Rive in Breadslice provided several benefits, including:

High-quality animations: Rive allowed the development team to create high-quality, smooth animations that enhance the user experience.
Ease of use: Rive's simple user interface made it easy for designers and developers to create animations without requiring extensive technical knowledge.
Exportability: Rive allowed the development team to export animations in various file formats, making it easy to integrate them into the app's codebase.
Consistency: Rive allowed the development team to create a consistent visual style throughout the app, which helps to enhance the user experience and make the app feel more polished.

I used Rive to design smooth, seamless animations within the app's user interface. Here are a few key examples of how Rive was used for Breadslice:
Loading animations: Rive was used to create loading animations that play while the app loads data or processes information. These animations help to engage the user while they wait for the app to complete a task.

Navigation animations: Rive was used to create animations that play when the user navigates between different screens within the app. These animations help to create a seamless transition between screens, which enhances the user experience.

Button animations: Rive was used to create animations that play when the user interacts with buttons within the app. These animations provide visual feedback to the user, which helps to enhance the user experience and make the app feel more responsive.

Illustrations: Rive was used to create illustrations and icons within the app. These illustrations help to create a cohesive and visually appealing user interface.

Usability Testing

Usability testing is a type of user research that evaluates how easy and intuitive a product is to use. It involves asking real users to perform a series of tasks on the product and observing their behavior, success rate, and feedback. While our developers are working in the backend, we utilized usability testing which can help us identify potential issues and make improvements before releasing the MVP version of Breadslice.

Maze is a continuous product discovery platform that enables product teams to conduct usability testing quickly and easily. Maze integrates with popular design tools such as Figma, Sketch, and InVision, and allows you to create interactive prototypes and test them with real users. You can also collect quantitative and qualitative data, such as task completion rates, time on task, satisfaction scores, and user comments.

We conducted a usability testing process using Maze for 10 content creators that had experience with podcasting or audio editing, and with various desktop and mobile audio editing softwares. They matched our target audience for Breadslice. We wanted to test the first version of Breadslice and see how users would interact with the main features, such as recording audio, adding sound effects, and sharing podcasts.

We created a usability testing plan that outlined our goals, participants, tasks, and methods. We used Maze to create a prototype of the app and set up 20 tasks that covered the core functionality of the app. We also added some questions to measure user satisfaction and collect feedback.

We invited the participants to test the prototype using Maze and recorded their interactions and responses. We analyzed the results using Maze's dashboard and reports, which showed us the task completion rates, time on task, satisfaction scores, heatmaps, and user comments. We identified some usability issues and areas for improvement, such as adding more guidance for recording audio, simplifying the editing interface, and providing more options for sharing podcasts.

We used the insights from Maze and our test users to iterate on our design and make changes based on user feedback. We plan to conduct another round of usability testing using Maze to validate our improvements and see how users respond to the MVP version of Breadslice.

CURRENT STATUS

The Milliwatt team has made significant progress in developing Breadslice, but the project has been postponed. The big picture is already done, yet we still had issues with funding with the project. So until any further notice is made, we'll have to sadly set it aside for now :(

But no worries, we still have plenty of surprises for you.

Great thanks from the Milliwatt team and I for reading :)

Copyright 2024, by Buro.