Gousto’s iOS order Widget
What’s a Widget?
Widgets display relevant, glanceable content, which allows users to quickly access apps for more details and gives the ability to customise and present the information they value most on their device’s homescreen. Users can add multiple copies of the same widget, and tailor each to their unique needs and layout. They support multiple sizes: small, medium and large and we saw the addition of a fourth (extra large) announced at WWDC 2021 especially made for iPadOS 15. Widgets have been in existence for a while now but it’s only since iOS14 where they became customisable with the help of the WidgetKit and SwiftUI frameworks.
There are already many widgets available for us to add to our home screens. Apple held down the home screen for some time and built extensions on the default apps that come with your device: Weather, Notes, Batteries, Calendar and Reminders, Find My are just some.
However, more widgets are being developed every day and with all the great widgets available, it only made sense that we would build one ourselves. A number of the Gousto iOS team formed a group that would work on a prototype during Tech Ten Percent (TTPC). TTPC is 10% (1/10 working days = 10%) of our working time that Gousto employees can dedicate to innovation, learning and up-skilling. We saw this as a great opportunity to delve into some modern frameworks such as WidgetKit and SwiftUI and introduce these in our app.
When deciding on the MVP, we chose a MIRO board to map out our goals and brainstorm what would bring the most value to our customers. We decided to build a widget that would show information about a customer’s order such as upcoming deliveries, delivered orders, and more importantly an easy way to directly order their next box with a reminder of its cutoff date. The widget is able to show all the users current orders, within which the order can be interacted with by tapping on the meal icon. This then provides an easy way for a user to dive straight into the individual recipes details and cooking steps.
We chose the medium-sized widget as this layout suits our use case perfectly. It offers a much more flexible display than the small layout and also allows for multiple interactions (the small layout only allows for one tappable action into the app and no ability to set that location). We decided for the first iteration, we would build the medium sized class and extend on the family in a future iteration.
Upon finishing the prototype, we gave a presentation of the widget during a TTPC demo. After the demo, we received feedback and interest from a PM who joined one of our calls and saw the potential in the widget. Then, the Rockets squad fittingly aligned it with their goal to drive app engagement and we thought this would be a perfect opportunity to experiment with different use cases for the widget. The productionisation entered one of our product team’s Q3 roadmap and as of early September, the widget made it into the iOS release and it is now ready to be installed onto your home screens.
If you’re wondering how to get our widget on your home screen, follow the steps below:
First, ensure you’re on the latest version of our app by updating the app on the AppStore. Once you’ve done this, you will be able to add the widget by following these simple instructions: first, hold down on an empty space on your home screen and wait until your apps jiggle. Then, tap on the ‘+’ button that should appear in the top left-hand corner, search for ‘Gousto’, tap it and click ‘Add widget’ and there you have it. Your new Gousto widget.
Developing the widget was a huge learning opportunity for our iOS team and meant we could delve in more modern frameworks that have become accessible to us. It also meant we could ship a modern feature to all Goustonians. Learning was the team’s overall goal for the project, not necessarily to build a feature that would make it into production so the end result was beneficial on all fronts. We learned about limitations that widgets currently have and how to work around them as well as uncovered parts of the app that needed refactoring along the way to help build out the feature. This is a real demonstration of how useful TTPC time is to our developers and Gousto as a business.
What’s next for widgets in iOS15?
The new functionality for Smart Stacks was released this year which allows users to stack different widgets on top of each other and allows iOS to determine which widget is most relevant to be shown depending on factors such as time of day, location, and more. On iOS 15, the system can now automatically add widgets to Smart Stack that it believes are relevant. For example, if you have an appointment at 10am in your calendar, Smart Stack might put this to the top of the stack the night before / early morning when you wake up.
iOS15 also saw the addition of Widget Suggestions; this is a new way for users to discover widgets they may not have known existed. For example, if a user is using the Gousto app daily, but doesn’t have the Widget on their Home Screen, Widget Suggestions will recommend the Gousto Widget to the Smart Stack and users can decide whether to add it or not. This is a great feature that can improve visibility and experience of widgets, especially since discoverability of widgets are solely user-led in iOS14.
With special thanks to Sara Sipione. Sara had the initial prototype idea for this feature and without her tenacity, we wouldn’t have seen this feature go into production. Thank you to all those who were involved developing the widget: Sara Sipione, Katie Jones, Andrew Perkins, Seb Skuse, Robert Tanase, Greg Spiers, Dale Buckley, Luke Kelland, Dominic Pegg and Spencer MacDonald.
