What are the next frontiers in interaction design?

Voice assistants – such as Siri and Alexa – are becoming viable because the accuracy of speech recognition has increased significantly through machine learning.

I’m concerned about the political ramifications of the technical underpinnings of voice interfaces. Voice recognition has advanced through access to lots of data, and machine learning. This means that for people to use this interaction medium, they need to be using tools provided by big providers like Apple, Amazon and Google. How easily will people be able to create their own voice interfaces without relying on a corporate provider? How easily will you be able to identify the thing that you’re interacting with, the logic it’s driven by, and who ultimately owns and controls the means of interaction? What is the product, and what generates value and to/for who?

Voice as a interaction medium has limitations. Voice requires (quiet) private space, and for you to be able to speak in an understood language. And so far voice interactions have focused on information or commerce transactions.

It’s worth reflecting on what problems we’re trying to solve when we pioneer a new interaction paradigm. What value are we trying to realise? Are transactions the big challenge we need to solve? (Would interaction approaches based around critically managing and engaging with information flows, or social connectedness, be different?)

The dominant method of interacting with computers so far has been mechanical, with feedback and state communicated visually by the computer.  Thinking more broadly, the interaction channels we use to interact with computers could be mechanical or oral, and each of our senses could be a channel for the computer to feed back information. And we could design for more than one type of input and feedback at one time. This Smashing Magazine piece on multi-modal interfaces outlines interfaces that take visual and audio elements:

“When​ we’re ​designing​ an ​interface,​ ​if​ ​we​ ​know​ ​the​ ​context​, ​we​ ​can​ ​remove​ ​friction.​ Will​ ​the​ ​product be used​ ​in​ ​the​ ​kitchen​ ​when​ ​the​ ​user’s​ ​hands​ ​are​ ​full?​ ​Use​ ​voice​ ​control;​ ​it’s​ ​easier​ ​than​ ​a touch​​screen.​ ​Will ​they​ ​use​ ​it​ ​on​ ​a​ ​crowded​ train?​ Then ​touch​​ing a screen​ would ​feel ​far​ ​less awkward​ ​than​ ​talking​ ​to​ ​a​ ​voice​ ​assistant​.​ ​Will ​they​ ​need​ ​a​ ​simple​ ​answer to​ ​a​ ​simple​ ​question?​ ​Use​ a ​conversational​ ​interface.​ Will​ ​they​ ​have​ ​to​ ​see​ ​images​ ​or understand​ ​complex​ ​data?​ ​Put​ ​it​ ​on​ ​a​ ​screen”

So rather than just focusing on voice input, it might make sense to think about how to structure our data to be agnostically accessible. Agnostic interaction channels don’t privilege one way of perceiving or interacting with the world.  Now that more of the population is computer-literate, we might be able to relax skeuomorphic baggage. Skeuomorphic design’s visual language helped communicate but also constrained the behaviours and interactions we could design, because they had to be intelligible as physical metaphor. Old metaphors or expectations, like “saving” files by clicking on a floppy disk icon, could be seen as blockers to thinking more broadly about interaction.

Perhaps the next paradigm of interaction design is to transcend interaction – to read and service our intent directly. This feels a way off, but here’s an early proof of concept

If we remove friction and translation from our interactions, what are we left with? Our own unmediated desires. Friction in transmitting intent can be a good thing – a chance to reflect and exercise deliberate control, rather than being driven just by desires. The task of cultivating deliberate intention, and making conscious decisions, rather than acting on impulse, is a design problem and a spiritual one.

 

Public Service Design – Cross Government Design Meetup 22

Today I attended a Cross Government Design Meetup at the Design Museum in London. Here are some of the highlights I took away.

Introduction – Louise Downe

“Bad service design is one of the biggest costs to government”

In the future, “Services will shape government, not the other way round.” “Transformation will never be done” so focus on helping change to happen sustainably.

Dan Hill, Associate Director, Arup – Design and the public

The contrasting experience of two social housing projects shows the need for service design:

Wohnpark Alt-Erlaa, Viennna; image by Thomas Ledl – Own work, CC BY-SA 3.0, Link
Alterlaa Kunstwerk.jpg
By Thomas Ledl – Own work, CC BY-SA 3.0, Link

 

The Robin Hood Estate; image by stevecadman – Flickrtik hartua, CC BY-SA 2.0, Link

 

Hill argues that the key difference between the success of the former, and the demolition of the latter is the ongoing maintenance, service and engagement.

Design needs a service blueprint. You aren’t just designing a one-off object – you’re building for life and for ongoing use. You need to design a service.
This is what was missing in the Robin Hood Estate.

There’s been a steep decline in the percentage of architects employed in the public sector. In 1970, 50% of architects were employed in the public sector; today only 0.7% of architects are.

Hill presents this as an opportunity. Digital has an opportunity to build design intelligence back into government. And we can build in this view of service design, making things better than before.

Prepare for the future by preparing to transition smoothly

It’s hard to know what the future will be like. So “The best focus for people is to make the transitions as effective and painless as possible as opposed to worrying about what the end point is.” – Michael Spence

The public sector needs to set out a vision for the future, otherwise the private sector will do it, leeching value out of a city and sending it to California.

Jean-Louis Missika, deputy mayor of Paris:
“We should announce, before 2020, that in Paris, no private owned AV will be allowed it will be only mobility as as service; not mobility as ownership”

