Let’s Get Visual
UX Workshop: Breaking Down Experiential Content
Let's get started
02
Hannah Ekman
Sr. User Experience Designer
01
03
04
Overview
What is UX?
Workflow
Strategy & Content
05
06
07
Structure & Layout
Workshop
Making it Visual
Let's Get Visual
We talk about good and bad experiences, but how do we get there?
The term user experience (UX) encompasses all aspects of a prospect or customer’s interaction with your company and its products and services. A UX designer’s job is to improve the quality of a user’s experience.
01.
Traditional marketing teams tend to take the finished copy and throw it over the fence to the design team with the guidance of, “use this to design a [insert any content format], and make it look good.”
Traditional vs. Experiential.
Brief
Design
Distribution
Analyze*
Using insights from the analysis, the team can further iterate on the experience to better achieve the original goals or improve other facets of the content.
Copy
Wireframe
Stakeholders reconvene to analyze both campaign performance, and visitor engagement metrics, to determine whether the goals of the experience were met.
A marketer distributes the finished experience across various channels to their audience.
A collaborative and iterative process where a writer, UX designer, and designer work together to create the story, format, and design, based on the brief, then publish the finished experience.
A planning meeting of all project stakeholders. This is when the purpose and goals for the content are established.
Traditional
Experiential
A marketer distributes the finished asset across various channels to their audience and reports on how the campaign did.
A designer works around the copy and creates the look and feel, delivering a finished asset.
Copy is written by a content writer and typically finalized before getting a designer involved.
From A to Z.
Brainstorm
WF + Content
Build
+
–
Expand upon the wf concept and add in the look and feel as well as the proper branding elements.
Hone in on the UI of the piece and how to make it come alive for users in a natural way.
Similar to the blueprints of a house, outline the structure, layout, and the logic.
Ideate on creative solutions to the given project. Sky is the limit.
What problem are you solving?
02.
Align Your Strategy.
Goals
Defining Success
Audience
Key Messages
Distribution Strategy
Home
Who is this piece of content for and why is it valuble to them?
How is this piece providing value for your users and your business
What have you outlined as the metrics for success for your experience?
Where will your experience live?
How will your content be promoted & distributed?
What are the main points you're trying to convey?
Where to get started.
Take a look at our interactive brief
03.
Rethink Your Content.
People scan, not read.
79%
of online users scan the page instead of reading word for word, focusing on headlines, summaries & captions.
Nielsen
A typical F-pattern scan
F- pattern
Layer cake pattern
Learn more about the future of driving, and see how you can help support a safer, driverless tomorrow.
click to see more
Paper-based Perspective
View a
Digital Experience
Experience-based Perspective
Close
04.
Structure and Layout.
The idea that everything needs to be displayed at once with a linear hierarchy.
The ability to allow users to dive into different sections and create unique user journeys within a single piece.
Linear journey
Take Control.
Organic journey
Vs.
Hierarchy Matters.
Having a strong visual hierarchy will help your user get the information they're looking for quickly & easily. Side note: Paginate vs. Long Scroll
Page Layout
Guide your user’s attention by initially displaying the most important content. Then, put more complex insights and facts beneath a hotspot. In doing so, you’re helping users ease into content as well as save them time by giving them the option to sidestep content they aren’t interested in.
Progressive Disclosure
80/20 rule
80% of the time users are only using 20% of a site's capabilities.
Hook your user.
Allowing user to engage with the ultimate CTA when they are ready vs only at the beginning or end of an experience. Think 10 minute missed exit detour.
Repetition
Seal the deal.
Ummm . . . .
The more choices available the slower the action time for the user In short, if customers have too many choices, the pleasure from the one they choose will never fully outweigh the disappointment from the ones they didn’t.
Hicks Law
Make It Experiential.
05.
Source: Slideshare
We retain 80% of what we see
80%
We retain 20% of what we read
20%
We retain 10% of what we hear.
10%
Identifying opportunities for visual storytelling.
Stats & Data
Separating facts from insights allows both to shine in their own light, and helps you develop a content cadence.
Diagrams
Maps
Lists & Sequences
Q&A
Ideation 101
Why Brainstorm?
Inclusive for everyone +
Project Transparency +
Solution based design +
Working to solve the project's unique goals and objectives in a strategic vs executional way.
Getting everyone on the same page at the beginning of the project to ensure no balls are dropped.
Everyone on the team can add value at this stage of the project, not just designers.
Brainstorming Rules.
Quantity over quality.
Encourage wild ideas.
Defer judgment.
Build on ideas.
Click 2nd
Click 3rd
Session breakdown.
20 min
10 min
Working to solve the projects unique goals and objectives in a strategic vs executional way.
Content Review
Briefing
Rapid Ideation
Discuss, Compile, Vote
(Words, Sketches, prototypes, etc.)
(goals, Audience, Success)
Group Discussion
What you need.
Post it notes
Pen
Briefing Document
Content Review. Briefing.
Rapid Ideation.
Discuss. Compile. Vote.
Group Discussion.
Wrap-up.
Be mindful of the types of animations as well as the delays and durations of your objects. Make your experience look seamless and natural for your user, you don't want to make them dizzy!
Wireframing
High fidelity
Low fidelity
vs.
Informative
Purposeful
Natural
Use animation to show rather than tell information to your user. Animations can be helpful to distinguish sections, show what's interactive, and reinforce your message.
Animations should be used to highlight or emphasize important information on the page. Try not to create unnecessary distractions with flashy, tacky animation. Each one should serve a specific purpose, rather than animate for the sake of movement.
Hide
3
Use attention seeking animations sparingly!
2
Exit animations are typically very short (0.2 seconds)
1
Visual Clarity
How does your user navigate your site? can they find what is relavent, explore, get back to the home page, and remain oriented?
Standard set of colors and points of interaction within the experience.
Wayfinding
Readability
5
Validating the user, and informing them that the task they’ve set out to complete has been completed.
Meeting users with the terminology and reading level appropriate to thier role and needs.
4
Feedback
Affordance
The physical characteristics of an object or environment influence its function.
How does your user navigate your site? can they find what is relevant, explore, and remain oriented?
Errors
Even better than good error messages is a careful design which prevents a problem from occurring in the first place.
Guiding principles.
Thanks Atlanta!
Next Steps
ERRORS
6
How does your user navigate your site? can they find what is relavent, explore, and remain oriented?
Iterate.
Brainstoming
Prototyping
Testing
Implementation
Questions?