Iterative UX: Find It Cambridge Case Study

big red button has been pressed welcome

thank you everyone for coming I would

like to know how to RSVP for the seat in

front that says RSVP I'll take that seat

my name is Ben Nelson I am a web

developer at agar co worker owned

cooperative that's been doing its thing

since 2006 making websites we haven't

changed that and I'm gonna present a

case study on a project we worked on and

are still working on called find it

cambridge with the idea of looking at

how to work here to ux so regular

improvements into the user experience

into your projects at each step of the

way from the

the research done ahead of time and then

use the testing and continued

improvement and and more and also the

design process

so what's not included in this talk is

that a technical detail much in the way

of project management tips there aren't

gonna be any efficiency epiphanies on

how to run this and no no advice on

paying budget to do the continuous

improvement I'm available

you know $250 an hour personal

consulting fee to tell you how to get

budget

all right

so fine at Cambridge was born out of

collaborative discussions with diverse

stakeholders residents and and

representatives from the city and

schools and community-based

organizations and this this feedback

highlighted the need for find at

Cambridge to serve as an easy-to-use

multilingual single point portal for

parents of children in particular to

find activities there so there's sort of

two problems at once that the people who

came up with this project we're dealing

with there were lots of programs being

offered lots of service providers from

the government and from nonprofits and

partnerships that were providing a lot

of services and there were plenty of

people with children that they wanted to

get into after-school programs and such

things but there was such a diversity of

opportunity that there wasn't one place

where someone couldn't find that and

yeah one of the biggest tricks on this

project was getting a lot of these

stakeholders on board and I can only

talk about a very small piece that

having a decent user experience played

and getting everybody on the board but

there was really big lifting to sort of

coordinate with all of the all the

different service providers need and get

them interested in in collaborating in

one place but you know they have a

problem people not knowing about their

services and parents of children had an

issue of not being able to find the

services

so

the people who made this happen who had

the the idea and that brought it on

nancy Tauber the executive director of

the big kids uh Policy Council in

Cambridge and dr. Leo bird

the siren apparently did not coordinate

the notes with the slides but I won't

keep them coordinated and dr. Lieber the

director the lemon Creative Learning

Program at the MIT Media Lab oh and they

kicked off this project with a ton of

research

and research influences everything in

this case my favorite anecdote is that

it influenced the domain name of the

site

the top-level domain so from there

surveys and the research they learned

that people trusted you know when they

they just about like possible names for

the site including with the finder

Cambridge with the dot-gov address in

the dot-org address and they found that

people expected more useful information

from a.org

than a.gov domain name I think that's

probably changing in Massachusetts since

the 2015 when the survey was done

because mass gov in Boston gov every

launched both on Drupal and our

fantastic sites and way more usable and

I think that the general attitudes of

what a dumb will give but that was my

favorite pieces of research and learning

what people you know people trusted or

more than talk of so first thing for

research for any project is who's this

for and the reason fine at Cambridge is

doing what is doing is number one for

parents looking for activities for their

children so that is when I'm talking

about a generic user to the site and not

specifying I apologize for that but this

is what I'm talking about this is the

number one target audience this is also

what would be the regular visitors to

the site people not logging in is their

parents looking for a case for the

children and then second audience is

program managers or administrators of

service providers

the partner organizations who are

responsible keeping their site content

and events up to date the and then the

third important audience is the site

administrators that people are running

to find a Cambridge organization

themselves

so the research methods that were used

for comparative analysis of other sites

students from the Harvard School of

Public Health reached out to and talked

to other sites in a semester-long

project code for Boston and they talked

to other like other other resource

portals portals and then code for Boston

and separately evaluated mystical event

sites and provide an analysis to find a

Cambridge detailed set of user personas

was created for the primary audience

parents of children looking for events

programs and services and this was based

on Cambridge is demographics and

everything was designed with them in

mind

now for the user testing that was done

and we'll talk about later people were

recruited from a cross-section of

socio-economic and languages spoken

again with Cambridge is demographics in

nine so Nancy interviewed more than 220

service providers in Cambridge in the

area about their needs before we even

started working on the site and then a

survey of parents and their needs got

a high response rate and was from

putting a lot of effort into it and so

all going to the first big point which

is to iterate on what someone else has

built and some of the things that

is learned in that process is

well that's