Research in Zurich, Singapore and New York suggests that 80% of car use could be replaced by shared autonomous shuttle fleets.

DVLA – John Hewson

90% of DVLA interactions are now digital, up from about 9% in 2007. But that’s still 23 million paper applications per year, 5 million pieces of casework.

DVLA have made big changes to the user experience, but they haven’t yet made improvements to their internal systems.
Redesigning internal systems is another challenge, requiring slightly different expertise to building user-facing websites. These users often value efficiency over user-friendliness. One key piece of software is from 1990 and doesn’t even support a mouse, so this is a quite a challenge.

But the core discipline of prototyping, using best practices from the Service Manual, and testing iteratively will always work.

Panel discussion

https://twitter.com/Martin_Jordan/status/909797152427270144

The discussion reinforced the importance of applying service design to business models and procurement process – not just external user journeys. Take a service design approach to problem solving right through organisations.

Similarly, design for failure. Don’t just design for the perfect digital frontend – plan the whole service, and for all aspects of that service.

Design for the gaps between different nodes in someone’s experiences – e.g. a journey through healthcare. Each node can have its own effective risk register, but things can get lost in the cracks because there’s not always a holistic view.

How might we broaden political discourse and understanding in people age 25-35 in the UK? – Design project from the Design Kit course

This is a writeup of the design project I carried out with Tamsyn Hyatt as part of Ideo and +Acumen’s Design Kit: The Course for Human-Centered Design. Check out the prototype we produced.

Inspiration

Interviews

  • We spoke to people with a range of political views, and carried out participant observation of their news-consumption activity.
  • We learnt from experts: Framing and messaging from a third sector expert; Rules of social media and political discourse from a digital communications director.
  • Key quotes

    “I don’t need stirring up. I want information and to make rational decisions. It doesn’t need to be heated.”

    “It sometimes worries me that I only read news from a source that shares my views. Yet clearly there’s a whole other perspective, because the majority of people voted for Brexit. I don’t understand that, and I never will if I only ever consume news written by people like me. It would be helpful to see other perspectives, even if I don’t agree with them.”

    “If I can understand what their argument is, I’m better placed to counter it. But that would need to be from a reliable source, even if I don’t agree with it.”

    “Reading contrasting opinion pieces is helpful in forming ideas, and in developing new ways of thinking.”

Ideation

Key themes

  • Desire for reasoned argument from both sides
  • Time and efficiency
  • Payment and paywalls
Insight Design Question
People are willing to consider alternative viewpoints but have limited time to do so. They’re struggling with business as usual, let alone anything new. How might we deliver diverse views that are quick to consume, but not sensational or click bait?
Users are concerned that they don’t know what a credible mainstream ‘opposing’ source looks like. How might we find the best content to represent diverse views?
People may not accept views wildly different to their own as untenable, and so not engage with them. How might we find content which will be acceptable/viable to people of different viewpoints?
People generally have a notion of reliability that transcends the political spectrum. i.e. they concede that publications that they may not agree with ideologically are capable of reporting something useful, despite ideological differences. How might we stretch and push people enough to challenge them but not repel them?
Most people didn’t pay for news. How might we make a product that is either zero direct cost to the consumer, or which is seen as sufficiently valuable to warrant purchase?

Ideas from Brainstorming

  1. A twitter account – or accounts – sharing ideologically diverse content. Users can subscribe to high-quality content outside of their ideological viewpoint.
  2. A news site where diverse content is submitted by users, grouped by theme and ranked for quality. This means that the most high-quality articles to represent a given ideological position on a given topic bubble to the top.

Storyboard overview

The person
Name: Brian Simmonds
Age: 29
Profession: Administrator for a small healthcare company

Step What is happening? What is the most important question to answer? How might we answer it?
Reads the day’s news following his normal routine Brian rushes to work. He squeezes on to the train and checks his regular news sites on his phone. [already explored in Inspiration stage] [already explored in Inspiration stage]
Becomes aware of the tool He receives a message from his friend suggesting that he check out a new news tool What channel of communication is likely to encourage someone to look at a new news source? Who would the message need to come from? Test with real content in people’s facebook feeds, versus whatsapp recommendations and personalised emails
Looks at the day’s news on the new tool Brian reviews the content on the news site and is prompted to read content from different ideological viewpoints to his own. They are high quality, so he finds them challenging but interesting and informative. Will people actually choose to read an article that they disagrees with ideologically? Build a basic wireframe prototype and carry out participant observation user testing
Rates an article that he read Brian gives a thumbs up or a thumbs down to each article he read, helping other users see which ones are best, from each ideological point of view. Do perceptions of quality actually cross ideological boundaries as our research suggested they could? Will people positively rate an article that they ideologically disagree with? Build a basic wireframe prototype and carry out participant observation user testing
Shares an article that he enjoyed in his own reading Brian notices that one good article he has read today isn’t listed. So he submits this article to the site Will he take the time to share content if? (Particularly as there isn’t currently any social reward to him for doing so) Trial submit form on test service. This could be achieved using a Google Doc. This would then be manually added to the site, if the article passed a basic quality check
Shares the tool with others Brian finds the tool useful so he shares it with others in his network. Will the service be able to spread to others without paid advertising? Test on a functional prototype, and invite users to share. Build in basic social sharing features to prompt and facilitate this. E.g. facebook and twitter.

