portfolio project - bbc my politics

Brief + Project Context

The BBC as a non-profit public body has a Royal Charter commitment to promote education and civil so-ciety. They have hired us to help solve the problem of low engagement with politics and political news among certain voters. Their target solution would both better educate voters about upcoming elections and votes but also keep them involved with the business of government on an ongoing basis.

BBC My Politics - concept appMore accessible political news

A two-week design sprint working in a team of four to design and prototype a concept app to provide politcal news content for people currently disengaged with politics.

7 min. read

User Research

Team members Project DurationMy responsibilities Tools used

The Problem

Voters feel disengaged with politics and the political process, the BBC needs to find ways of addressing this problem in order to fulfill its Charter obligations.

- BBC My Politics concept app | Benjamin Strak 2016

User Interviews Interface Sketching

Task Analysis Interaction Design

Persona Creation Prototyping

Competitive Analysis Guerrilla Testing

User Flows Visual Design

Camera

Omnigraffle

Sketch

Invision

Keynote

Two Weeks

To begin with we needed to find out what people’s attitudes to politics, political news and the BBC real-ly were. To do this we reached out to 84 people through an online survey, carried out 8 interviews (with individuals from a range of political orientations) and researched a voting user journey in detail.

What surprised us in the survey was the high level of interest in politics among those who responded, suggesting that (even young) people were actually much more engaged with political issues than we intitially thought.

Surveys and interviews.

Benjamin Strak

Austin Harshberger

Q Shen


Conducting interviews with people selected from this pool of survey respondents nuanced our under-standing further:

• It became clear that people were passionate about political issues, especially ones that were local or personal but much more cynical about and disengaged with ‘party’ politics.

• People found the overall quality and length of political content available on the major news sites to be frequently overwhelming and overly time-consuming to read.

• In spite of all this content, finding relevant content (especially in order to make a decision) was still very hard.

• Most people also didn’t know much about how they could get politically involved or even where to go to find out (especially with local politics).

Using these insights we drew up an experience map and user journey for a relatively uninformed voter as they went about choosing how (and even whether) to vote.

The first part – discovering who is up for election and what the key issues are – can be time-consuming but it is the second part – as the voter has to compare what they think of the different options – that can be quite stressful and disheartening and which often puts people off completely.

The user journey of a voter.


Personas

We created three personas using an affinity map to spot trends within all the feedback from the inter-viewing process. The challenge with the personas was to capture a range of levels of political engage-ment, a range of familiarity with tech, and a range of accessibility needs.

Our first persona Chloe – ’The Inexperienced Non-Voter’ – is a young sales assistant. She is politically inexperienced but is used to getting news through apps and websites.

Our second persona Albert –‘ The Accessibility Champion’ – is blind so finds political content both inaccessible in style and literally, relying on audio versions due to his disability. He has a smartphone and makes heavy use of the voice-to-text feature in order to use it.

Our third persona Joyce – ‘The Activist’ – is middle-aged and works in a local library. She is fairly well informed about politics but nevertheless finds it hard to keep up to date with local politics and with events on issues that matter to her on her iPhone.

The primary persona upon whom we based our design decisions was Chloe. Our decision to focus on her needs primarily was due to the particular lack of political engagement of people of Chloe’s age making her an important target.

Competitive Landscape

As part of our research process we undertook a review of what kind of political news and information was available elsewhere. It was clear from this why people tend to feel overwhelmed or at a loss.

• On large newspaper sites like the Guardian or Telegraph content is comprehensive, but gener-ally very long and jargon-heavy.

• Lots of interesting detailed political info can be found on sites like TheyWorkForYou.com or council websites, but only if you know how to look for it.

Other apps and websites such as Voter, The Daily Skimm and CrowdPac are making efforts to re-imagine political content delivery through interactive features such as quizzes, and concise digestible content.


We hypothesised that there was an opportunity to address the painpoints we had uncovered during user research by designing a new BBC app that presented news content more personally and interactively, and also integrated other political information relevant to where the user lived and the issues they cared about.

The Design Opportunity

Proposed Design Solution

A simple and easy to use app that delivers a personalised digest of news, local information and an interactive political quiz – encouraging users to engage directly with the things they are

reading about.

MY POLITICSDESIGN STUDIO

CHLOES’S KEY FLOWS

Set up her preferences.

Read a story and define a political term she doesn’t know.

Discover her political position.

Keep it simple• Mobile app• Fewer shorter stories• Time stamps• Comparison Tool/Quiz

Keep it relevant• Preferred Topics• Location-based content• Suggested articles

All in one place• Local event listings• Integrate appropriate content from other sites

Key Design Principles + Features

Initial Design Studio


MY POLITICSDESIGN STUDIO

CHLOES’S KEY FLOWS

Set up her preferences.

Read a story and define a political term she doesn’t know.

Discover her political position.

To structure our design process with we defined some key goals that a visitor like Chloe would need to accomplish as part of her use of the app. These ranged in length and complexity from simply being able to set up her preferences to making a decision about where she stood on a political issue.

For our design studio we decided that of the goals above for which we had drawn up user flows the most important to sketch out ideas for were:

• Set up her preferences• Read a story• Define a political term she didn’t know• Find out her political position

Our initial sketches focused on finding simple and interactive ways for someone like Chloe to do these things; sliders, prominent images and a political compass graph to graphically display quiz results.

MY POLITICSINITIAL SKETCHES - SIMPLE AND VISUAL

Early sketch ideas for story and quiz screens.

