Jayson Elliot Portfolio

Preview:

Citation preview

Jayson Elliot

User Experience Director

1

@jaysonelliotjayson.elliot@gmail.com

Jayson who now what now?

Executive UX Director, built and led departments for G2, Greater Than One, and WundermanFounded Permission magazine in 1992Built PG&E’s first web site in 1995Information architect since 1997

2

@jaysonelliotjayson.elliot@gmail.com

Here’s what’s in this document

■ Brands I’ve worked on

■ A few case studies

■ My approach to user experience

■ A framework for creating experiences

■ Steps in the framework, illustrated by examples

3

@jaysonelliotjayson.elliot@gmail.com

Brands I’ve worked on A selection of brands from 1995-present

4

@jaysonelliotjayson.elliot@gmail.com

Case Study:Preferio

A personalized catalog, filled with products from your own email inbox

5

@jaysonelliotjayson.elliot@gmail.com

Preferio 6

Preferio is a startup founded by Jayson Elliot, Mushter Moin, and Zia Karim in 2012. Our launch product is a personalized catalog app for the iPad that is populated by products found in your email inbox.

Once the user connects their existing email account to their Preferio account, our service scans their inbox, finding matches with known retailers from our own database. We archive the shopping emails to hide them from the user’s inbox, and reveal them in our iPad app as catalog pages. The user can flip through the catalogs while the products are displayed independently, making it fun and easy to see the latest deals.

Users can follow their favorite merchants, set alerts for the kinds of deals they don’t want to miss, and share what they discover with their friends and family. We de-clutter your inbox while helping you find the deals you were looking for in the first place.

@jaysonelliotjayson.elliot@gmail.com

Case Study:Humira

Helping arthritis patients manage their condition and communicate with their physician and family

8

@jaysonelliotjayson.elliot@gmail.com

Humira 9

Humira is a biologic that targets TNF, the cause of many problems associated with autoimmune disorders like rheumatoid arthritis (RA), Crohn’s disease, and psoriasis. The nature of the product makes patient compliance a problem.

Especially in the case of RA sufferers, cloud of symptoms, comorbidities, and therapies, as well as poor memory, makes it difficult to focus on Humira.

The SmartShare app was created by Wunderman and IDEO for Abbott Laboratories to help new Humira patients track their progress during the first 4 months of therapy. It provides feedback to the patient and wirelessly transmits a report for the doctor.

Through extensive patient and physician research, we created a tool that helped RA sufferers share their experience with not just their doctor, but their loved ones, helping create a more empathetic support structure and better outcomes.

@jaysonelliotjayson.elliot@gmail.com

Case Study:Wizards of the Coast

Connecting avid gamers with official events and the wider community

12

@jaysonelliotjayson.elliot@gmail.com

Wizards of the Coast 13

Wizards of the Coast is the company behind two of the most popular tabletop games in the world, Dungeons & Dragons and Magic: The Gathering.

Gamers throughout the country gather regularly to play these games at conventions, game stores, and other locations. A major part of Wizards’ strategy lies in the promotion of these games through the Wizards Play Network. Unfortunately, finding where and when to play was difficult for their audience.

Following in-depth user research with game store owners and gamers, we created mobile and desktop tools that allow gamers to quickly and easily find events in their area or nationwide. The tools had to be attractive to the casual gamer, but powerful enough for the hardcore tournament players to use on a regular basis.

@jaysonelliotjayson.elliot@gmail.com

Case Study:Campbell’s Soup

Bringing previously disconnected brands into a cohesive family experience

15

@jaysonelliotjayson.elliot@gmail.com

Campbell’s Soup 16

Campbell’s Soup Company has many product lines that were arranged in a byzantine array of microsites and architectures.

We audited their experience and studied users to understand their mental models of Campbell’s as a product family and company.

The realities of campaign cycles meant that different business units had to launch at different times, and needed the ability to maintain their own promotions.

The resulting site made it easier for customers to find what they were looking for, while giving each sub-brand room to express their own identity and promote themselves autonomously.

@jaysonelliotjayson.elliot@gmail.com

Case Study:Land Rover

Build and price your Land Rover

18

@jaysonelliotjayson.elliot@gmail.com