Prototyping

What did you prototype? What question(s) were you trying to answer?

We ​tested a clickable digital prototype​ made using the Balsamiq mockup tool.

The most important question to research was:

  • “Will people actually choose to read an article of an ideological perspective that they disagree with?”

The most important secondary questions were:

  • Will people understand our way of representing ideologically diverse content? What interface design approaches might be best?
  • Do perceptions of quality actually cross ideological boundaries as our research suggested they could? In practical terms, will people positively rate an article that they ideologically disagree with?

What did you learn from testing your prototype?

  • People looked at ideologically diverse content But this may have been ‘under duress’ as they knew they were being observed. To have confidence in this result, we would need to test in a more anonymous fashion, and in a more real-life context.
  • Users were unclear what the ‘thumbs up’ and ‘thumbs down’ meant. Does a thumbs up signify endorsement, or liking, or was it a dispassionate quality measure saying that an article makes valid points and makes you think, even you don’t actually agree with it?
  • Some users found the left-right split a bit binary. Could this be improved, to better show nuances of different positions? Is it actually useful to divide content up into different ideological sections of the page?

What might you consider for future iterations?

  • Change the ‘thumbs up’ and ‘thumbs down’ to something more emotionally neutral. It will need to signify that this piece is well-constructed and reasoned, but must not imply liking.
  • Explore whether community submissions are the best model for discovering new content.
  • Explore pulling in content automatically from high-quality sources with different editorial perspectives.
  • Explore visual and layout approaches to presenting diverse content relating to a given topic that will scale well to mobile devices. (The approach tested was desktop only, as it required more horizontal space than is available in a smartphone or tablet)
  • Explore how to categorize content beyond a left-right binary. Consider in relation to the above point about visual design and layout.
  • Allow people to add tweets, and embed these directly on the page.

Doing the hard work to make it simple – Tom Loosemore

Below is a video and summary of a talk by Tom Loosemore at the Camp Digital conference, 2016.

Design is inherently political, and we must not ignore this

Ask yourself: who is the “we” that gets to build the future?

If you don’t understand how something works, you are a consumer, not a citizen. Don’t be fooled by ‘magic’.

Richard Pope – “Software is politics, now” – it shapes power dynamics.

GDS came up with the design principles so that people would have a new language to use to change reality.

The advantages of working in the open

Child benefit tax calculator. They made a mistake, so someone suggested a fix on github which has now been incorporated.

Ministry of Justice – problems with a form used by divorcing couples. Proprietary software. Took months to fix.
The change on github took 3 days. Massive difference.

What is digital, and what is our job in a digital world?

Definition of digital: “Applying the culture, practices, processes & technologies of the Internet-era to respond to people’s raised expectations.”

It’s not about technology – it’s about taking advantage of technology to redesign services and organisations to meet changed expectations.

Focus on delivery

Martha Lane Fox’s 4-page report gave just enough cover to start delivering. No need for a big strategy.

“The strategy is delivery” – key phrase at GDS.

Internal metric: write 100x more lines of code than lines of business cases justifying code.

Guy Moorhouse designed icons for GDS. But then he tested and found out that they didn’t help people, so he removed them and blogged about why.

Building the political case for change

GDS alpha was done openly. This was to create buzz outside the system to convince ministers that it was a good idea. This helped overcome reluctance from senior civil servants.

Do something valuable -> build political capital through an early win -> get rid of the ‘no’ people (spending all of the political capital)

Old approaches to service delivery are flawed

When Tom Loosemore started at the DWP in 2013, he asked ‘so, what have you been doing with all this time and money?’ For 3 years of work, they showed a 600 page policy design manual.

The DWP senior leadership thought of Universal Credit as a policy. But they hadn’t designed anything – they’d written a document. It had thousands of untested assumptions about people’s behavior.
“a document full of false certainty”

When Tom arrived, the DWP processes were as follows (with each step done by a different team):

  1. Invent policy
  2. Guess requirements
  3. Procure IT system
  4. Inflict on users
  5. Operate (aka ‘stasis’)

This is the wrong way to deliver services.

You must observe real user behaviour

People don’t know what they need. You have to observe real people in the real world
“observer their actual behavior. Surveys are useless. Actually focus groups are useless.”

“Watch what they do, don’t listen to what they say”

“False certainty if our mortal foe”

“Start humble, stay humble”

Start small, build a shared vision and empower the team

Start really small. Iterate based on how people actually use the service.

Craft a vision that everyone can use to steer every decision. Use simple language.

Empower people to make decisions based on this vision without having to run it up the hierarchy.
And because you have governance check-ins every 2 weeks through a show-and-tell (demo), things won’t go out of control.

Build an empowered multi-disciplinary team

The multidisciplinary team worked together in a room.

To enter the room, you had to be fully empowered by your bit of DWP or HMRC or LA to make decisions in the room. No one senior. It was surprising how easy it was for the organisation to identify who needed to be in the room.

Video of user testing convinced IDS to make a change to the benefits policy immediately.

Start multi-disciplinary; stay multidisciplinary.
Don’t just remove these people once you’ve ‘launched’

Obtain a mix of mindsets: Pioneers, Settlers, Town Planners.

“User research is a team sport”

Continually assess your knowledge and your readiness

