At this year’s WWDC, Apple unveiled SwiftUI, a framework that helps developers build declarative user interfaces. At Yelp, we were immediately excited about it and were looking for a way to start adopting it. We decided that our Apple Watch application was the perfect candidate for modernization using SwiftUI and were excited to explore a redesign with this new framework.

At Yelp, one of the things we pride ourselves on is the quality of our content. Yelp users have posted hundreds of millions of reviews and photos. As we set out to re-imagine the user interface for our Apple Watch app, we knew that our gorgeous photos should be the star.

Here is a side-by-side comparison of the old interface and the new one.

As you can see, we’ve adopted an interface similar to the Audiobooks and Music apps which put a very strong emphasis on the thumbnail image. Users of the Apple Watch Series 5 will also see a compass that will allow them to see the direction and distance to each business in their search results. We hope this will help users in their search for great local businesses near them.

Building a scrollable card stack with SwiftUI

In contrast with WatchKit, SwiftUI gives us much more freedom when building our user interface. It feels much more like developing for the iPhone, with the added constraint of designing for a small screen. One thing that’s notable about the design of the search listings is the simplicity of it in code. This scrollable card stack took less than 120 lines of code, animations included! The magic of it resides in the custom view modifiers you can create to apply to your SwiftUI views. Let’s dive into a simplified example.

Here is a slightly simplified modifier that shifts the cards vertically and doesn’t take care of any scaling down or rotation.

Given a cardOffset that represents the difference between the current index and the card’s index, we return a custom view modifier that offsets the view’s origin on the y-axis, and modifies its opacity if it goes to the background. Our own implementation also takes care of adding a scale effect for the depth impression, and a zRotation effect, to give the animation more flavor when the cards are scrolled off-screen.

Now that we have view modifiers, let’s create the scrollable stack.

We create a ZStack that will fill out the remaining screen space left out by the Spacer. We then compute the cardOffset needed for returning the correct view modifier, and apply the modifiers on their respective cards.

SwiftUI is able to smoothly interpolate animation parameters for the offset and opacity whenever the modifier changes for a given card. This means the animation logic is all handled for us if the current index is changed within an animation block. Since this code hooks into the digitalCrownRotation modifier and passes the animated binding that represents the current index, the animation will be automatically performed when the crown is rotated. How convenient!

This redesign made us eager to see where Apple is going to take the framework, and what we’re going to be able to build with it in the upcoming years. We’re thrilled to launch the new Yelp for Apple Watch application today and hope you will love it as much as we do!

Back to blog