moved your second but eatery when it

someone else's built is more than just

the research it's also building on

something like Drupal how many of you

have hit tab before you do anything else

in a Drupal site and seen the skip to

main content so you're building on just

by building on Drupal you make sure that

people don't have to go through the

eleven items before people extreme

readers don't have to go through eleven

menu items before they can get to the

content of the site and this is I mean

for me part of iterative UX also is you

know building on Drupal or building on

another established framework that has

done the work on accessibility you're

not having to start over and do that

yourself

but from the comparative analysis doing

a look and feel you know that

one of the key things learned was not to

use automatic translation you can give

an example from the find a Cambridge

site this is how Google translates it

and hey this is Massachusetts the one

the one word that like it shouldn't have

translated is is mask that's referencing

the state and somehow Google was decided

that the one word it feels confident

translating is NASA's like masses of

people and I have no idea what's doing

with like

like its email it translated find it as

skata

and so this is actually one of the

iterative improvements that we have to

do so I mean the key thing is that you

know we made sure not to do an automatic

translation and not tell anyone because

that like that is sort of betrayal to

people who speak other languages see

something that's clearly like its to

pretend it's for them and then it's not

there so there is automatic translation

but it's obvious that's automatic

translation so in seed someone sees

something that's you know ridiculous

they'll blame Google and not Beth

so one of the improvements going

Florida's budget allows is to combine

automatic translation with with with

manual translation with solid

translation so that picking people so

like already like the about page is

manually translated but the hundreds and

hundreds of events and programs and all

that are not able to be automatically

translated yet and we have not yet put

together that really good integration so

we can make sure that we translate all

the menu items perfectly while still

making clear when something else is

machine translated or not

all right

the design portion of the iteration

and keep them here as you get to iterate

before bill and I originally pitched

this presentation in large part because

it had felt like we'd made so many

changes to the site over the years but

in you know reviewing the project and

everything that it became clear how many

decisions of crucial importance were

made before you know we'd configured a

single content type and so in addition

to the research we had the really great

opportunity to work you know bring in

the designer we normally work with and

and he did a great deal of design oh

yeah

so yeah it's sort of like we're standing

on couple sets of giants already we're

standing on Drupal and all the work into

accessibility usability it's already

done we're standing on the research and

now we've got desire to take us even

farther

this is

Todd link there

and took us through the design 297

messages or what he was CCD on for final

Cambridge in 2015 alone that I also was

involved in and the project didn't even

start until May of that year but a ton

of work before we had to do anything and

he has

yeah he's been refining an approach and

it's gonna go into a lot of the ways

that it's great for us but he's

essentially arguing for a more active

role of the designer to be responsible

for explicitly communicating the design

system to both like the clients and

users and and the developers and

releasing the developers from having to

interpret a design and fill in the gaps

and so then as we'll get into later

that'll let us as the developers focus

on performance and and the improvements

of other kinds and accessibility and

polishing things on the admin side

it starts with doing the content

modeling and this is before it's touched

any kind of CMS he likes to use Jekyll

because it allows for structured data

this is a very structured data heavy

site the point is to be able to filter

it you know for age and activity and the

million other things and there needed to

be a way to to give people a way to test

this and he did that by building a real

quick

yamo code powered living wireframe

and to get content into that wireframe

there was two approaches take initially

so it was first we tried a Google sheet

we just put in all of the different data

but Google sheet does not enforce

structured content and so we got

instruction content and that was not

possible even in a flexible wire frame

to to make use of the data and they were

also sort of you know at the same time

iterating on what service providers are

willing and able to provide so from the

mass of what was provided in in in

response to what basically because the

tool didn't restrict what kind of

answers beam or basically open answered

questions we created a more you know

more lockdown thing exactly like you

would make in Drupal and so Todd like

contentful and we use that I have a good

experience with gather content also or

at least gather content has been good

and giving refunds when we stopped using

them and they're like okay

we fund it but I mean gather contents

good - oh content fill is a good tool

personally I think that you can spin up

Drupal and configure the site's

configure the content types and and

fields and start bringing in content

right away here and just as long as

you're willing to throw it out later if

you want

it's almost as fast as doing it with

contentful or something like that but

the point is that through some form got

structured data the Google the Google

survey tool Google Forms or whatever

it's called

would do it also and it would allow you

get structured data into the spreadsheet

