BBC Bites

An app that aggregates news for people on the go, built within a 2-week innovation sprint. Featuring 20 randomised cards per day, the user can swipe to save a news story to digest later, or dismiss the card if uninterested. The goal was to create a fully-functioning prototype within a short sprint, with an agile team consisting of only a handful of roles. We wanted to create a lightweight application that would spark interest in all features areas of the site and could be also used as a traffic influencer.

My Role

The team comprised of four key roles – Project Manager, Designer, Front-End Developer and Back-End Developer. I took on two roles as Project Manager/Designer on this project, initiating kick-off sessions, workshops and frequent review sessions to ensure the project was keeping within the Sprint timeframe. I also supported other team members where necessary, such as offering assistance to junior team members. To streamline communications, I introduced up a Slack group for the team and a Trello board for scheduling.

You can view the Trello board here:

Research

We conducted competitive research to see if there were applications offering the same features. We found that Nugget (a bookmarking app for book quotes) and Hype (a now-defunct video service) had similar swipe mechanisms, alongside more obvious products like the News360 app and the news sections in Snapchat and Flipboard. We also looked at how the Tinder app used a card-style feature and utilised native mobile gestures.

We also looked into analytics for the feature sites to learn about their user’s behaviours. We found that there was no way for articles published before the front page feature would be exposed, unless they featured in a ‘Best Of’ or ‘Most Read’ module. Using these findings, we thought it would be a great idea to use the app to surface older articles that hadn’t had much audience exposure.

Following this data analysis, we ran a workshop to share ideas and technical discovery findings, outline core functionality and, most importantly, outline the potential user flow. We created affinity maps to find patterns in-app and workflow pain points and started to whiteboard our ideas into templates and states. Here, we could collaborate and quickly sketch our ideas. Once finalised, we took photos of what we achieved as reference points so I could successfully digitise them into software.

Outlining our users was also an important step:

Who is the service for?

– People with little to no time – people on the go, commuters, workaholics etc with short attention spans
– Tech-savvy mobile users / multi-device owners
– Inquisitive minds
– Legacy users of BBC content

In order to fulfil and meet the business requirements, we determined that new ad opportunities should be baked into the app (interstitial ad cards, listed ad units etc) for commercial value. Though quality-rich content should be at the forefront, with cards curated by editors from each vertical.

“We decided the app should have an algorithmic experience – learning which types of content you like/dislike and presenting similar content personalised to you”

This tailored experience could be built upon with social integration, utilising modern and contextual-app ‘Like’ features (mobile-only gestures, sharing, social syncing).

Prototyping

In order to efficiently explore concepts and get quick feedback, I decided to divide the content into components. We iterated and validated extensively over the course of the project. This proved to be beneficial to the team in two major ways:

  • It allowed us to explore many directions early on without getting bogged down by the potential implications
  • It made it easier to frequently validate with the co-founder to make sure we were addressing needs and designing efficiently, in that iterations could be made efficiently and effectively within the app design

Using Sketch I started to map out the basic templates in artboards, constructing symbols for easy implementation and modules to easily construct the layouts. To streamline the design process, I used a simple grey palette for the wireframes blocks as we wanted to focus foremost on the functionality to ensure it was a user-centric experience.

User Onboarding

A set of cards shown on first load, providing information on key features of the app. Seperated into 3 tabbed sections –
Discover, Saved and Friends, it makes it easy to navigate and find contextual content.

Discover, Saved and Friends

There are 3 key sections to the app – Discover is the dashboard area where the cards are presented – this is where you can save or dismiss cards. The Saved section is where the cards are stored for digesting later. Friends is where you can social sign-in to see what articles other people are saving.

Saving Stories

This image shows the way in which a user can use the native swipe gestures to save or dismiss cards. A response is shown when the card is successfully saved – a heart changes colour with a confetti-style animation as a visual cue.

Ad Cards & Articles

We also had to integrate the ad potential for commercial value. We decided that for every 5/10 cards swiped, we would show an advert card – maximising ad impact and viewability, without too much disruption to the experience. The lists of articles can be toggled to their larger size for an improved visual experience.

The article itself, triggered from the ‘Read now’ button was purposefully built as a stripped back and minimal experience, imitating an RSS reading experience with only a few images to maximise load efficiency and to reduce unnecessary elements creating noise on the page.

We had multiple review gate sessions as a team where we would share updates. I showcased the designs to all involved, and comments/amends were annotated. From here, I could make multiple iterations quickly and upload appropriately. I used tools in Sketch to map out the interaction flow, making buttons tappable to create a complete user journey.

I also added subtle page transitions and micro-interactions to show how the app animations could work. I ensured the team was exposed to all changes, and that we could make minor amends to complete the design.

Development

After the prototype was built, I exported the relevant assets for front-end translation in a repository, so all team members could access them easily. Amends could be made quickly if necessary and uploaded with efficiency.

“We started to engineer the project as a React framework with web pack before coding general page components – the ‘Discover’ dashboard, ‘Friends’ view and ‘Saved’ content areas”

Afterwards, additional components were added as page styles were created, alongside the different displays for the card list/article cards. Once the API was ready, we refactored the existing components to make use of the correct data format before testing everything in progress.

Unfortunately, we couldn’t run the demo on a test server as we experienced issues in the code. Instead, we ran it locally to ensure it could be viewable. We then presented our idea to the other innovation sprint teams in a demo session, showing our processes and how we achieved our goal.

Future Considerations

It was beneficial to run a component audit (review buttons, forms, inputs etc) during the project in order to remove redundancies, condense styling where appropriate and allow for the integration of new designs. Designing for components helped tremendously, as not only did it allow us to rapidly iterate on the designs and get quick feedback, it also forced us to design efficiently and in a manner that could be reused across the product. The component audit forced us to consolidate approaches, which was crucial in moving forward into hi-fidelity if we were to fully implement the app as a live and launchable product.

I also created a style guide to aid in the translation processes for the designs if they were to be realised, with an accessible library and repository for developers to refer to. All detailed sizes, colours and states were listed to ensure similar elements were kept consistent throughout the product.

We listed some other functionalities we could include in for the app if we were to have additional project scope:

  • Utilising an app-based framework, we could use in-app push notification reminders and new content notifiers
  • Create your own ‘chunks’ or collections – shuffle, string together
  • Public/private toggle – share your ‘chunks’ / collections with others, or create a private string to and share them to your in-app social (requires social sign-in)
  • Shuffle – inexhaustible list of content cards you can discover (not recent) – opportunity to expose older articles and direct more traffic to them
  • Pull to refresh – update cards
  • Filter – discover cards based on your chosen topic
  • Digest later bookmark to save content for later
  • Alternative card types (full-width gallery, ambient videos other media types)

 

You can view the collection of all the wireframes here:

 

To view the functioning prototype, click below: