Whether you’re a designer by trade or not, I am sure you have found yourself frustrated by terrible user experiences, dreaming-up alternatives, simpler solutions, and screaming “even I could do better!”.   

Well, we find ourselves screaming a lot. 

A year ago, we started capturing our frustrations on post-its and decorating our studio walls with our complaints – big and small. 

Then we went into lockdown.

So, we asked each other:

“What ritual can we introduce to keep the team connected to each other and engaged in a piece of work that is unrelated to current project demands?”

Our attention was drawn back to our complaint colleage and the idea of reshaping popular products was born. 

We scheduled one hour each week, in everyone’s calendar to spend rethinking better experiences for some of our most used – and abused – apps, products, and experiences. 

The Apple podcast app is equal parts loved and hated by the team so we decided to start there.

Getting started

We approached the problem in the only way we know how – with a UX mindset.  We borrowed techniques from our design toolkit and exercises from our design sprint methodology

Session One

As a devout podcast listener, I had a lot of pent-up frustrations with the application and so it was my role to run the team through a demonstration of how I use the app. I gave them three scenarios and the problems I encountered along the way. The team turned the problems into a long list of HMWs, leaving us with plenty of opportunities for exploration. 

Then we refined our HMWs and voted on one:

How might we better present show episodes to reduce scrolling?

Long scrolling in the current design makes it hard to look for relevant episodes

Session Two

We came into our second session equipped with inspiration to share with the team. We looked outside for other products and services that do a spectacular job at serving a high volume of content but display it in a way that avoids endless, vertical scrolling.

The team drew inspiration from some of their frequently used apps. A few stand out features were the show highlights from Apple TV, horizontal scrolls from Headspace, search functionality from Castbox, and preview subtitles from Netflix. 

Design references (left to right): Headspace, Monocle, Castbox, Netflix

With our imaginations open, the sketching began. We started with divergent techniques such as crazy 8s, which we repeated twice sharing our favourite idea each time. Then we used the final thirty minutes to complete a more detailed four-step solution sketch.

Session Three

We began our third session by reviewing the solution sketches and voting on our favourite concept overall as well as individual features. The highly voted features that really came through from our ideation were:

We moved onto a user flow and then right into a detailed storyboard – specifying the content, details, control and features on each screen; helping guide the prototype.

Session Four 

This is where we moved from Miro to Figma. We turned our sketches into wireframes. We tried to focus on information hierarchy as the podcast episodes and shows are information heavy. We also refined some of the elements as a final step together.

Adding visuals wasn’t really something we could do as a team. So in between project work, our UI Designer took our team sketches and brought them to life. In an effort to reduce endless scrolling and really give the content the limelight it deserves, this is what we came up with:

When users land on the show page, the hero image is highlighted as a cover to acknowledge the show that the user is viewing.

The search bar will only appear when the user drags the page or when they scroll back up the page. By scrolling back up the page, we are assuming here that the user couldn’t find what they are looking for and so might need a little help from the search bar.

Each section is broken down into different visual layouts in order to create a pause or break for the users while they navigate the long scrolling area. Some of the sections feature a horizontal scroll and some are highlighted as an individual card.

When users want to know more details about an episode, instead of going to a new page, we created an overlaying preview so that the user can easily navigate back to the show page if they discover that the episode was not what they were looking for!

There is an experimental element that we added to the design too, which is the karaoke-style text preview. In theory, the host can choose a few sections from each episode to give listeners a preview of their podcast. The highlights will auto-play – on mute, of course, just in case you are browsing in a public place!

Our Rituals

We’re dedicated to our re-shaping sessions. The first series was a success and we plan on carrying on – especially given the second lockdown here in London. 

If you are looking for ways to keep your team connected and give a little respite to the daily project demands, here a few things we did that helped make this series a success:

1. We took turns facilitating each session, giving everyone the chance to work through the exercises as well as learning some new remote facilitation techniques.

2. The facilitator captured session summaries in a google doc to make sure we documented our process and kept our outputs.
We began and ended each session with a recap to be sure everyone stayed aligned.

3. We trialed new workshop techniques during the sessions so that we can later use them with our clients – a great and real place to experiment and enrich our practice.

4. We committed to writing a blog post at the end of each session to share our dream with the world and also practice our storytelling techniques.

What happens next?

We patiently wait for Apple to hit us up, I guess. 

We can certainly dream or we would continue to refine our design and kick off some testing with individuals outside of our organization.

But until then stay tuned for the next app in our series. We recently reshaped Monzo’s homepage to suit our new habits of contactless payments and bill-splitting. 

If you and your team are also running remote workshops these days, you can read up on how we manage some of the typical remote woes here.