Redesigning Breaker, one screen at a time
How incremental redesign allowed us to ship sooner and iterate faster.
When I started at Breaker in the beginning of August, the Breaker iOS app was already functional and had a lot of features, but needed a unified design. Instead of relaunching an entirely new design all at once, we decided to redesign each screen one at a time.
Our brand designer Josh Williams had already started working on the new branding and style guide. With a color palette, logo, and font family we all liked, Josh and I started creating different UI components together.
My first challenge was to learn the Breaker app and all its features, then try to understand our users and all the different use cases. I had been using the app for about a month before I started working at Breaker and I already had a good sense of what we wanted to accomplish. It was still very helpful to sit down with the founders, Erik and Leah, to hear their vision, along with ideas for new features before starting the redesign.
Design process
The first designs were made in Sketch, but we later switched to using Figma. We like using Figma because it allows us to have team projects where everyone in the team can view the same files simultaneously, export assets, and leave comments (now with the @-reply feature!). The switch was easy, I did not have to spend much time learning a new tool since both applications are similar.
The commenting tool has been very useful for us. Whenever a new design is ready, I post the Figma link in a GitHub issue and everyone on the team can view it and leave comments. Through this process I can create new iterations fast without having to meet the team in-person to get feedback.
Every design in Figma is made pixel perfect so that it is easy for our developers to implement. We also have a style guide that our iOS developers can view if they need extra guidance. When the design is finalized all assets are exported from that specific screen and placed in a shared Dropbox folder. We use PDF files for all our assets in the iOS app because Xcode will scale them nicely to all device sizes and create a smaller app download for users.
Screen-by-screen
At Breaker, we work in two week sprints. We would take one sprint to design one or two screens, and our backend and iOS developers would develop the design the sprint after. Users could see a new design in the iOS app every month and we collected user feedback and Mixpanel data to see how these new designs were performing.
The ideas for new designs and features often come from requests from our users, along with inspiration from other apps and technologies. Breaker uses a tool called Buglife for user feedback. Users can take a screenshot anywhere in the app and send us bug reports or feature requests. We believe in the importance of listening to our users, so we read every bit of feedback our users send to us.
Recently listened (before) and Like-it (after)
One example where user feedback has been particularly helpful is our “Recently listened” section. Hence Breaker is a social app, we want people to interact more with our social elements such as “like” and “share”. We launched a first version of this new feature without much user testing. The first version got lots of Buglife reports from users who did not like the design or where it was placed.
So we went back to the drawing board and re-designed this section all over again. After discussing a bunch of designs back and forth among the team we finally came up with a final design we all like. We call it the “Like-it” module instead and this new design proved to be much more successful, more than quadrupled the amount of likes on each episode.
Working as a team
The key to iterative design is having designers and engineers working together. The engineers (iOS and backend developers) should ideally be involved at the beginning of the design process. The designer should also share their work as early and often as possible to the team, in order to optimize time for iterations and efficient work.
Next up: Redesigning the website
Today, we have a fully re-designed iOS app with a style that we like and are proud of. Our current challenge is to keep focusing on doing more user testing and improving Breakers features and user experience.
Next up is a new design for the website. Right now, you can listen to an episode, add it to your playlist, log in, search, and follow other users. Our goal is to add more features such as like, share, and comment on episodes, and create a more unified design that matches the iOS app.
We love user feedback!
We love to hear from our users. Email us at anytime at feedback@breaker.audio.
Never tried Breaker? Download it for free today.
