mapping the design experience · • prototypes • usability “the art and science of generating...
TRANSCRIPT
Mapping the Design Experience
Right brain vs. Left brain
USER EXPERIENCEUSER RESEARCH
CONTENT ANALYSISDATA ARCHITECTURE
USER TESTING
CREATIVE CONTENTUSER INTERFACE
PROTOTYPINGBRANDING
PRINT DESIGN
DESIGN
PRODUCTSERVICE
WITHIN THE CREATIVE PROCESS FORM FOLLOWS FUNCTION
Development and construction Live
Prototyping and visual design
Concepting and drafting
the left braindetermines the function
UX tip: Projected text is easier to read againts a dark backgound
1. The Left Brain: User Experience Design
An often misused term that describes the process of designing digital or physical products that are useful, easy to use, and delightful to interact with.
it has been described as…
It encompasses processes that include
• Research and analysis• Surveys and interviews• Content audits• Information architecture• Taxonomies• Persona development• Experience and journey maps• Prototypes• Usability
“The art and science of generating positive emotions through product interactions”
Tomer Sharon, Senior UX Researcher
at Google.
product-centered design user-centered design
Personal experience: The single most difficult thing I have to deal with is convincing a client that visual branding comes after content and user experience.
1.1 UX Discovery: Defining the Who, What and How.
UX work starts with a discovery process that analyses of the Who, What and How of the project.
Understanding what users want, feel, and do interacting with a product or service, and how they do, establishes the basis of a narrative that informs all design decisions.
That narrative is often presented in the form of users stories written in very precise synthax.
Users stories are very granular and lead to user narratives (or epics).
1.2. Setting the project goals
The Who and What are incorporated in a set of Business Requirements and are defined by a Project Scope.
This work is usually done by a Project Manager.
The scope is the (contractual) document that defines the goals and limits of a project, and the roles and approval of individuals.
In the Scope document stakeholders and users are defined.
The project scope is also used to generate an RFP and a cost estimate.
1.3. UX methodologies
With user stories and business requirements come content audits and research.
Content is audited againts what’s needed, what exists, what needs to be created, or edited, or harvested, and what format that content has (text, image, video...).
Many methologies and techiniques can be mixed and mached to achieve the desire result.
• Competitor analysis• Stakeholder Interviews• User inteviews• Surveys• Content audits• Heuristic reviews (usability)• User testing• Use cases• Personas• Experience or journey maps• Workflow diagrams
1.4. Interviewing
Stakeholder and user interviews are held to gather information on current practices, expectations and individual pain points (what does not work). Interviews are held one-on-one, in person or remotely, and are often recorded.
Interviewing stakeholders provides insight on features and business goals.
Interviewing user is essential in user-centerd design. They provide insight on expectations, habitual use and pratices, and pain points on current products.
Card sorting exercises are another technique that allow UX designers organize content structure and refine labeling (taxonomy).
1.5. Developing Personas
Users (or customers) can also be presented as personas (made up individuals) grouped by gender, age, goals. Personas will respond to the user stories. They become your benchmark audience.
1.6. Mapping the findings
User experience maps and user journeys are created to visualize the finding of users interviews and surveys.
1.7. Conceiving the Architecture
Information architecture (AI) aims to solve the hierachical and relational problems inherent in complex non-linear interactions with content.
Taxonomies structure hierarchical value, categorization and tagging of content to facilitate presentation, navigation, discovery and search.
1.8 Auditing content
In the forest of content there there are multiple physical shapes, data, and hierarchies that need to be identified and structured to give users easy access to what they seek. This is sometimes called discoverability. In the online forest digital content discoverability is called SEO.
Like in a real forest, most information about diversity and relationships lies under the surface. The role of a UX designer is to audit that diversity and map those realtionships. Content is presented in many forms, long, short, hierarchical, immersive, quantitative, descriptive, as text, data, images, videos, illustrations, static , dymanic, relational, or in motion.
The structure of content is organized by type, levels, values, style, categorization and tagging.It all translates into taxonomies and visual design.
1.9 Sitemapping and flow charts
These are the most basic forms of charted architecture for websites, mobile interfaces, or user interactions with product and services.
They define the navigational model, pagination, and user decision points.
Common ReadsSitemap
GLOBAL NAVIGATION
News1.0 Social Media Follows8.0About Us5.0Freshman Year Reading2.0
1.0 News Landing Page
1.2 News List
1.1 Articles
Footer
Newsletter Sign UpF4.0Terms of UseF3.0Privacy PolicyF2.0Corporate LinksF1.0
Community & School Reads3.0
3.1 Adult Community LP 3.2 CYA Community LP
3.1.X AC Categories 3.2.X CYA Categories
3.1.2 AC Resources 3.2.2 CYA Resources
F.A.Q4.0
4.0 F.A.Q.
Search6.0
6.0 Search Results
Newsletter Subscription7.0
PAGES
2.0 FYR Categories LP
2.X FYR Categories
2.3 FYR Resources
5.0 About Us 7.0 Newsletter Subs.
Book details Author details
the right braindetermines the form
2. The Right Brain: Visual Design and Ideation
It encompasses…
• User interface design• Mood boards• Typography, color, composition• Branding• Visual development
The phase of visual design for digital interactive interfaces on various desktop and mobile devices is defined as UI…
It includes…
• Wireframes• High fidelity prototypes• Interaction design
“User Interface (UI) Design focuses
on anticipating what users might
need to do and ensuring that the
interface has elements that are easy
to access, understand, and use to
facilitate those actions. UI brings
together concepts from interaction
design, visual design,
and information architecture.
www.usability.gov
Freshman Year Reading (FYR) Mega Menu
6
Mega menu expands on hover. Freshman Year Reading is not clickable to a page.
Clicking Freshman Year Reading Categories will take the user to the Freshman Year Reading Categories page.
Clicking each category from the mega menu will take the user to the selected category page.
Clicking Freshman Year Reading Resources will take the user to the FYR Resources page.
There will be 3 distinct Resource page dedicated to FYR, Adult Community, Children & Young Adult. Each Resources page will use FAQ module. (Please refer to design specs for layout).
62.1 UI: Wireframes
Wireframes show structure and sequence of content on a screen. They can be static or interactive, low fidelity or high fidelity.
Intial wireframes are usually presented in a visually neutral form, in grey, to focus on the structure’s blueprint, and not trigger in stakeholders or users an easthetic judgment. They are the syntax of design.
Static low fidelity wireframes are also meant to be passed around at meetings in pdf and printed forms.
Different wireframes are created for desktop and mobile experiences.
2.2 UI: High fidelity wireframes
Hi-Fi wires are dressed up with images, typography, text and color. These are more often used at later presentations when less used to abstraction is needed.
Prototypes add clickable interaction to wireframes through hyperlinks.
These prototypes are used for presentation to stakeholders and developers.Sometimes they are also used for user and A/B testing.
Link: InVisionInVision is a simple and free prototyping web applivation. Great for presentations
2.3 UI: Interaction and usability
Clicking, tapping, scrolling, swiping, filtering, zooming, peeking: smooth interaction with digital products is key to good usability.
Interaction is the realm of calls to action (CTAs), hover states, roll overs, fly out, pop ups, collapsing and expanding fields, filters, forms, and any other physical ways users relate to intefaces.
Usability is the study of how users interact with products and services. It quantifies and maps physical and emotional responses with the goal of improving engagement.
Usability studies are usually applied to protypes and live sites, through a variety of methodologies.
Link: www.usability.govAn excellent resource on UI, UX and usability by the department of Heallth and Human Services
2.4 Ideation: Moodboards
Mood boards are an arrangement of images, materials, typography, etc., intended to evoke or project a particular style or concept.
They are an effective tool to harness inspiration.
Mood boards are widely used in adverstising and graphic design to align creative and business perpective around ideas, style, and inpiration.
The quitessential mood board is Pinterest.
www.gomoodboard.com
T H I S D O C U M E N T CO N TA I N S CO N F I D E N T I A L MAT E R I A L O F T H E M I L L G R O U P, I N C. CO PYR I G H T © T H E M I L L G R O U P 2016
T A R G E T
AU
GU
ST
1 2
01
6 CA
RT
WH
EE
L
CARTWHEELT R E A T M E N T
L O O S E Y O U R S E L F I N C O l O R
GOLDEN FABLE
A R T D I R E C T I O N
AU
GU
ST
1 2
01
6 CA
RT
WH
EE
L
T H E C I R C L E T H E M E
There is a circle that stays in the center of the frame throughout the spot, created by match cut objects,
and characters. The circle will be a common motif throughout and will be used as a branding element
to connect our fantastical world with the Cartwheel app itself. Circles will take the forms of anything
from holes in the wall, mandala-esque patterns of products, and the shape of the objects themselves.
GRAPHIC CIRCLES PRACTICAL C IRCLES UI APP DESIGN CIRCLES CIRCULAR PRODUCTS
T A R G E T
AU
GU
ST
1 2
01
6 CA
RT
WH
EE
L
STYLE FRAMESB R O A D C A S T & P R E - R O L L
T H I S D O C U M E N T CO N TA I N S CO N F I D E N T I A L MAT E R I A L O F T H E M I L L G R O U P, I N C. CO PYR I G H T © T H E M I L L G R O U P 2016
T A R G E T
AU
GU
ST
1 2
01
6 CA
RT
WH
EE
L
C O N C E P T O V E R V I E W
To tell the full story of Cartwheel, we want to strike a harmonious balance between the
informational aspects of how to use the app, with compelling visuals that bring it life. The
aim is to make this educational and clear, as well as beautiful and relatable. The Cartwheel
branding, shape of the circle, color palette and user interface design are important visual
tools that will help connect the metaphorical world of our visuals, to the practical fun and
rewarding use of the app itself.
S T O R Y
Every scene should feel energetic, upbeat and intentional. Much like an Alice In Wonderland tale,
our story begins as a woman steps into a circular doorway, an abstracted visual of the categories
page on Cartwheel. She leads us through the world of Cartwheel, where we are dazzled with
bright and beautiful objects of all sorts; a wonderland of everything you can save on with the app.
These sequences are quick, witty and playful. At the end, we pull out from the circular doorway we
entered through, leaving the wonderland behind, and arriving at the Cartwheel categories page
on a smart phone where: We have been inside the app the whole time.
L O O S E Y O U R S E L F I N C O l O RA R T D I R E C T I O N M O O D B O A R D
AU
GU
ST
1 2
01
6 CA
RT
WH
EE
L
A plethora of products from all the departments will be featured: Whether it is apparel, beauty, cleaning or pet
products, food, home decor, or toys and games - all the objects will be circular in nature, centered in the composition,
and spinable. They will be fun and unexpected, creating a genuine surprise with every match cut. We will choose
and create objects that fit within our color scheme, bringing them into the world of Cartwheel.
P R O D U C T S & P R O D U C T I O N D E S I G N
L O O S E Y O U R S E L F I N C O l O R
GOLDEN FABLE
A R T D I R E C T I O N M O O D B O A R D
AU
GU
ST
1 2
01
6 CA
RT
WH
EE
L
The environment we create and build for this spot will be very graphic and minimal, creating the
abstracted world of Cartwheel. The color palette will set a look and feel that steers us away from the
classic Target branding and style. The world will be heavily art directed and designed with purposeful,
graphic and lively compositions.
B R I G H T • M I N I M A L • P L A Y F U L
T H I S D O C U M E N T CO N TA I N S CO N F I D E N T I A L MAT E R I A L O F T H E M I L L G R O U P, I N C. CO PYR I G H T © T H E M I L L G R O U P 2016
T A R G E T
AU
GU
ST
1 2
01
6 CA
RT
WH
EE
L
Match cutting circles to circles with each frame’s composition will bring continuity to this spot, which involves many
objects and se uences. uic cuts and fast acing will be in uenced and timed with the music. hile each circular product remains the same size in the frame, the scale of the objects themselves vary from things as small as nail
polish bottles, to products as big as blow up back yard pools. The scale relationships and different camera angles
to down, rofile etc. will ma e this engaging and sur rising with e er turn of the corner.
C I N E M A T O G R A P H Y & E D I T O R I A L S T Y L E
L O O S E Y O U R S E L F I N C O l O RS T Y L E F R A M E S
ADVERTISING SPOT MOODBOARD
SOCIAL MEDIA CAMPAIGN MASCOT PROJECT MOODBOARD
SOCIAL MEDIA CAMPAIGN FINAL PRESENTATION
2.5 Ideation: typography
Typography is the art (and architecture) of the written word. Its appreciation is based on the study of its historical, easthetical, and functional nuance: clarity, form, function, origin, style, and value.
The context determines both selection and design rules.
> Display type vs Text type> Shortform vs longform reading> Digital vs print> Royalty free vs royalty managed
Fonts for print and web can be found and tested herewww.myfonts.comwww.fontshop.com www.fontbureau.com www.fontfont.com
New forms of licensing by subscription are good for websites and frequent userswww.typekit.com
Post modernist 1990s - Dutch Vernacular 2000s - US
psychedelic 1960s - US Modernist 1970s - ItalianModernist 1960s - Swiss Graphiti 1980s - French
Minimalist 1980s - SwissDeconstructivist 1980s - US
asymmetrical motion loud / energetic
organic / hierarchical dynamic / fluidbold / symmetrical motion punk / essential
systematic / assertivefreethinking / cultish
figurative / illustrativetech / textural new wave / flat
post minimalist / dimentional
pop / geometric
street / vernacular hand lettered / layeredconceptual / optical
GermanyJapan Poland
United States
United Kingdom
Spain FranceSwitzerland
1
4
97
2 3
5
108
6
11
2.6 Ideation: color and composition
Color is subjective although some some design principle apply:
1 Grey scale can be sophisticated 2 Use colors sparingly3 Let color breathe4 Draw color from images5 Echo and complement colors6 Use background contrast7 Match color luminance8 Mix and match your color pairings9 Look for intermediate hues10 Make green rare11 Make white a color
2.6 Ideation: the "Luminance test"
Look at your work in Black & White
Color choices need to consider luminance (and contrast) because it is a key to usability. Luminance contains visual information that hue and saturation do not.
The "luminance test" provides an excellent way to isolate visual composition (which guides user attention) and counteract confusion due to color deficiency. One in 12 men and one in 200 women in the world are color defficient.
www.workwithcolor.com
putting it all together
Penguin Random HouseSpeakers Bureau.
Celebrating 10 Years.
1.0 A Branding Use Case:Penguin Random House Speakers Bureau
An representation service agency for Penguin Random House book authors, which promotes and books speaking engagements.
GROUND Black
GROUND Black
PREFERRED ALTERNATE
OUTLINE VARIATIONS ON SINGLE COLOR GROUNDS
ALTERNATE ON A TURQUOISE GROUND USED FOR ONE-COLOR PRINTING ONLY
GROUND C96 35K
GROUND PMS 1505
GROUND White
GROUND C96 Y35
OUTLINE White
OUTLINE White
OUTLINE Black
OUTLINE White
OUTLINE Black
OUTLINE White
PAGE PMS 1505
PAGE PMS 1505
PAGEBlack 30% tint
1.1 Speakers Bureau Branding Guidelines
1.1 Speakers Bureau Branding applications
1.3 Speakers Bureau Image curation
The web is now visual.People like to communicate through though images and video (Instagram, Pinterest, Snapchat, Tumblr, WhatsApp, Youtube…)www.internetlivestats.com/one-second/
Image (and video) curation is part of any design strategy.1. Identify sources 2. Establish quality baselines3. Establish usage rules4. Design visual parameters5. Optimize production and SEO6. QA site performance
Some basic tips:> Design and produce for reuse across responsive structures and social media.> Consider the user's context and
600 x 388
940 x 529
Site's portraits (full screen and thumbnail) are porportional to a grid system and allow for text area.
240 x 135
YouTube thumbnails optimized with topics
1.4 Speakers Bureau Print promotion
3 Branding case study
thank you