Daily Burn’s product has constantly been evolved to better serve its members and to adapt to the content being made. In a redesign, we created the Today page, a destination that gave members improved access to their program’s workouts, guidance, and nutrition content. Another large product initiative was 365, a live interactive workout, new every day – which was launched separate from the rest of the product.
After having these two core product features around for a while, some problems became clear:
1. 365 and the rest of the product were disjointed experiences.
Members who did one were not effectively exposed to the other – while data showed that members who did both kinds of workouts were the most engaged.
There was extensive feedback regarding confusions about how one part of the product worked, rooted in existing understanding of the other part.
2. The Today page was only useful to members following a single program.
Only a program being explicitly followed would show up in the Today page, so members doing workouts from more than one program, or 365, would not benefit at all from this hub.
This is how we successfully addressed those problems.
To allow members to more easily explore 365 from the rest of the app, and bring members who primarily did 365 to our other workouts we redesigned the navigation to be the same for both parts of the product.
We explored using 365’s top navigation as the baseline with an overlay-on-expansion hamburger menu. But this solution meant that the primary links would be hidden by default, which would be counterproductive to bridging the gap. Another solution, navigation via browsing, was beyond the scope of these changes. Previous attempts at it had left us with a bunch of links and modules that didn’t get attention.
We then decided to iterate on the main app’s side navigation. Since 365 can be experienced with video and chat simultaneously, we made the sidenav collapsible, and then added it’s own first use experience to nudge members to learn how to collapse it. For the non-web platforms, we brought over this new IA that included 365.
Next, we created a new Home page, to replace the Today page as the recurring landing place for all members. Each part of this page posed its own challenges which had to be solved holistically since this would be the centerpiece of the product in all apps.
The first part was the featured carousel. We wanted to display 365 workouts, normal workouts, and any other high priority content. To solve this, we created different templates: Workouts, Classes – to display 365's upcoming and live states – and Content, which could be used for programs, announcements and pretty much anything else. We worked with our graphic designer on new assets that would be needed for all existing and upcoming workouts.
All the different platforms, device sizes, orientations and fonts made this a particularly fun puzzle. We created universal breakpoints to be shared between iOS, Android and Web. They were designed using nested Sketch symbols to keep elements consistent without going insane.
The second part of the Home page was the content rows. These required redesigning the workout thumbnails, which affected many other pages, and addressing layout and interface concerns in all apps. We also had to work with the back end devs to determine what content would populate the rows and what member actions would affect that.
Changing the nav and launching the Home page were two massive endeavors that significantly changed all our platforms for the better.