Each sprint, they asked themselves: What have we proved? Do we understand user needs better? Have we designed the service to scale massively? Do we know how to operate?

“If you can’t release software every day in an emergency you’ll never be secure, because a new threat will emerge and if you can’t respond like that *clicks fingers*, your organisation is inherently insecure”

Governance

“Governance was very simple: Ministers come to the show and tell, we’ll show you what we’ve made, we’ll show you what we’ve learnt, and what we’re going to do next, and we’ll talk about risks and issues if you want. But the real governance is seeing the thing being made and seeing the evidence and user research that it’s likely to have the intent that the minister wanted. Every week. And give credit to ministers, they turned up.”

“If your senior management doesn’t show up to show and tells, look them in the eye and tell them that they are failing at governance. Use that word.”

“Show the thing” – a thing you can use, not a thing you can see.
If you’re sending screengrabs, you aren’t showing the thing, you’re showing pictures of the thing.

Behavioural psychology approaches to service design – Alisan Atvur

Below is a video and summary of a talk by Alisan Atvur at the Camp Digital conference.

Psychology knows that behaviour is seldom rational. So we need to study behaviour.

Create a common design language with “nonviolent communication”

Marshall Rosenberg argued that there were 3 categories of non-violent communication:

  1. 88 human needs
  2. 91 positive feelings we wish to experience
  3. 153 negative feelings we want to avoid

To be non-judgmental, clear and constructive in our use of language, use a “Rosenberg deck” of feelings cards as a conversation prompt.

Map behaviours with “rational emotive behaviourism”.

Albert Ellis, the founder of CBT, argued that Activators trigger Behaviours, which lead to Consequences.

Map out a user journey. Use an Ellis Matrix. Identify the causes of user behaviours. Propose what new Consequences could be, and what new activators and behaviours could be.

Map motivations with “guiding self ideals”

A lot of we do is a result of feelings of inferiority. (See the work of Alfred Adler.)
We seek a “fictional final goal” – if I do [BLANK] I’ll be finished and happy.

So ask ourselves: what would happen to us as an organisation if we never tried to solve this problem?
What would happen to the user if we never tried to solve this problem?

Then ask: What is an aspirational place for us to be? What if we did do this?
Can you clearly indicate what the result would be? – for us and for users

You need to map this out to get an overview of a potential new area of work.

Good leaders and designers empower the team

Lao Tzu quote on leadership, from Tao Te Ching:
“A leader is best when people barely know he exists, not so good when people obey and acclaim him and worse when they despise him. But of a good leader, when his work is done, his aim is fulfilled, they will all say we did it ourselves.”

Cultivating Shared Understanding from Collaborative User Research – summary

I’ve pulled out some of the key points in a discussion about user research, between Jared Spool and Erika Hall on the UI20 podcast. A transcript is available on that page.

What makes for good user research?

Years ago, the approach to reporting on user testing was different. Jared Spool: “You’d come back and you’d assemble the notes into a giant report. You would write the report in passive voice, and then distribute it. Of course, the thicker you made the report, the more of a thump up it made when you dropped it on the table, which was, of course, the most impressive way to do reporting, and then nobody read it. Then you wondered why it was there.”

Of course, the purpose of user research is to inform high-quality decisions. So research must be read and acted upon. This is why user researchers now produce short, easy-to-digest reports.

Erika Hall: “The value in research is not the answer… It’s creating that culture where you’re constantly asking the same question, and you’re in a position to keep asking the question, finding what today’s answer is, and finding a way to respond to that in your work.”

What is the aim and output of research in a team?

The documentation becomes secondary. Erika Hall: “The goal is not to produce a report. The goal is to create this shared understanding so that everybody in the team knows here’s what our goal is, and we’re very clear about our goal. Here’s what our constraints and requirements are. To really think about the assumptions together and develop the shared vocabulary about here’s what we’re betting on, and here’s our evidence that those are good bets.”

Selling research

Erika Hall: ‘[One thing that] sociologists are studying right now is the fact that data doesn’t change minds… People’s minds are very good at shutting out data that they don’t want to hear…That’s a sales moment for research, when you bring a stakeholder in and you’re like, “Watch this, and see the power, and feel the change in your own mind when you see all of your assumptions blown away.” Those are really, really powerful moments.’

Erika Hall: “Research is challenging given ideas, so it’s naturally anti-authoritarian. If you’re in an authoritarian business culture, you have to work very carefully to change that.”

Asking people what they want leads to unhelpful speculation

Erika Hall: “one of the criticisms of research is that you’re asking people what they want. People will speculate, and this is something you have to be really careful of when you do research about people and their actual behaviors and habits. If you ask the question the wrong way, what you’ll hear is what people are speculating about, which might have no connection to how they actually behave.”

If you talk to people about, “Would you use this feature? What do you like? What do you want?” they’ll imagine these scenarios that may have very little relationship to what they actually do, and what they actually need, and the choices that they make if they’re using something in a real-world scenario.

When building digital products, you should test them early to make sure that what you’re building will work

Jared Spool: ‘if we developed bridges the way we develop online products, the way people seem to want to do it, we would build the bridge and then we would send a car across it. We would watch the car inevitably plummet into the depths below, and then we’d go, “Huh. Maybe there’s something wrong with the bridge.’