Land Rover 19

Land Rover was re-launching their web site in four continental regions simultaneously, and preparing for the debut of their first new model line in over a decade.

Working in concert with our London and New York offices, I led the UX team to create the North America consumer site, a templated system for Land Rover dealers’ sites, mobile consumer sites and an iOS app for owners, a social media campaign, and a build-and-price configurator that was all new from the ground up.

We conducted primary user research to understand how customers used car configurators, and most importantly, when and why. Through repeated prototyping and testing, we built a solution that made it easy to visualize your Land Rover while engaging in a playful but detailed customization.

@jaysonelliotjayson.elliot@gmail.com

Case Study:Sunovion

Multi-channel pharmaceutical campaign for Omnaris allergy spray

21

@jaysonelliotjayson.elliot@gmail.com

Sunovion Pharmaceuticals 22

A nasal spray for allergies isn’t the first place you’d expect to find funny viral videos, mobile apps, or write-ups from Gizmodo—but that’s what happened with Omnaris.

The challenge was to launch a new prescription medicine from Sunovion (then Sepracor), engage patients, and get them to spread the word.

We combined the power of humor and fun with the power of real utility. Viral videos with the “Allergy Dudes” were one element, but the real killer app for Omnaris was an iPhone app that rates allergy threats in your city, lets you know what types of symptoms you’re likely to encounter, and reminds you when it’s time to refill your Omnaris prescription.

The site won several awards, including the Gold from International Creativity Awards and MM&M, and the Web Marketing Association’s Outstanding WebAward.

@jaysonelliotjayson.elliot@gmail.com

Case Study:Nationwide

Finding out “what’s right for me” easily online

24

@jaysonelliotjayson.elliot@gmail.com

Nationwide Insurance 25

As the AOR for Nationwide, I led many projects across all business units and channels, including direct mail and CRM retention initiatives, an innovative use of SMS (text messaging) to deliver an interactive retirement planning experience, administrative interfaces for agents to better serve their customers, banking solutions (did you know Nationwide was also a bank?), and a self-service tool for users to find the right insurance for their individual needs.

Known internally as “What’s Right for Me?”, we iterated through several rounds of UX concepting and prototyping, helping Nationwide discover their own goals as well as the user goals we would have to serve.

@jaysonelliotjayson.elliot@gmail.com

Case Study:EMD Serono

Using social media and video bloggers in unbranded pharma

27

@jaysonelliotjayson.elliot@gmail.com

How I Fight MS 28

EMD Serono, the biopharmaceutical arm of Merck, needed to pave the way for a groundbreaking new drug that stood to change the face of multiple sclerosis treatment.

I led the user experience for an unbranded site that, in its own small way, broke new ground for marketing pharma online by using real people, in real time, as video bloggers.

The site was built using HTML5 and CSS3 for the widest compatibility and best performance. Navigation was kept as simple as possible to let the content be the star. Iterative testing and updating of newsletters, sign-up forms, and social tactics kept response rates and conversions growing month over month.

How I Fight MS has won eleven awards to date, including a Webby in the category of Online Film & Video Reality - a first for a pharmaceutical brand.

@jaysonelliotjayson.elliot@gmail.com

My approach to UX

The passive consumer is a thing of the past.Attention used to go to the brand that could shout the loudest.Today, it’s the brand that can create the most engaging and authentic experience.User Experience is the discipline of user-centered and behavioral design. 30

@jaysonelliotjayson.elliot@gmail.com

A framework for creating great user experiences

All projects begin with a group session, where every discipline has an opportunity to look at the problem together.

Disciplines take time to break off and work separately, then come together repeatedly to collaborate at key moments.

31

Strategy User Experience Creative Technology Account

@jaysonelliotjayson.elliot@gmail.com

A framework for creating great user experience

32Audit e

xisting solution

“Process” sounds oppressive, prescriptive, unyielding. Let’s call it a framework.

The steps you see here are tools to be used if and when appropriate.

No two projects are the same.

Heuristic evaluation

Competitive analysis

Stakeholder interviews

User research

Traffic analysis

Participatory design workshop

Persona creation

User scenarios

Functional requirements

Ecosystem / channel m

ap

Site map

Block wireframes