which is all that Todd wanted to do and

once he got structured data in a

spreadsheet he was able to get it into a

wireframe and and the wireframe being

driven by structured data sort of helped

like it helped yeah he's moving the

whole thing towards as so being their

programmatic thinking structured

paralyzed system of components that are

able interact and have relations with

one another so these are the events

these are those the the programs and

these are the services and so he's got

all of this in in data form and he's

plugging in it he's actually plugging

into something that's much more than

what you think it was a regular fire

frame so again he's using Jekyll the

power at this time but pretty much any

static site generator could do it or at

least Jekyll and Hugo some of the more

powerful

can you ever

so Todd didn't to concern itself with

some of the more nuanced differences

between a wireframe prototype you know

anything that's too abstract a wireframe

or anything or ia documents are not

going to be easily understood and so the

point is to use the wireframe as an

unpolished prototype for iterating on

and so wireframe is is sketching in code

and content and so it's very different

from what you know what is also

ultimately produced these I'm sorry

so a wireframe is very different from

what is also ultimately produced which

is these you know buttons and widgets

and stuff which is which is greatness is

also part of the design system and

that's how we can you know you know make

changes to the site without having to go

back to the designer every time the UX

designer the visual designer but it's

though the wireframe as as an iterative

unpublished prototype is unpolished

prototype is off that's a whole other

okay and so the whole point is that you

are showing not telling showing is more

powerful than telling so clients are

going to have their bias from previous

websites from their work thinking that

they have to translate everything into

visual terms to talk to designers so

it's not just it's not just the picture

the showing is a very visceral the point

is that it's it's there the interaction

is part of the showing

and so ultimately and the this is the

the you know it's essentially built you

know an interactive site it just has

none of the the functionality as far as

the data entering everything but it's a

site powered by the data gathered

separately and allowed full interaction

and this is rapidly prototyping on a

couple times

quick know just if I don't run out of

time the interesting thing about the

collections here is that this is

something that tested pretty well with

actual users but was not something that

the people running the ty site

ultimately had the capacity maintain and

so this is something we actually had

this is something you know the

collections functionality is something

that we did end up building and then

taking away and so that's not the kind

of iteration you necessarily want but it

is part of providing the experience in

this case stayin experience for the site

administrators of not having to do a

kind of content curation that they were

not set up for so handoff from design to

development

so we came in with this incredibly

fortunate situation of all the research

and I'll design before we we came in

but still development compared to the

design portion feels like this it's so

much slower going to to build all the

functionalities and to just work on the

interaction but we had a good solid

interaction just simply build it too

and

what's really awesome about the work

that went into the living prototype is

that he then translated that directly

into these seven letters which is the

way to do it

HTML and CSS so we were taking you know

static HTML and CSS and translating into

people who are not taking a picture of a

mock-up we were taking something that

was proven to work for the interaction

not just as a as a still picture and and

building it so you know the iteration

had done been done when it was easier to

do HTML CSS CSS before there was a

Drupal site there and now he had stuff

that we knew would come would work so we

know that you know the iteration is

going to continue as I'm going to talk

about but that fast iteration for the

refining how how the user interface

really worked was done with pure HTML

and CSS essentially with a simple static

site generator and so that was refined

before we got it into Drupal

and so giving the

the yeah so this is something else that

yeah changed after we built it another

iteration after the initial launch and

so you know pod emphasizes sharing the

the underlying data model with the

client but ultimately decide that would

not be sharing the underlying data model

with everybody and so here the day model

is it like grades and ages are being

tracked separately because you have some

programs that think only in ages and you

have other programs that think only in

grades and so it was really important

for the service providers to be able to

say like here is my eligibility

eligibility criteria and it is you know

I

we only serve people in grades 5 & 6 and

someone else is you know only serving

age you know 10 but what we ultimately

did was simplify that on the site as it

is now to simply show ages research with

parents showed that they were more

comfortable thinking about the age of

their child than the grade and there was

less confusion about summer activities

and things that are between grades but

again every program has their own age

and grade eligibility criteria and

something maybe eight year olds twelve

years old so would that would show up in

both the ages five to ten and the ages

making age work as well as grade is

essentially put on the various service

providers and this is only possible

because Cambridge has a full-time staff

person that find it sort of helping the

service providers and and possibly as