Erika Hall: ‘you need to know what your overall goal is, that the research is supposed to be helping you with. you say, “OK, what are our major assumptions that we’re betting on, that carry a lot of risk?”…Then you say, “OK, what questions do we need to ask? What are we trying to find out before we get down to work, or as we continuously work, to help us validate our assumptions?”‘

When you work with data, be wary of projecting assumptions and biases onto the data

Jared Spool:
In a study, a panel was interviewing for the position of police chief. There were two flavours of resume: academic-oriented, and street-oriented.
The male name was attached the to academic resume, the female one the street experience resume.
They picked the male candidate. They said “This position requires a real academic approach, so that’s why we chose the male candidate over the female. It wasn’t because they were male. It was because it was academic.”
But then the names were switched, so that the female name was on the academic resume, and the male name on the street resume.
Then the evaluators would say “This job requires someone with real-street smarts, so we chose…but we’re not biased.”‘

But it’s possible to take measures against bias: “they found that if they had the folks rate up front which is more important, street-smarts or academics, and they were to write that down before they looked at the resumes, then they were more likely to choose the person based on the actual criteria they had decided, not based on gender bias.”

How to change the world – Mike Monteiro

Below is a video and summary of a recent talk by Mike Monteiro. A transcript is available. N.B. NSFW language.

The world is bad because we made it this way. “The world is designed to work this way.”

When people talk about changing the world, ask: “How? For who?”
For all the excitement about Uber and AirBnB, the service economy is nothing new. “There’s nothing disruptive about rich people getting richer.”

How to change the world

  1. Get ignorant.
  2. Realise that the world as designed works in our favour. What if that wasn’t the case?
    The Veil of Ignorance is “The single most important political and ethical concept in a designer’s toolbox.”

  3. Look like the world.
  4. “Our diversity is our strength, and we’re idiots for not leveraging it.”
    If people have narrow life experience, you just get “white boys solving problems for white boys”.
    “They’ve never been harrassed, so it doesn’t even occur to them that that’s a problem you have to solve for.”
    Similarly with cabs refusing to stop, or being assaulted,

    “Empathy is not enough – we need inclusion.”
    The point isn’t that any particular experience or classification makes you a better designer. People are just better informed about themselves than they are about others.
    Our teams need to reflect the diversity of who we design for. It’s not just about race or gender, but experiences, needs, thinking, solutions.

  5. Design the right thing
  6. The AK47 is easy to use, easy to manufacture. But design is about more than this.
    “Nothing who’s primary purpose is to kill can be said to be designed well.”
    “Attempting to separate an object from its function, in order to appreciate it for purely aesthetic reasons, or to be impressed by its minimal elegance is a coward’s way of justifying the death they have brought into the world and the money with which they’re lining their pockets.”

    “Design is a trade done for money, but we have a choice about how we make that money.”
    “Your role as a designer is to leave the world in a better state than you found it.”
    “You are responsible for what you make.”

There are big design problems for us to solve

  • Global warming
  • The migrant crisis
  • Guns in the US

We’re lucky people – so we’re responsible for helping others who weren’t as lucky.
Change how we design and who designs.
Use your time on this world in the interest of making others free.

Testing two WordPress Gutenberg prototypes

I carried out three user testing sessions of two prototypes of the new editor for WordPress. Users were confident in their digital skills. Here are the results.

Key observations

  • The overall design approach is successful. The idea of thinking of content in blocks was easy to grasp, and the context-sensitive popup options were intelligible.
  • The function of the up and down arrows to the left of content blocks wasn’t immediately clear.
  • Users quickly worked out what the block-positioning arrows did, and were happy with this approach. To my surprise, no one tried to drag and drop blocks after finding out how to reposition blocks.
  • In 1.0 people weren’t sure what the S means – is it strikethrough or the option to remove a link? Perhaps we can use proximity to make this clearer – associating this options clearly with presentation controls (underline, italics) or functionality controls (hyperlinks).
  • Some users tried to drag and drop images. How will dragging and dropping work – within and between blocks?

Full notes of the testing sessions

First prototype

Tester 1

Prototype: “A beautiful thing about Apple…”

prototype of a new editor for wordpress

Clicks into a block and sees and instantly understands the alignment options.

Clicks on the ¶ symbol but it doesn’t do anything.
Expected it to be interactive as the mouse changed to a hand pointer, suggesting interactivity.

Clicks on the up arrow, but nothing happens. Wasn’t really sure what it would do.

Enters a line return to break up the paragraph of text, but isn’t able to do this.
Thought that the arrows up and down might allow the insertion of a line break.

Highlights text to make it bold and expects to have to use a keyboard shortcut as nothing was previously visible on the screen. But then notices the popup.
Comfortable with the options presented.

Heading and blockquote options don’t behave as expected. (Dismissed as a limitation of the prototype)

Clicks on the image. The up and down buttons don’t do anything.
Tries to click on the image icon but it doesn’t do anything.
“I don’t understand what the symbols are. I expected them to be interactive but they don’t do anything.”

Tester 2

Understands the split between code and visual editors.

Likes the context-specific editing as it keeps the screen more focused.

Tester 3

Understands the concept of HTML and editable preview.

Wonders how valuable constant HTML visibility is to the average content editor. Will they break things?

Second prototype

“1.0 Is The Loneliest Number”

An early prototype of the new wordpress gutenberg editor