High-fidelity wireframes

Navigational flows

Usability testing

Functional specifications

Test and refine

Discover Define Design Develop Deploy

@jaysonelliotjayson.elliot@gmail.com

Examples

The following pages show some examples of work I’ve created, organized along the framework you just saw.

33

@jaysonelliotjayson.elliot@gmail.com

34

Heuristic evaluation“Heuristics” are just a five-dollar word for “rules of thumb.”

The evaluation is a systematic inspection, based on recognized usability principles. The goal is to identify

problems in the site so that they can be prioritized and addressed in the design.

@jaysonelliotjayson.elliot@gmail.com

35

Heuristic evaluation“Heuristics” are just a five-dollar word for “rules of thumb.”

The evaluation is a systematic inspection, based on recognized usability principles. The goal is to identify

problems in the site so that they can be prioritized and addressed in the design.

@jaysonelliotjayson.elliot@gmail.com

Competitive AnalysisScorecards are a great way to communicate complex

competitive sets. A digital scorecard should involve every relevant discipline, not just User Experience.

36

@jaysonelliotjayson.elliot@gmail.com

User ResearchFocus groups aren’t enough. To build a compelling and

intuitive experience, you need observational methods that reveal what people are unable to tell you themselves.

37

@jaysonelliotjayson.elliot@gmail.com

Card SortingWhen creating a large or complex taxonomy, card sorting is a

tried and true method for learning how people categorize content. Listening to people debate among themselves is

sometimes the most valuable part of the session.

38

@jaysonelliotjayson.elliot@gmail.com

Usability TestingIn this usability test for Jaguar, we asked participants to

describe the brand in a few words, both before and after using the site. The video shows how words like “sleek,”

“high-end,” and “sexy” were replaced by “disconnected” and “impractical” after using Jaguar.com.

39

@jaysonelliotjayson.elliot@gmail.com

Participatory workshops

In this one-day workshop, the client, Lilly Pharmaceuticals, participated in creating eight rich personas and fifty-five user

scenarios for their Cialis web site. The output of this workshop became the foundation of all UX and design work

for the rest of the project. Designers kept photos of the personas at their desks, and referred to them by name.

40

@jaysonelliotjayson.elliot@gmail.com

PersonasPersonas are a way to humanize the user, and allow the

designer to empathize with the person they’re designing for. While they’re based on research about real-world users,

they’re not market segments. A good persona is a tool, not a crutch.

41

@jaysonelliotjayson.elliot@gmail.com

PersonasPersonas are a way to humanize the user, and allow the

designer to empathize with the person they’re designing for. While they’re based on research about real-world users,

they’re not market segments. A good persona is a tool, not a crutch.

42

@jaysonelliotjayson.elliot@gmail.com

User Scenarios

User scenarios can take many forms, from detailed step-by-step storyboards to cartoon sketches, or even videos. The

important thing is that user scenarios provide an opportunity for all involved to envision the site or product in use by real

people. The things we describe happening lead to the functional requirements in the next stage.

43

@jaysonelliotjayson.elliot@gmail.com

User Scenarios

User scenarios can take many forms, from detailed step-by-step storyboards to cartoon sketches, or even videos. The

important thing is that user scenarios provide an opportunity for all involved to envision the site or product in use by real

people. The things we describe happening lead to the functional requirements in the next stage.

44

@jaysonelliotjayson.elliot@gmail.com

User Scenarios

User scenarios can take many forms, from detailed step-by-step storyboards to cartoon sketches, or even videos. The

important thing is that user scenarios provide an opportunity for all involved to envision the site or product in use by real

people. The things we describe happening lead to the functional requirements in the next stage.

45

@jaysonelliotjayson.elliot@gmail.com

User Scenarios

User scenarios can take many forms, from detailed step-by-step storyboards to cartoon sketches, or even videos. The

important thing is that user scenarios provide an opportunity for all involved to envision the site or product in use by real

people. The things we describe happening lead to the functional requirements in the next stage.

46

@jaysonelliotjayson.elliot@gmail.com

Ecosystem / Channel mapUnlike their equivalent documents from technical disciplines, the UX ecosystems are primarily user-focused, and are used

