April 4 @ 11:30am
An Event Apart Seattle 2018
Today we’ll cover 4 things:
- A framework to help us as teams and individuals come together (which will drive us into the technical responsive content model we’ll get into). We need to be balanced. When we don’t talk about how to work together often our teams fail.
- Learn how to find and prioritize various content types
- Sketching the models for clearer understanding, doing it collaboratively
- Seeing what it’s like to move into an in-browser prototype.
There’s a little bit of talk about culture and team at the beginning, and then we’re going to move right into the responsive content models themselves.
We played Rock Paper Scissors, and the majority of people in this room threw scissors first.
- According to the US Rock Paper Scissors association (real thing, I swear), “Rock is for rookies, and paper is for pros”… but here everyone threw scissors.
- When someone is new to the game, they throw rock. It feels powerful and your hand is already in that shape.
- So Paper is for pros (except when you’re at a web design conference).
- He used to play Rock Paper Scissors all the time with his older brother, and he used to lose all the time until he discovered Dynamite (lol). They had a lot of turmoil and conflict!
When we move through these conflicts and learn to move together as teams, friends, family members, acquaintances even, that’s when we find success.
The old iMac was the first computer to have a USB and they dropped all the other ports!! So there were almost no other accessories that worked (printers for example) at the time! They were trying to push a new standard.
If you’re building something for a platform, sure, but it’s our role to understand the platforms out there and be immersed in them, not to just test them occasionally.
He switches between Apple and Android phones about every year.
The way we design for devices changed drastically when the iPhone was launched. How we started to use the web changed, and things got bigger and bigger. How our content gets delivered and consumed has changed. There are so many devices that our content can get delivered to in so many different ways.
Steve referenced Brad Frost’s article on Atomic Web Design and the pieces of Atomic Web Design.
We’re going to focus in a bit on templates today – the things that serve our content over and over. We won’t have a unique template for each page, because not all pages are unique and require a different template. Example: Bio pages can use the same template.
We are the creators of the web, and we are connecting people to people (whether it’s to buy our product or service, to interact with their government, to connect socially). The web is about people, so he wants to frame our discussions around that.
He loves the zombie genre, but he’s also incredibly squeamish. Those don’t seem to go together…
He loves how it’s the same story over and over and it’s a story about how we retain our humanity.
We need to help our products retain their humanity!
He showed a trailer of a romantic comedy zombie movie where a zombie has this moment when he looks at a person and they make a connection, and his heart starts beating again. Then the other zombies see him change and their hearts start beating again!
We are trying to connect our humanity to each other!
Sometimes we can separate ourselves in a very cold way from
We are a society of ‘likes’. We choose to be with likeminded people. We do what we like because we can. This sounds like a good system but what if all we’re seeing is everyone’s highlight reel and this is actually causing us to grow apart? We’re creating more elephants in the room than we may be able to handle. Unless you’re very social aware, how could it not bother you to spend part of your time pretending to be super happy and then another part of time watching others be really really happy?
There’s always a backstory, but we don’t always know about it.
Steve has worked as a UX architect for years. He researches, plans, and designs experiences for web and in person like events.
His work is about people, not about technology.
We are starting to transform our world whether we intended to or not. We need to use our heads AND our hearts.
He spends time listening to people so he can decipher what they need to have an excellent experience using a website or product or service. Usually this is in a group of people.
The questions:
- What do you do?
- What is painful?
- What do you love?
- What do you wish?
These 4 questions give people space to open up. People need to tell their struggles. Once they’ve shared that it’s easier to talk about something they love. As they share their wishes, what emerges is a strangely random storyline that starts us on our journey. People have shared their hearts and their thoughts and we start listening for ‘what if?’
Once that foundation is set we start seeing the real story.
Let’s start addressing the conflict in our teams, be a sort of design therapist. This works in a bit of a workshop settings (even if it’s remote) – getting together is best. He uses the workshop setting to push the team to make tough decisions about the priority of their design or content systems for their future products or services.
They bond over the central content piece, the message about what they’re doing and who they’re trying to serve.
Case Study: He worked on a responsive project for the government of Alberta, Canada.
It’s got the Rockies on one side, the Canadian Badlands on another, it’s super super cold, and has lots of pipelines.
They realize they’re going to have a skilled labor worker shortage. They had plenty of money, but still predicted a 150,000 skilled laborer shortage. They realized they needed to reach out for those people across the world via their website.
Somebody on the client team said ‘We want to make it more difficult’ and they were serious! So Steve asked ‘Why?!’ and weeks later someone said ‘We have people that come to our Provence that end up leaving because they can’t be successful. They couldn’t handle the weather, they couldn’t learn the language, they couldn’t adapt so they left.’ So ‘We want it to be more difficult’ was actually ‘We want people to be successful.’ So, well intentioned but terrible at the same time. They were thinking of their website as a gatekeeper.
They couldn’t see how creating better content and a better story would be a good thing, so they stopped and watched people interact with their website. This was the primarily immigration website over the federal one because this is where the jobs were.
They realized that usernames were people, ‘and their hearts grew 3 sizes that day’ 😃
So then they decided ‘We want to tell the RIGHT story!’ on their website instead of making it harder to use! But it took a long time to get there because it was buried!
The 4 questions are key to people opening up, because if you don’t feel safe you won’t share.
Audience
UX Vision
Design Principles
Goals
Who is the audience? Who are the people we’re building this website for? We start there – who they are and how we’re connecting with them and what their needs are. And they agreed about that as a team.
Then they go into the project vision (also UX vision) and it’s the tension between our current reality and future vision. They agree to the vision based on what their audience needs. Again we’re looking at agreement as a team. And often this is a huge change for an organization so it’s important to get clear on it and agree on it.
Then they decided on their design principles. These are the guidepost for content decisions. They are the why statements so when someone says ‘hey we need this piece of content here!’ we can say ‘why? does it align with our principles?’
Then finally they set some goals for the project – in the example shown the client decided they wanted it to be sustainable, for real people. These are set based on the design principles, the project vision, and the audience. It’s easy to jump to the goals first, but it’s important to start with ‘the why’ and then go from there. Another one of their goals was to improve customer service (they reduced this so much it ended up paying for the whole project).
There was still conflict that came up, but through these workshops they always moved to agreement. Not necessarily the warm fuzzy type of agreement, but where they’d say ‘this is what we know our audience needs, so yes I agree to that even though it’s hard for me to do this in this moment.’ We’re looking for the of agreement where we put ourselves aside… not necessarily compromise. Compromise can leave room for disagreements to remain under the service.
If we don’t mine for conflict, we aren’t going to reach the highest peaks we can.
Boat example:
There are many ways to ship things in the world (plane, train, etc). Shipping on boats is the most cost effective way to ship. But boats produce 40% of the pollution in the world! WHOA!
There are new boats with lithium ion to reduce the emissions, and this can be retro-fitted on old boats, too!
There’s still a problem here, so ask WHY. Why are we even shipping things?
Singapore is the most densely populated country in the world. They don’t have room for agriculture, so shipping is keeping that country fed. Shipping is saving lives there.
Canada has a lot of trees and a large lumber agency. They don’t have the technology in Vancouver to mill soft wood, so they package it and ship it all the way across the ocean to China for milling, then they package it up and ship it back… because that’s cheaper to do.
WTF?
What if we looked at this differently, and started to frame it in ‘what is our vision, who are we doing it for?’
As we look at our web projects and our content, it’s important that we start to frame our decision around who we’re doing it for, and create this safe environment.
For those not familiar with content models, they are meant to give structure to your content.
Within the model you’ll have various content types. Think of this as an outline. The content types are essentially a draft or sketch of what will be coming.
A content model documents all the different types of content you will have for a given project.
What does it mean to have a content model in a responsive web?
In a responsive web project, let’s think about the types of content we will have like:
- a logo,
- navigation,
- page title,
- subheading that gives a brief description of what’s on the page,
- a call to action,
- detailed body copy,
- legal information, etc.
When you break up the content into these types instead of just 1) body copy, 2) sidebar, 3) legal footer, it’s possible to prioritize them appropriately for various devices and use cases.
If we think about the content types (or templates), they might be things like this:
- Homepage
- Product view
- Landing page
- Application view
- Standard content view
These are standard templates we’ll deliver across our project.
List out every one of these that are currently happening, or with a new project brainstorm what these need to be.
For one municipality he was working with they had 120 different templates so they looked for commonalities between all of them to see if they were all needed, how they were all working, and started to prioritize them based on needs.
It’s important within our content models that we ask ‘what is going to serve our audience(s)?’
So looking at the Standard Content page, then you go into that and look at Content chunks, like:
- contact module
- featured image
- teaser copy
- main body copy
- related items
Then you prioritize groups:
- One = Essential – this view wouldn’t be able to function or communicate the core message without this item (example: page title)
- Two = Great to have! – these items fully support the core purpose of this view (example: featured image)
- Three = Nice to have – if these didn’t exist it wouldn’t make a big difference.
- Four = Forget about it.
Sure everything could fall into group One, but then you have to go back and figure out the audience for each of the chunks within that group.
Some great content questions when looking at the content chunks are:
- What is the purpose?
- What is its content?
- How much can it hold?
- What happens to “spillover?”
- Is it accessible?
- How will it be inclusive?
- How often does it change?
Something MUST be the first priority, and something must be the last.
Lightning Design Jam – an exercise worth checking out.
In this process you get to a point – Impact vs Effort – and this is a dangerous point because the moderator is supposed to break a tie in importance by ‘choosing the sticky note on the left’ (the exercise has you using sticky notes).
But Steve thinks it IS worth talking about and probably IS important. LDJ focuses on ‘not talking’ because that’s when problems happen. But Steve thinks this is what happens when there’s not a good FRAMEWORK.
We should start with the right stuff!
Urgent Important: I am having a heart attack I need to go to the hospital.
Non-Urgent Important: I have a marathon to run in 6 months, I need to train.
Urgent Non-Important: There are pancakes outside!! But they’ve been sitting there for 30 min and are soggy.
Non-Urgent Non-Important: I really like to binge-watch Netflix.
When we’re thinking about the people we’re serving, we should be focused on Non-Urgent and Important. We should be thinking about long term!
This is about seeing the big picture, then diving in and looking at the small pieces of it, prioritizing them, and starting there on your project!
Final thought: When we are looking at the projects around us and the people we work for, that’s a big responsibility and it’s easy to just think about ourselves.
Find a way to help the vulnerable. Be strong, courageous, and kind. If you have privilege, use it for good.
@hellofisher
0 Comments