Tester 1

Clicks on the heading text block.
Then clicks on the up arrow.
Then clicks down on it. “Ah, that’s interesting. So these up arrows change the order of the boxes”

User expected to be able to insert line breaks. (How do we want to handle line breaks within paragraph blocks? Do we permit them, meaning that we have big text blocks, or do we take line breaks as denoting the start of a new paragraph block? I’d prefer the latter but haven’t thought about all use cases.)

Clicks on the paragraph of text, and then clicks on the ¶ symbol.
Changes to blockquote style from paragraph style.
Understands that this allows him to apply style to the block.

Scrolls down the page and clicks on the plus sign at the bottom.

When asked what this is, says that it’s “a shortcut to functions that you use regularly.”
When asked: what would you expect to happen if you clicked on one of these items?
“It would create a new paragraph, image, heading, quote, etc, which you’d then populate with content.”

Tester 2

Clicks into the block and manipulates alignment options – working as expected.

Clicks down arrow and block responds as expected. Understands that the page is made up of blocks and that these can be repositioned.

Clicks on “+” and explains that this will add a new block. More options than expected: expected just image or text, so the extra options are “a nice surprise”.

Drags and drops an image into the content block. (Is this something we want to design for?)

Clicks on ¶ – and changes the text block type

Tester 3

Clicks into the text block.
“I wonder what the arrow does” Clicks on the down arrow and sees the block move down. Understands it fine.

Looks at alignment options. “Does that do the whole block? It does”

In general, understands the popup text formatting and link options.
Not sure what the popup “S” with strikethrough icon means.

Clicks on image and manipulates text flow options.

Clicks image icon, but “nothing here”. Expects caption controls.

Clicks on the “+” sign, and understands that this is for adding blocks. Wonders how lists will interact with paragraph blocks, and how we could set levels of header.

Easily understood the blocks concept. Wondered how well this would handle more complex page layouts.

What I learnt by building a side project

A few years ago I completed Harvard’s CS50x – an online computer science course. My favourite part of the course was the self-directed final project. I’m interested in the question of how we can filter the mass of digital information that we’re confronted with every day, so that we can enjoy the best bits without spending all of our time scanning and processing. In my own life, I’d found that I had less time to keep an eye on Twitter. I really wanted a tool to keep an eye on Twitter activity while I was at work. So I explored this in my final project. I built a tool to monitor Twitter activity for a given list.

What I built was pretty basic – it was running on an old laptop in the corner of my flat, and it just displayed the results on the laptop screen after a specified number of hours had elapsed. A solid final project, but it only ever felt like a proof of concept. I wanted to build this into something I could use, and something that other people could use too.

So over the next few years I built it from the ground up as a full-blown web application that has now been launched as a real business: MySocialSummary.com.

The CS50 class was great, but once you have the foundations of understanding in place, there’s no substitute for the motivation, exploration, imagination and excitement of working on your own idea. Subject to having a reasonable grounding (and I’ve taken a number of computer science classes, not just CS50), I’d definitely recommend taking on a project that excites you, to take your knowledge to the next level.

Going through this process I’ve learnt a lot. I’ve divided this into two lists: one on specific computer science and business insights, the other on more overarching observations.