to make sure we understand all the pieces of the experience, and can account for the information architecture in each one.

47

@jaysonelliotjayson.elliot@gmail.com

Ecosystem / Channel mapUnlike their equivalent documents from technical disciplines, the UX ecosystems are primarily user-focused, and are used

to make sure we understand all the pieces of the experience, and can account for the information architecture in each one.

48

@jaysonelliotjayson.elliot@gmail.com

Site MapSite maps show the structure of a web site on a page-by-

page level. They serve as the blueprint for the site, as designers and developers check off the pages throughout

the build. While they display hierarchy and relationships, site maps do not show every link from page to page.

49

@jaysonelliotjayson.elliot@gmail.com

Site MapSite maps show the structure of a web site on a page-by-

page level. They serve as the blueprint for the site, as designers and developers check off the pages throughout

the build. While they display hierarchy and relationships, site maps do not show every link from page to page.

50

@jaysonelliotjayson.elliot@gmail.com

Block wireframesIn the early stages of information architecture (IA), block

wireframes identify the elements of a page without venturing into interaction design or the placement of individual

elements. They give visual designers and UX architects a common starting point for collaboration.

51

@jaysonelliotjayson.elliot@gmail.com

Block wireframesIn the early stages of information architecture (IA), block

wireframes identify the elements of a page without venturing into interaction design or the placement of individual

elements. They give visual designers and UX architects a common starting point for collaboration.

52

@jaysonelliotjayson.elliot@gmail.com

High-fidelity wireframesThese wireframes are the documentation most people think

of when they hear the phrase “information architecture.” The wireframes are for many audiences, from the client to the

developers to the visual designers.

53

@jaysonelliotjayson.elliot@gmail.com

High-fidelity wireframesThese wireframes are the documentation most people think

of when they hear the phrase “information architecture.” The wireframes are for many audiences, from the client to the

developers to the visual designers.

54

@jaysonelliotjayson.elliot@gmail.com

High-fidelity wireframesThese wireframes are the documentation most people think

of when they hear the phrase “information architecture.” The wireframes are for many audiences, from the client to the

developers to the visual designers.

55

@jaysonelliotjayson.elliot@gmail.com

High-fidelity wireframesThese wireframes are the documentation most people think

of when they hear the phrase “information architecture.” The wireframes are for many audiences, from the client to the

developers to the visual designers.

56

@jaysonelliotjayson.elliot@gmail.com

High-fidelity wireframesThese wireframes are the documentation most people think

of when they hear the phrase “information architecture.” The wireframes are for many audiences, from the client to the

developers to the visual designers.

57

@jaysonelliotjayson.elliot@gmail.com

High-fidelity wireframesThese wireframes are the documentation most people think

of when they hear the phrase “information architecture.” The wireframes are for many audiences, from the client to the

developers to the visual designers.

58

@jaysonelliotjayson.elliot@gmail.com

High-fidelity wireframesThese wireframes are the documentation most people think

of when they hear the phrase “information architecture.” The wireframes are for many audiences, from the client to the

developers to the visual designers.

59

@jaysonelliotjayson.elliot@gmail.com

High-fidelity wireframesThese wireframes are the documentation most people think

of when they hear the phrase “information architecture.” The wireframes are for many audiences, from the client to the

developers to the visual designers.

60

@jaysonelliotjayson.elliot@gmail.com

High-fidelity wireframesThese wireframes are the documentation most people think

of when they hear the phrase “information architecture.” The wireframes are for many audiences, from the client to the

developers to the visual designers.

61

@jaysonelliotjayson.elliot@gmail.com

Swimlane flowsA swimlane chart is a great way to see how different systems

and actors interact in a final product. Swimlanes are a valuable visualization tool for use case modeling.

62

@jaysonelliotjayson.elliot@gmail.com

Navigational flows

Navigational flows are used primarily by developers and QA. They show the actions triggered by every clickable and

interactive object on a page. A side benefit of navigational flows is that they force the IA to examine every step carefully,

catching the inevitable oversights that can come from wireframes alone.

63

@jaysonelliotjayson.elliot@gmail.com

Thank You

Additional samples and videos are available by request. Let’s talk.

64

@jaysonelliotjayson.elliot@gmail.com