MY POLITICSMID-FIDELITY PROTOTYPE TESTING


After our intial sketching in Design Studio, we combined set of low-fidelity printed wireframes that we were able to put up on the wall and walk people through to get their reactions. We had a lot of useful feedback at this early stage, this included:

• More onboarding explanation - why questions about reading habits etc?• Discoverability of key features - especially the political dictionary.• Integration of news and interactive content - questions about current news stories too.

When we were satisfied that we had ironed out these issues, we then built a tappable prototype using Invision so we could take the concept out into the cafes and bars of Shoreditch for further guerrilla test-ing. Feedback from actual device use helped us solve countless more navigation and interaction issues including confusing icons, and a quiz page results layout that unintentionally made comparing answers very annoying.

Prototyping

Low-fidelity to high-fidelity wireframes for a story page (final version on far right).

“I would not have guessed you could do check definitions like that, but would definitely find a tool like that handy.”

Maia, Costa Coffee

Daily BiteMy Compass Local

Sample HeadlineSample Subheading

Body Text lorem ipsum dolr sit amet Body Text lorem ipsum dolr sit amet Body Text lorem ipsum dolr sit amet Body Text lorem ipsum dolr sit amet Body Text lorem ipsum dolr sit ametBody Text lorem ipsum dolr sit amet

5 min. read

Story 1Story 1

British tycoon Sir Richard Branson is a "tax exile" and should be stripped of his knighthood, shadow chancellor John McDonnell has suggested. Mr McDonnell told the Sunday Mirror Sir Richard wanted to "undermine" democracy, after a row over Jeremy Corbyn's journey on a Virgin train.

Earlier this week, Sir Richard's Virgin Trains released footage disputing Mr Corbyn's claims about overcrowding on one of its services.Sir Richard has not responded. Speaking to the newspaper, Mr McDonnell said former BHS boss Sir Philip Green should also be stripped of his knighthood. It comes on the day that the last BHS stores close for the final time. Sir Philip has not commented on the remarks.

There is no suggestion the businessman, who lives on Necker Island in the British Virgin Islands, has done anything illegal. In 2013, Sir Richard said he was living on the island because of a love for the "beautiful" location - not for tax reasons.

My DigestMy Compass My Local Area

15th August 2016

Strip Branson of knighthood - McDonnellEconomy

5 min. read

Story 1Story 1

British tycoon Sir Richard Branson is a "tax exile" and should be stripped of his knighthood, shadow chancellor John McDonnell has suggested. Mr McDonnell told the Sunday Mirror Sir Richard wanted to "undermine" democracy, after a row over Jeremy Corbyn's journey on a Virgin train.

Earlier this week, Sir Richard's Virgin Trains released footage disputing Mr Corbyn's claims about overcrowding on one of its services.Sir Richard has not responded. Speaking to the newspaper, Mr McDonnell said former BHS boss Sir Philip Green should also be stripped of his knighthood. It comes on the day that the last BHS stores close for the final time. Sir Philip has not commented on the remarks.

There is no suggestion the businessman, who lives on Necker Island in the British Virgin Islands, has done anything illegal. In 2013, Sir Richard said he was living on the island because of a love for the "beautiful" location - not for tax reasons.

My DigestMy Compass My Local Area

15th August 2016

Strip Branson of knighthood - McDonnellEconomy

Visual Design

Following the conclusion of testing on the mid-fidelity prototype, we embarked on a high-fidelity proto-type using the BBC’s Global Experience Language so that the end result reflected their current brand-ing, iconography and interface conventions.

• The overall colour of the app navigation – a teal (hex colour code: 45a5b9) was not affiliated with any British political party - important to maintain the neutrality of the app and the BBC

• The font family ‘Arial’ - used throughout as on all BBC online destinations.• Use of content ‘cards’ – an established BBC design pattern – to distinguish interactive content

from full screen news or informational content

The Invision Prototype we made can be seen at: https://invis.io/3W8JHOK57


The end result is consistent with the existing family of BBC apps, important for the BBC’s large national audience to feel comfortable when using it.

Beyond this base level of consistency the UI design is pushed in a slightly more visual and colourful direction to give a slightly more friendly feel.

MY POLITICSNEW MEMBER OF THE BBC FAMILY

The icon we designed for the app.


Chloe – The Newly Confident Voter

Although the client for this concept project is the BBC, the story at the centre of this project is really Chloe’s. The BBC Charter obligation is at root to someone like her who just needs a bit more help to engage with with a complex but important subject like politics.

The key design features, a short personalied news brief + dictonary, an interactive quiz and local polit-ical info address a big issue– voter apathy, but are a reminder that all big issues exist on the ground as small everyday problems like Chloe’s.

MY POLITICSNEXT STEPS

Desktop Version As part of existing site

Accessibility High Contrast mode

MY POLITICS

Quiz More people you know

Testing on the high-fidelity prototype highlighted further areas for work to continue on in a future design sprint. This included:

• Additional content for the quiz section - celebrities with similar views to you perhaps, or histori-cal political figures.

• Additional accessibility measures - a high contrast mode for those with less serious vision prob-lems than Albert for example.

• A website version of the app’s content (as part of the existing BBC News website’s Politics sec-tion).

Next Steps

“I used to stay quiet when my friends starting talking about politics. But now I feel confident enough to contribute all the time.”Chloe, Primary Persona

Next Steps; desktop version, high contrast mode and further quiz content.

portfolio project - bbc my politics

Documents