Specific computer science and business lessons

  • How to embed tweets in emails. (Or, rather, why you can’t embed tweets in emails.)
  • Working with APIs. An API is a tool for communicating between two pieces of software. Manipulation of data from the Twitter API is the foundation of My Social Summary.
  • How to load test your website. If you’ve built a website, you probably want people to visit. You commission your infrastructure with a certain number of visitors in mind. It’s worth testing how your site would behave if an unexpectedly large number of visitors arrive at once. This is called Load Testing. I used a tool called Load Impact to check out the load speed of My Social Summary when you add more users. As you can see, the homepage performs well with 50 visitors loading it at the same time.
    load test of mysocialsummary.com with 50 users
  • Working with code libraries. When you’re programming, you’ll often want to do something that other people have done before. For example, loading a web page, sending an email, or accessing the Twitter API. If you’re trying to solve a common problem, often there’ll be a code library of pre-written code that will help you with this. By using a code library, rather than producing this code from scratch, you can save a lot of effort, and the quality of the code is probably much higher quality than what you’d produce yourself. This frees you up to focus on the problems that no-one else has worked on yet. Not all code libraries are created equal – some are better documented and more fully-featured than others – so picking the right one is an important decision.
  • How to set up login via Twitter. A good example of when a code library can be useful. I’d have definitely struggled to build this authentication myself if I’d had to do so from scratch. Check out this documentation.
  • A diagram of part of the Twitter authentication process

  • How to securely handle user input. If you take any form of user input on your website that ends up interacting with the web server, it’s a security risk. So you need to build your site from the ground up with security in mind. I really enjoyed learning about how you can protect yourself using paramaterised database queries and other security best practices.
  • How to set up a LAMP server. That’s a common infrastructure stack, using Linux, Apache, MySQL and PHP to run a website. I’ve learnt how to manipulate the different parts of the machine (e.g. updating Apache settings) and use the different management tools.
  • The complexities of daylight saving time. When the clocks changed, I noticed that my daily summary emails were arriving an hour early. Fixing this problem for myself was trivial, but solving it for all different users – and possible future users – was harder. I’ve built functionality that checks every evening against the very latest timezone rules, and supports every timezone. (Check out the exhaustive dropdown list on the page where you can sign up for a free trial account)
  • The benefits of refactoring code. If code is a set of instructions, refactoring is rewriting those instructions to be more efficient. Refactoring your code isn’t fun – it’s hard work, and involves trawling through your past self’s logic and trying to improve upon it. But it can make massive performance improvements. In one case I was able to decrease the number of database interactions by a factor of a thousand through batch operations.
  • Are you too busy to improve your process?

  • The importance of good version control and deployment infrastructure. Any halfway competent programmer will tell you that good version control is really important. At the start of this project I was evidently not a halfway competent programmer. If you operate version control you can review the history of your code over time, and quickly track down errors. Your deployment infrastructure is the process from getting your code from a code file on your computer to your web server so that it can start doing real work. Ideally you want this to be as frictionless as possible. In the early days, I had no version control, and my deployment procedure was copying and pasting the contents of one text file into another. I can confirm that this was not a good process.
  • How to work with a front-end framework. Specifically Twitter Bootstrap. My interest in this project has been more in concepts and engineering than in presentation. But any website needs to have a front-end of HTML and CSS. Rather than building all of this from scratch, I used the Bootstrap library to help set up the structure and presentation of the site. This made it quite easy to make the site mobile responsive.
  • How to integrate with a payment provider. Taking money from people online has a few complexities. The main one is passing data from your payment provider to your web server, so that you know who’s paid what. This entailed using Paddle’s Webhooks. Handling all the different types of event that might happen – and doing so securely – was quite a bit of work, but it was very satisfying to get this set up and working correctly, and see money come in to my account.
  • How to use cron jobs. On a Linux machine, you can instruct the computer to automatically carry out tasks at certain times. These are called ‘cron jobs’, and they can be really powerful. I make extensive use of these for My Social Summary, for the management of user accounts, and the sending out of communications to new users.
  • How to satisfy the Twitter brand guidelines – and how to update things when they change…. Before coming up with a name, I carefully checked Twitter’s brand guidelines to make sure that the name was consistent. I felt pretty smug about having thought to do this. However, Twitter changed the goalposts, and later the name I’d chosen was no longer acceptable. So I had to come up with a new name for the service – and then roll out this change to all aspects of the service.
  • How to set up HTTPS security. Privacy and security are important, so I wanted to make sure that the site I was building used HTTPS encryption. Setting this up was quite easy – much of the process was done by my web hosting provider who installed the certificate. Seeing the little padlock next to the domain name for the first time was very satisfying.
  • How to set up email authentication via DKIM. I had no idea what this was. But one day I saw a little question mark when I opened up one of my summary emails, next to the sender name. Gmail said that it wasn’t sure if the sender of the email was actually who they claimed to be. Google had instructions on what to do next if you were the person sending this email, and I didn’t even need to follow all of these – pretty much all I had to do was change a setting with my hosting provider and this was resolved.
  • Example of an image without DKIM

  • How to migrate hosting provider. Part-way in to the project, it became clear that I’d outgrown the infrastructure I’d started on and needed a more robust web server. The process of transitioning from one provider to another is something I’ve overseen before in my day job, but to do all the work myself was useful. Before I started the process, I had to choose a provider with the right infrastructure and an SLA to match my needs. (I chose TSOHost and I’m happy with them.) Then I had to commission a new database within slightly different constraints, migrate the data over, and switch the traffic over to the new site. None of this was massively difficult, but the work took about a day nonetheless.
  • How to register a business in the UK.
  • How to track business finances. Fortunately the costs of a digital business are easy to track, so a simple Google spreadsheet suffices.
  • How to complete the year-end tax process. I haven’t had to do this yet – this is likely to be the real learning curve.
  • How to comply with the EU’s new rules on VAT for digital services. The EU changed its laws for how VAT is charged on digital services. Rather than being charged at the rate of the country of the person selling the service, VAT has to be charged at the rate in the country of the person buying the product. You have to collect evidence to prove this, and you can either make VAT payments to each EU country separately, according to its own processes, or you can submit centralised returns through the UK VAT MOSS service. Both of these processes seemed tedious and onerous, so I opted instead to use a payment provider that would handle VAT on my behalf. This meant switching from Stripe or PayPal (I’d been testing out both) to Paddle. Here’s a blog post on Paddle’s site discussing the changes.
  • How to set up a Content Delivery Network. Your website lives on a web server – a computer probably sitting in a datacentre somewhere. If someone the other side of the world wants to see one of your web pages, the information has to travel all the way to your web server and back. It would be quicker if they were requesting the web page from somewhere closer to home. A CDN is a network of web servers around the world that does this task. A CDN can also help take some of the load off your web server – if people are getting pages from the CDN rather than your web server, the web server doesn’t have to work as hard. I use the Cloudflare CDN. It has a free tier and is easy to set up. It disrupted the site’s HTTPS setup for a few hours while I turned it on, but other than setting up the CDN was easy. Cloudflare CDN usage graph example

