Jayson Elliot Portfolio
64
-
Upload
jayson-elliot -
Category
Documents
-
view
2.390 -
download
2
Transcript of Jayson Elliot Portfolio
Jayson Elliot
User Experience Director
1
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
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
Brands I’ve worked on A selection of brands from 1995-present
4
Case Study:Preferio
A personalized catalog, filled with products from your own email inbox
5
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.
www.preferio.com
7
Case Study:Humira
Helping arthritis patients manage their condition and communicate with their physician and family
8
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.
www.MyHumira.com
10
www.MyHumira.com
11
Case Study:Wizards of the Coast
Connecting avid gamers with official events and the wider community
12
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.
www.wizards.com
14
Case Study:Campbell’s Soup
Bringing previously disconnected brands into a cohesive family experience
15
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.
www.campbellsoup.com
17
Case Study:Land Rover
Build and price your Land Rover
18
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.
www.landrover.com
20
Case Study:Sunovion
Multi-channel pharmaceutical campaign for Omnaris allergy spray
21
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.
www.omnaris.com
23
Case Study:Nationwide
Finding out “what’s right for me” easily online
24
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.
www.nationwide.com
26
Case Study:EMD Serono
Using social media and video bloggers in unbranded pharma
27
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.
www.HowIFightMS.com
29
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
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
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
Examples
The following pages show some examples of work I’ve created, organized along the framework you just saw.
33
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.
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.
Competitive AnalysisScorecards are a great way to communicate complex
competitive sets. A digital scorecard should involve every relevant discipline, not just User Experience.
36
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
Thank You
Additional samples and videos are available by request. Let’s talk.
64