we're talking to other cities about this

you're having an automatic fuzzy age to

grade mapping is is probably gonna come

back that's something we explored but

ultimately it

it was considered more valuable for the

service providers to to you know just

fill in that extra mapping even though

they didn't think of serving the greater

age depending on which service provider

it was the finding Cambridge was able to

help them so instead of like exposing

this data model to be to exposing the

data model to the service providers and

to the administrators but not to

visitors so visitors can still you can

still filter by by grade but that's not

what's put on the front page anymore

all right but we didn't we did not

forget about her service providers um so

for them instead of the user profile

page the default for Drupal and not very

useful when change that was made pretty

quickly was to give a customized

dashboard so they can see key actions

that they can take and if there's any

alerts on their content and then if

you've ever thrown something away or

deleted something and think immediately

made a huge mistake

and want to dive into that garbage chute

and get it back or the digital

equivalent and stop that thing from

being lost forever somehow we did get

people who experienced that and had that

fear and so another improvement was to

add the ability to recover deleted node

this is using the kill file module and

through belayed there's the trash module

but just a really critical user

experience thing for these service

providers who would sometimes clean up

old programs or do a duplicate and then

delete it but were desperately afraid of

losing like you know a thousand fields

practically worth of information

this continuous improvement phase and

translators continuous improvement might

be over selling a little bit first thing

media expectations

most of the regular improvements fall in

the category of meeting expectations

some power users

coordinate finding organizations with

terms they specified in the title

evening because it was in the

organization we started even though it's

like you think if that was really an

important term for a program it would be

in the program or in the organization of

vice versa we did make it so that

organizations were sort of grouped with

programs for search and vice-versa so

that they would both come up if either

one of them had some of the keywords

include didn't go where users are in our

case use testing in a computer lab in a

library was actually the one of the most

realistic places to go out and meet

people which was fantastic but

unfortunately about users in that

computer lab or an Internet Explorer 11

and so immediately you know found that

extra twiki bugs that were there all

right

one design decision in Cambridge no one

knows what neighborhoods are called

because they are called things like area

two and neighborhood nine and mid

Cambridge and the port is a brand new

one so anyhow no one knows what the

neighborhoods are so the map was how we

did the filtering by by neighborhood for

programs

that implied pretty crazy stuff on the

back end but I said no technical details

so don't get that out of date

information about events and programs

will drive people away so we added big

report as a vey accurate functionality

link there for people to do that and let

people know when something is no longer

no longer valid and that has actually

helped the huge amount final quick ideas

performance as part of the user

experience and iterative improvements

are and performance are as much a part

of you know iterating on user experience

as anything else and we did it some

improvements to have fast content loads

this one in particular there

always keep using testing an integral

part of the user process so listen learn

and loop I guess you know no matter how

awesome your clients are and our clients

were awesome they're gonna have ideas

and those ideas need to be run past

users before you go and build them

so improving results yeah I think I'm I

just went over time so

I will

yeah and just one others that you know

either improvements we learned that

there's a lot of water parks in

Cambridge and they came up all the time

because they're just so many of them and

so it was just like it was it was it was

it part of getting relevant results was

figuring out how to how to reduce this

so I mean it's all kinds of things you

could do like only show them in the

summer and stuff like that but in this

case it was just sort of a simple matter

of like removing the age because water

parks are all ages and so people would

die I'm gonna look for an activity for

you know three to five-year-olds and

like three water parks would be at the

top of the list because they'd be

whatever's that's what's closest to them

and that just wasn't a relevant result

so we removed the eggs of a quick hack

we removed the ages from water parks so

that if people searched for water parks

explicitly they would find them but that

they wouldn't just get only water park

results when they're really looking for

a more specific age range and and then

and then you know and then putting water

parks just as a featured thing in the

summer so it's not like people wouldn't

know about them but they wouldn't be

cluttering results

and so yeah that's from yo doing more

user testing and doing more

and doing more and doing more you know

looking at the analytics thing what's

this up so just you know conclude with

you know there's not how exhaustive

you're playing portrayed any are things

will change and a couple of

inspirational quotations to leave you

with that so interview X is maybe the

positive way is looking at the fact that

no plan survives contact with the enemy

but you know don't don't think of your

users as the enemy any more than you

think of yourself as the enemy because

we are the enemy too thank you

[Applause]