Broader lessons

  • Starting with a Minimum Viable Product is the right way to build a digital product. I started off by building the simplest possible tool to meet my needs, and then I successively improved it from there until I had a product that was ready to launch. Had I tried to build everything in one go, I wouldn’t have known how to do it, or what I was trying to build. And I wouldn’t have had the motivation and insights provided by being able to use the tool myself from early on in the process. It would not have even been clear if what I was building was going to useful to anyone until after it had been launched. The Lean Startup methodology, and the Agile Manifesto, tell us that you should start off by building a Minimum Viable Product – the most basic version of your product that is still valuable. I already had an intellectual appreciation of this, but it’s always useful to test theories out in practice.
  • How to build a minimum viable product diagram

  • The power of self-directed learning. This project has been entirely self-directed. This has been thrilling – a chance to follow my interests and try and constantly reassess what I need to do – or learn – next. You learn a lot more, and a lot more broadly, if you’re learning to achieve a personal goal.
  • The power of emergent possibilities and understanding. When I started this project, I didn’t know everything upfront. I didn’t even know what I would need to know. The Agile approach to projects – release early, and iterate based on evidence of real user behavior – is thoroughly vindicated by this. Working on this project has strengthened my understanding of, and commitment to, the Agile and Lean principles of releasing early and improving your product from there.
  • The importance of knowing how you work – and what you need to work. Working on a side project is different to working your day job. I’ve become more sensitive to when I’m in the right headspace to do some work on My Social Summary, and when I just need to take it easy. I also have a better understanding about the conditions I need to get work done outside of my normal job. I tend to work quite well in uninterrupted stretches of at least an hour and a half – especially if I’m programming.
  • The importance of dealing with changing circumstances. The external environment changes. During this project, VAT legislation changed and Twitter’s naming rules changed. You need an approach to building a product that is not only resilient to this, but embraces it. Again, if I hadn’t been following an Agile approach, I’d have been in trouble.
  • To trust in your ability to keep learning and know more than you know now. Taking on a self-directed project builds self-confidence and self-reliance.

I’d love for you to check out what I’ve been working on. My Social Summary has a free one month trial, with no card details needed, so see if it can help you get more from Twitter.

What’s next for me?

  • Spread the word about My Social Summary.
  • Explore how we might overcome the ‘filter bubble’ that seems to be narrowing our political and cultural discourse. This feels like an important design challenge.
  • From a computer science perspective, I’d like to build something in a different, and more modern, technology stack. Probably Node.js / Foundation (for front-end) / PostgreSQL / Heroku.

Could you be a Digital Superhero? Julie Dodd (Camp Digital 2016)

Here’s a summary of Julie Dodd’s talk at this year’s Camp Digital conference.

Julie argues that digital superheroes…:

  1. Make products that really help people

    e.g. the Ugly Mugs app, built for sex workers to make sex work safer, or Tony Canning’s use of 3D printing to reduce the cost of prosthetic limbs from £20,000 to £40 – and reducing production time from months to hours – and making the technology available open source so that others can use it.

  2. Use any tool or platform that they can get their hands on

    BBC used Whatsapp at the height of Ebola in Sierra Leone in 2014 to provide information. Largely simple infographics. Reached 20,000 people in the first 3 months who were otherwise very hard to reach. The BBC used existing technology as it was cheaper, quicker and more effective.

    Crowdfunding sites – e.g. Kickstarter and IndieGogo – reduce the need for people to go through a middleman. Charities need to think what this means for them.
    Girl Scouts in America used IndieGogo to raise funds after rejecting a $100,000 transphobic donation. The troop of Girl Scouts that turned down the donation started a crowdfunding campaign that raised 4 times as much money – and sent out a powerful message about inclusion. They also changed the policy of how the national organisation takes donations.

  3. Aren’t frightened to try new ways to do things

    For example bringing in service design thinking or agile methogologies.

    St Mary’s Hospital in Paddington has created the ‘Helix centre’ innovation lab. It’s focused on lean, iterative solutions and combines online and offline. Projects include increasing rates of bowel cancer screening, offering guidance for clinicians on how to communicate about end of life care, asthma management tools for kids, dealing with storage of IV fluids.

    The Town of Jun use twitter for civic discourse and interactions – e.g. booking an appointment with the doctor or making a complaint. Everyone was trained. Saw a rise in public workers being thanked.

  4. Can be found anywhere – not just in tech.

    Google studied a favela in Rio, and didn’t expect to find much technology. Rather, they found a flourishing ecosystem, with radio stations, cyber cafes. With the proliferation of smartphones, people often ‘leapfrog’ the desktop ‘stage’ of development.

  5. Can have significant impact on organisations.

    The British Library now conceives of itself as a data institution, rather than a custodian of physical objects.
    The #tweetmythesis movement encourages academics to share their thesis in a tweet.

  6. Can have an impact in major commercial brands too.

    Barclays set up Digital Eagles programme, driven by the profit motive of reducing cost by moving more people to online banking. (And thereby reducing interaction costs, e.g. staff and branch costs). So it has trained 20,000 staff to train people across the community.

  7. Should work for organisations interested in changing.

    When researching “The New Reality” Julie found some organisations just weren’t interested in digital transformation. She thinks many won’t survive a decade, and wants to spend her energy not fighting those ones to change, but working for the ones that do want to change.

A few miscellaneous recommendations:

  • Recommended meetups: Citizen Beta and Tech for Good
  • “Apps without marketing are pointless”
  • If you do pro bono work with a charity, make clear the equivalent financial value. Otherwise they won’t value it because it’s free.
  • “Asking people to experiment is easier than asking them to commit”