this is my portfolio - Brynn Evans
this is my portfolio - Brynn Evans this is my portfolio - Brynn Evans
http://about.me/brynnevans bmevans@gmail.com I’m Brynn Q this is my portfolio http://brynnevans.com/blog http://twitter.com/brynn
- Page 2 and 3: social search 2007-2010 Q
- Page 4 and 5: Social Search thesis research, inde
- Page 6 and 7: Social Search thesis research, inde
- Page 8 and 9: Social Search thesis research, inde
- Page 10 and 11: GIFTLY head of design, early stage
- Page 12 and 13: GIFTLY head of design, early stage
- Page 14 and 15: GIFTLY head of design, early stage
- Page 16 and 17: GIFTLY head of design, early stage
- Page 18 and 19: GIFTLY head of design, early stage
- Page 20 and 21: GIFTLY head of design, early stage
- Page 22 and 23: BOLT PETERS 2010 Q
- Page 24 and 25: ipad vs. iphone ux social interacti
- Page 26 and 27: gamestorming facilitator Gamestormi
- Page 28 and 29: The Betacup 2009 - 2010 Q
- Page 30 and 31: The Betacup design strategist & jur
- Page 32 and 33: “Muting” Twitter personal desig
- Page 34 and 35: itdefender 2009-2010 Q
- Page 36 and 37: BITDEFENDER user experience designe
- Page 38 and 39: BITDEFENDER user experience designe
- Page 40 and 41: BITDEFENDER user experience designe
- Page 42 and 43: LIKES IRL 2010-2011 Q
- Page 44 and 45: Likes IRL designer and co-creator I
- Page 46 and 47: UX FOR GOOD designer January 28-29,
- Page 48: Comics for your enjoyment Q
http://about.me/brynnevans<br />
bmevans@gmail.com<br />
I’m <strong>Brynn</strong><br />
Q<br />
<strong>th<strong>is</strong></strong> <strong>is</strong> <strong>my</strong> <strong>portfolio</strong><br />
http://brynnevans.com/blog<br />
http://twitter.com/brynn
social search 2007-2010<br />
Q
Social Search<br />
thes<strong>is</strong> research, independent work<br />
I spent about three years doing<br />
formative research on social search—<br />
or, how people share information in<br />
social environments (online or<br />
offline).<br />
Research Projects<br />
Three Flavors of Social Search<br />
Wireframes<br />
Q<br />
Modeling Question-Answering<br />
Next Project ><br />
2007<br />
2008<br />
2009<br />
2010<br />
Augmented information assimilation: Social &<br />
algorithmic web aids for the information long tail<br />
<strong>Brynn</strong> M. <strong>Evans</strong> & Stuart K. Card (pdf)<br />
Towards a model of understanding social search<br />
<strong>Brynn</strong> M. <strong>Evans</strong> & Ed H. Chi (pdf)<br />
Exploring the cognitive consequences of social<br />
search<br />
<strong>Brynn</strong> M. <strong>Evans</strong>, Sanjay Kairam, & Peter Pirolli (pdf)<br />
Do your friends make you smarter? An analys<strong>is</strong> of<br />
social strategies in online information seeking<br />
<strong>Brynn</strong> M. <strong>Evans</strong>, Sanjay Kairam, & Peter Pirolli (pdf)<br />
An elaborated model of social search<br />
<strong>Brynn</strong> M. <strong>Evans</strong> & Ed H. Chi (pdf)<br />
Tell me about your problems: An analys<strong>is</strong> of search<br />
failures and social interactions<br />
<strong>Brynn</strong> M. <strong>Evans</strong> & Ed H. Chi (email to request a copy)
Social Search<br />
thes<strong>is</strong> research, independent work<br />
Th<strong>is</strong> led to theories of social search<br />
and contributions to the broader<br />
community as a thought leader. I’ve<br />
written articles & given talks on the<br />
design implications of these<br />
theories.<br />
Research Projects<br />
Three Flavors of Social Search<br />
Wireframes<br />
Q<br />
Modeling Question-Answering<br />
Next Project ><br />
Search Phase<br />
EARLY MIDDLE LATE<br />
Users advance through phases of search (early, middle, and late) — characterized by different information<br />
needs, background knowledge, state & context. Three “flavors” of social search evolved from <strong>th<strong>is</strong></strong> insight<br />
(Full article: http://brynnevans.com/blog/2009/11/22/three-flavors-of-social-search-what-to-expect/).<br />
Collective Social Search:<br />
Pooled & aggregated data from<br />
many (anonymous) users. Value<br />
<strong>is</strong> in finding large-scale trends.<br />
Friend-Filtered Social Search: Collaborative Social Search:<br />
Content from your friends and<br />
wider “social circle.” Value <strong>is</strong> in<br />
the trustworthiness of <strong>th<strong>is</strong></strong> data.<br />
Searching together with a peer or<br />
colleague. Value <strong>is</strong> in the use of<br />
natural language with real people.
Social Search<br />
thes<strong>is</strong> research, independent work<br />
Th<strong>is</strong> <strong>is</strong> a series of wireframes that<br />
shows how (1) collective, (2)<br />
friend-filtered, and (3)<br />
collaborative social search features<br />
could be designed into a search UI.<br />
Research Projects<br />
Three Flavors of Social Search<br />
Wireframes<br />
Q<br />
Modeling Question-Answering<br />
Next Project ><br />
Th<strong>is</strong> d<strong>is</strong>plays a set of (1) search results, plus (2) related concepts and (3) people in the network who have<br />
searched for similar content or have created content (documents, blog posts, comments, etc) that may appear<br />
in the results. The content in the side panel (2, 3) <strong>is</strong> meant to be accessible, but not detracting from the main<br />
search result items.<br />
Design Principle:<br />
1 2<br />
Don’t interrupted users in their search, especially in the early stages. Keep social data passive and implicit<br />
(“related people” in sidebar; “social depth” & other social activity right in-line with search results).<br />
3
Social Search<br />
thes<strong>is</strong> research, independent work<br />
Th<strong>is</strong> <strong>is</strong> a series of wireframes that<br />
shows how (1) collective, (2) friendfiltered,<br />
and (3) collaborative social<br />
search features could be designed<br />
into a search UI.<br />
Research Projects<br />
Q<br />
Three Flavors of Social Search<br />
Wireframes<br />
Modeling Question-Answering<br />
Next Project ><br />
(1) Keywords in blue are “social terms” — the number next to the terms (e.g., 8) indicates how frequently <strong>th<strong>is</strong></strong><br />
term occurs in the content colleagues have shared or commented on.<br />
(2) “Social Depth” <strong>is</strong> a measure of how rich the social contributions and commentary <strong>is</strong> for <strong>th<strong>is</strong></strong> search result.<br />
(3) Ability to contact a person in the network directly (within the search interface) to ask a question, etc.<br />
Design Principle:<br />
2<br />
1 1<br />
Keep social data passive and implicit but in-line with search results. Allow users to ask questions of their<br />
friends & contacts without leaving the page.<br />
2<br />
3<br />
3
Social Search<br />
thes<strong>is</strong> research, independent work<br />
Th<strong>is</strong> <strong>is</strong> a series of wireframes that<br />
shows how (1) collective, (2)<br />
friend-filtered, and (3)<br />
collaborative social search features<br />
could be designed into a search UI.<br />
Research Projects<br />
Q<br />
Three Flavors of Social Search<br />
Wireframes<br />
Modeling Question-Answering<br />
Next Project ><br />
(1) Can send questions to colleagues directly in the search results page.<br />
(2) Click-and-drag a response or keyword from the IM box and add it to the search box.<br />
Design Principle:<br />
2<br />
Keep users on the page, even when they’re refining their search (based on an IM conversation, etc.)<br />
1
Social Search<br />
thes<strong>is</strong> research, independent work<br />
Finally, I extended <strong>my</strong> work to<br />
consider mathematical models and<br />
the likelihood that online versus<br />
real-world networks would actually<br />
produce answers to a user’s<br />
question!<br />
Research Projects<br />
Three Flavors of Social Search<br />
Wireframes<br />
Q<br />
Modeling Question-Answering<br />
Next Project ><br />
1<br />
3<br />
In addition to <strong>my</strong> research and design work on social search, I also used NetLogo to model questionanswering<br />
behavior — or the likelihood that searcher with a question will receive an answer from people in<br />
her network. The model takes into account (1) how many potential answerers are available, (2) how<br />
knowledgeable they are about the topic, how knowledgeable the searcher <strong>is</strong> about the topic, (3) how difficult<br />
the topic <strong>is</strong> to answer, and (4) the size and diversity of people in her online social networks. It also requires<br />
some degree of corroboration before a question <strong>is</strong> “answered” (e.g, questions need to receive more than two<br />
right answers to be sat<strong>is</strong>fied).<br />
Try it yourself: http://brynnevans.com/projects/netlogo/<br />
4<br />
2
Giftly Aug 2010 - Mar 2011<br />
Q
GIFTLY<br />
head of design, early stage start-up<br />
We progressed through about 5-6<br />
full site designs in 6 months. (The<br />
product focus changed considerably<br />
across these designs.). Two were<br />
built as prototypes.<br />
Select screenshots from the product<br />
progression are shown on the next<br />
few pages. I did all the v<strong>is</strong>ual and<br />
UX designs.<br />
Homepage design<br />
Browsing gift cards<br />
Customizing gift cards<br />
Sending a Thank-You note<br />
Checkout Flow<br />
Q<br />
< Previous Project Next Project ><br />
The Problem:<br />
Explain or demonstrate how Giftly gift cards work & then get users customizing<br />
their very own gift cards a.s.a.p – directly on the homepage.<br />
A Sketch:<br />
Th<strong>is</strong> sketch has a marketing banner at the top; an actual gift card and<br />
personalized note, which the user can directly edit from the homepage; along<br />
with example gift cards along the bottom. We decided <strong>th<strong>is</strong></strong> concept had too<br />
much going on in it!
GIFTLY<br />
head of design, early stage start-up<br />
We progressed through about 5-6<br />
full site designs in 6 months. (The<br />
product focus changed considerably<br />
across these designs.). Two were<br />
built as prototypes.<br />
Select screenshots from the product<br />
progression are shown on the next<br />
few pages. I did all the v<strong>is</strong>ual and<br />
UX designs.<br />
Homepage design<br />
Browsing gift cards<br />
Customizing gift cards<br />
Sending a Thank-You note<br />
Checkout Flow<br />
Q<br />
< Previous Project Next Project ><br />
The Problem:<br />
Explain or demonstrate how Giftly gift cards work & then get users customizing<br />
their very own gift cards a.s.a.p – directly on the homepage.<br />
A Sketch:<br />
Th<strong>is</strong> sketch focuses on showing the user how our gift cards are unique (showing<br />
a lot more text from the personalized note, and combining the personal note<br />
with places (eligible stores) where the gift card <strong>is</strong> good.) Description of how the<br />
gift cards work for recipients got moved to below the fold. We tried v<strong>is</strong>ually<br />
mocking up <strong>th<strong>is</strong></strong> concept, but it was, again, too busy.
GIFTLY<br />
head of design, early stage start-up<br />
We progressed through about 5-6<br />
full site designs in 6 months. (The<br />
product focus changed considerably<br />
across these designs.). Two were<br />
built as prototypes.<br />
Select screenshots from the product<br />
progression are shown on the next<br />
few pages. I did all the v<strong>is</strong>ual and<br />
UX designs.<br />
Homepage design<br />
Browsing gift cards<br />
Customizing gift cards<br />
Sending a Thank-You note<br />
Checkout Flow<br />
Q<br />
< Previous Project Next Project ><br />
The Problem:<br />
Explain or demonstrate how Giftly gift cards work & then get users customizing<br />
their very own gift cards a.s.a.p – directly on the homepage.<br />
A Solution:<br />
Th<strong>is</strong> became the live homepage of the e-commerce prototype (Fall 2010). The<br />
large rotating banner images always tested really well with users, so we left it in<br />
to evoke emotions and interest in our product. The cartoon illustration did the<br />
best job of describing how our gift cards work (compared to bullets, text, or<br />
describing the purchasing and redemption processes separately).
GIFTLY<br />
head of design, early stage start-up<br />
We progressed through about 5-6<br />
full site designs in 6 months. (The<br />
product focus changed considerably<br />
across these designs.). Two were<br />
built as prototypes.<br />
Select screenshots from the product<br />
progression are shown on the next<br />
few pages. I did all the v<strong>is</strong>ual and<br />
UX designs.<br />
Homepage design<br />
Browsing gift cards<br />
Customizing gift cards<br />
Sending a Thank-You note<br />
Checkout Flow<br />
Q<br />
< Previous Project Next Project ><br />
The Problem:<br />
Explain or demonstrate how Giftly gift cards work & then get users customizing<br />
their very own gift cards a.s.a.p – directly on the homepage.<br />
Another Solution:<br />
By 2011, we were relaunching the site with a focus on hand-made, customizable<br />
gift cards — all of which could be done from a clean & simple homepage. Th<strong>is</strong><br />
mock shows a single gift card; when clicked on, it becomes fully editable. Th<strong>is</strong><br />
was our first attempt at editing directly on the homepage!<br />
However, <strong>th<strong>is</strong></strong> was at the expense of additional copy and illustrations (for<br />
simplicity). We reverted to a plain text description of high-level questions<br />
about the product, rather than an continuing with illustrations of how it works.<br />
(Those questions could be addressed after users have customized their cards!)
GIFTLY<br />
head of design, early stage start-up<br />
Before the emphas<strong>is</strong> on usercustomized<br />
gift cards, we had an estore<br />
where users could browse gift<br />
cards that our staff had created.<br />
Homepage design<br />
Browsing gift cards<br />
Customizing gift cards<br />
Sending a Thank-You note<br />
Checkout Flow<br />
Q<br />
< Previous Project Next Project ><br />
The Problem:<br />
Let users dive in and browse for gift cards, while addressing questions of how<br />
our gift cards work. Most users would get half-way through the purchase<br />
process before realizing they didn’t understand how their recipients would be<br />
able to use the gift.<br />
A Solution:<br />
Th<strong>is</strong> mockup attempted to put How it Works in a bold, central spot on the page<br />
– with a link a short explanatory video. We also styled each gift card like a<br />
“baseball card” — when you clicked “details”, you’d see a longer description of<br />
where the gift card <strong>is</strong> good and how the recipient can redeem it (educating the<br />
buyer during the browsing process).
GIFTLY<br />
head of design, early stage start-up<br />
Before the emphas<strong>is</strong> on usercustomized<br />
gift cards, we had an estore<br />
where users could browse gift<br />
cards that our staff had created.<br />
Homepage design<br />
Browsing gift cards<br />
Customizing gift cards<br />
Sending a Thank-You note<br />
Checkout Flow<br />
Q<br />
< Previous Project Next Project ><br />
Another Solution:<br />
Th<strong>is</strong> became the live page for browsing gift cards in our prototype (Fall 2010).<br />
We didn’t have time to implement the “baseball card” idea, so we simplified<br />
that to more of a “notecard” theme. The description of each gift card <strong>is</strong><br />
expanded here: part education of how it works, part description of where the<br />
gift <strong>is</strong> good.<br />
The character in the right gutter space was added to break up the monotony of<br />
the page with a reminder to click and learn (in more detail) how the recipient<br />
redemption process works.<br />
Th<strong>is</strong> page’s main weakness was users couldn’t see at a glance what categories of<br />
gift cards we featured.
GIFTLY<br />
head of design, early stage start-up<br />
We eventually moved to usercreated<br />
& customized gift cards.<br />
The challenge then became: how to<br />
make the customizing of gift cards<br />
fun and easy, even though the user<br />
could create an infinite number of<br />
gift cards. (The real challenge was<br />
making it clear that our gift cards<br />
were good at any and many places,<br />
all in the same gift card).<br />
Homepage design<br />
Browsing gift cards<br />
Customizing gift cards<br />
Sending a Thank-You note<br />
Checkout Flow<br />
Q<br />
< Previous Project Next Project ><br />
1<br />
3<br />
Sketches:<br />
We explored a number of options for customizing gift cards: (1) through a form<br />
of progressive d<strong>is</strong>closure; (2) like an e-card; (3) with a progress indicator? We<br />
ended up using a blend of these ideas.<br />
2
GIFTLY<br />
head of design, early stage start-up<br />
We eventually moved to usercreated<br />
& customized gift cards.<br />
The challenge then became: how to<br />
make the customizing of gift cards<br />
fun and easy, even though the user<br />
could create an infinite number of<br />
gift cards. (The real challenge was<br />
making it clear that our gift cards<br />
were good at any and many places,<br />
all in the same gift card).<br />
Homepage design<br />
Browsing gift cards<br />
Customizing gift cards<br />
Sending a Thank-You note<br />
Checkout Flow<br />
Q<br />
< Previous Project Next Project ><br />
Implementation:<br />
One of the implementations that went live was <strong>th<strong>is</strong></strong> wizard/creator. It began<br />
with a quick introduction to clarify what the wizard will ask (many users were<br />
confused as to what came next and would either abort the wizard or m<strong>is</strong>s an<br />
important step before we added <strong>th<strong>is</strong></strong> screen).
GIFTLY<br />
head of design, early stage start-up<br />
We eventually moved to usercreated<br />
& customized gift cards.<br />
The challenge then became: how to<br />
make the customizing of gift cards<br />
fun and easy, even though the user<br />
could create an infinite number of<br />
gift cards. (The real challenge was<br />
making it clear that our gift cards<br />
were good at any and many places,<br />
all in the same gift card).<br />
Homepage design<br />
Browsing gift cards<br />
Customizing gift cards<br />
Sending a Thank-You note<br />
Checkout Flow<br />
Q<br />
< Previous Project Next Project ><br />
Implementation:<br />
Step 1: specify the recipient and the gift card (colors, font, title, amount). Users<br />
loved <strong>th<strong>is</strong></strong> step — and just loved customizing the card to look exactly like they<br />
wanted. The toolbox options (that look like speech bubbles) would only appear<br />
when you hovered on an input area, even though they’re both shown in <strong>th<strong>is</strong></strong><br />
mock.<br />
We added Steps 1-2-3-4 in the bottom right corner to provide context to users.<br />
(Th<strong>is</strong> mockup has a m<strong>is</strong>take — it’s showing that <strong>th<strong>is</strong></strong> <strong>is</strong> Step 2, even though it’s<br />
Step 1.)
GIFTLY<br />
head of design, early stage start-up<br />
We eventually moved to usercreated<br />
& customized gift cards.<br />
The challenge then became: how to<br />
make the customizing of gift cards<br />
fun and easy, even though the user<br />
could create an infinite number of<br />
gift cards. (The real challenge was<br />
making it clear that our gift cards<br />
were good at any and many places,<br />
all in the same gift card).<br />
Homepage design<br />
Browsing gift cards<br />
Customizing gift cards<br />
Sending a Thank-You note<br />
Checkout Flow<br />
Q<br />
< Previous Project Next Project ><br />
Implementation:<br />
Step 3: preview and confirm that the gift card and personal note <strong>is</strong> correct!<br />
(Steps 1-2-3-4 in the bottom right corner are incorrect here, as well — it’s<br />
showing that <strong>th<strong>is</strong></strong> <strong>is</strong> Step 2, even though it’s Step 3. The progress bar does not<br />
reflect the full progress up to <strong>th<strong>is</strong></strong> step, either.)
GIFTLY<br />
head of design, early stage start-up<br />
One feature that users loved was<br />
the ability to send a Thank-You<br />
note after receiving a gift card. In<br />
<strong>th<strong>is</strong></strong> example, the recipient chooses<br />
to send the Thank-You via<br />
Facebook, but the gift giver hadn’t<br />
authorized Facebook when he/she<br />
purchased the gift. The recipient<br />
has to choose which “Chr<strong>is</strong>” to send<br />
the Thank-You to.<br />
Homepage design<br />
Browsing gift cards<br />
Customizing gift cards<br />
Sending a Thank-You note<br />
Checkout Flow<br />
Q<br />
< Previous Project Next Project >
GIFTLY<br />
head of design, early stage start-up<br />
We went through about four<br />
versions of the check-out flow. It<br />
began as a 1-2-3 step process and<br />
we eventually streamlined it to one<br />
page (shown here). Even though<br />
there <strong>is</strong> more information on <strong>th<strong>is</strong></strong><br />
single page, it felt easier to fill out<br />
and complete checkout when all the<br />
requested items were on a one page<br />
rather than three.<br />
Homepage design<br />
Browsing gift cards<br />
Customizing gift cards<br />
Sending a Thank-You note<br />
Checkout Flow<br />
Q<br />
< Previous Project Next Project >
BOLT PETERS 2010<br />
Q
Bolt Peters<br />
social interaction designer, lead<br />
researcher<br />
Worked with approximately 20<br />
clients & interviewed 250 users.<br />
Responsibilities included:<br />
• Moderating a lot of user research<br />
sessions<br />
• Developing recommendations<br />
based on usability findings<br />
(including wireframes & written<br />
reports)<br />
• Facilitating brainstorming<br />
sessions with clients<br />
• Facilitating bodystorming with<br />
clients<br />
• Presenting findings and design<br />
recommendations to the client<br />
team(s)<br />
< Previous Project Next Project ><br />
Research on Levi’s early Facebook<br />
integration in their e-store.<br />
Combining 50 participants in selfmoderated<br />
sessions with 5 moderated<br />
(live) interviews, we worked with<br />
Facebook & Levi’s together to<br />
understand users’ social and brand<br />
expectations in the shopping<br />
experience.<br />
In-person research with 8 active<br />
traders to test Zecco’s new account<br />
application process. Ran a bodystorm<br />
with the entire product team to help<br />
clarify our research insights. Result:<br />
simpler, more intuitive design<br />
increased completion rate by 10%!<br />
Remote research with 10 participants<br />
on the on-boarding experience and<br />
overall UX of the Mindflash web app<br />
(for e-training). Subsequent<br />
brainstorming session with the entire<br />
company that resulted in simplifying<br />
the trainee test experience and<br />
making it easier to assess progress at<br />
a glance.<br />
Sybase wanted to know how well their<br />
lead generation process and<br />
navigation was working for users. We<br />
helped them identify key information<br />
that was m<strong>is</strong>sing or m<strong>is</strong>-represented<br />
to users, and suggested improvements<br />
that helped v<strong>is</strong>itors navigate through<br />
the site much more easily, resulting in<br />
a better user experience.<br />
Was involved in 3 projects with<br />
Autodesk, interviewing 8-12<br />
participants in each study about their<br />
experience: 1) using the single-sign on<br />
function; 2) in their purchase and<br />
checkout experience; and 3) with<br />
software for non-experts to layout and<br />
design their homes.<br />
Research on the browse and purchase<br />
experience of Sony TVs. Combining 50<br />
participants in self-moderated<br />
sessions with 5 moderated (live)<br />
interviews, we helped Sony put more<br />
control in the hands of their users<br />
help surface relevant information<br />
sooner.<br />
In-person research with 24<br />
participants on 2 separate Wiley<br />
training products. Brainstorming<br />
session with the Wiley UX team on<br />
our research findings that led to<br />
concrete recommendations for<br />
improving the customization of<br />
training courses and the completion<br />
rate by trainees.<br />
Ran 2 remote research “blitzes” with<br />
Blurb, both times live recruiting and<br />
interviewing users about their bookmaking<br />
experience (through the<br />
website and downloadable app).<br />
Worked with UX team at Blurb on<br />
practical application of the findings.<br />
Remote research with 10<br />
participants on the first-time<br />
experience on the website and the<br />
on-boarding experience of the<br />
desktop app. We helped to identify<br />
points of confusion for users and<br />
ways to improve the social<br />
experience so it would be<br />
competitive with other social apps.
ipad vs. iphone ux<br />
social interaction designer, lead<br />
researcher<br />
Th<strong>is</strong> <strong>is</strong> a study of the real-world<br />
usage of the iPad vs the iPhone in a<br />
business context to understand how<br />
things like design affordances and<br />
user expectations vary by device.<br />
I observed, recorded, & interviewed<br />
14 customers over three months at<br />
our neighborhood coffee shop,<br />
Sightglass, as they interacted with<br />
the Square mobile payments app<br />
(squareup.com). First study was in<br />
December 2009 with the iPhone;<br />
then a follow-up in April 2010 with<br />
the iPad.<br />
Full report: http://uxmag.com/<br />
technology/ipad-vs-iphone-a-userexperience-study<br />
< Previous Project Next Project ><br />
Side-by-side compar<strong>is</strong>on<br />
iPhone (left) versus iPad interactions (right). The larger<br />
screen and swivel base of the iPad made for highly social<br />
transactions — more conversations between employees and<br />
customers, but fewer tips (because of the awkwardness of<br />
tipping in a social context where the employee <strong>is</strong> present.)<br />
Highlight video:<br />
http://vimeo.com/11986446
gamestorming ongoing<br />
Q
gamestorming<br />
facilitator<br />
Gamestorming <strong>is</strong> about bringing<br />
structured games to brainstorming<br />
and ideation sessions to help<br />
increase productivity & innovation<br />
in a workgroup.<br />
Gamestorming activities that<br />
I’ve used in meetings:<br />
• bodystorming<br />
• Create-a-Poster<br />
• Personas<br />
• Challenge Cards<br />
• Party invitations<br />
• Brainwriting<br />
• Speedboat<br />
< Previous Project Next Project ><br />
The goal of gamestorming:<br />
The goal of gamestorming <strong>is</strong> to take unstructured, unanalyzed, or underdeveloped<br />
information & ideas, and turn it into structured, meaningful,<br />
and actionable concepts. Gamestorming activities can be used to<br />
brainstorming new ideas as well as refine ex<strong>is</strong>ting ideas.<br />
My gamestorming clients have included:<br />
April 26, 2010,<br />
San Franc<strong>is</strong>co, CA<br />
October 6, 2010,<br />
Miami,FL<br />
Nov 16-17, 2010,<br />
Tarrytown, NY<br />
April 1, 2011<br />
San Jose, CA
gamestorming<br />
facilitator<br />
Gamestorming <strong>is</strong> about bringing<br />
structured games to brainstorming<br />
and ideation sessions to help<br />
increase productivity & innovation<br />
in a workgroup.<br />
Gamestorming activities that<br />
I’ve used in meetings:<br />
• bodystorming<br />
• Create-a-Poster<br />
• Personas<br />
• Challenge Cards<br />
• Party invitations<br />
• Brainwriting<br />
• Speedboat<br />
< Previous Project Next Project ><br />
1 2<br />
3 4<br />
Bodystorming for thebetacup.com (July 2009):<br />
The challenge was to find a way to reduce the amount of paper cup waste in the<br />
world. Th<strong>is</strong> bodystorming activity let us quickly test out one solution and<br />
revealed several additional <strong>is</strong>sues that we must pay attention to.<br />
Watch the bodystorm: http://brynnevans.com/blog/2009/08/06/<br />
bodystorming-the-betacup/
The Betacup 2009 - 2010<br />
Q
The Betacup<br />
design strateg<strong>is</strong>t & jury member<br />
The betacup was a community<br />
initiative to reduce paper cup waste.<br />
I was involved in the project for one<br />
year, with the following<br />
contributions:<br />
• participated in ideation sessions<br />
• designed, prototyped, and ran a<br />
survey of people’s coffee drinking<br />
behavior<br />
• wrote several blog posts on the<br />
survey results and about the status<br />
of the betacup project in general<br />
• created a comic (“Papel the Paper<br />
Cup”) as part of the marketing<br />
campaign for the betacup. (View<br />
the whole comic: http://<br />
www.scribd.com/doc/22133391/<br />
Papel-the-Paper-Cup)<br />
• served as a jury member in the<br />
final design contest (over 400<br />
proposals submitted!)<br />
< Previous Project Next Project >
The Betacup<br />
design strateg<strong>is</strong>t & jury member<br />
The betacup was a community<br />
initiative to reduce paper cup waste.<br />
I was involved in the project for one<br />
year, with the following<br />
contributions:<br />
• participated in ideation sessions<br />
• designed, prototyped, and ran a<br />
survey of people’s coffee drinking<br />
behavior<br />
• wrote several blog posts on the<br />
survey results and about the status<br />
of the betacup project in general<br />
• created a comic (“Papel the Paper<br />
Cup”) as part of the marketing<br />
campaign for the betacup. (View<br />
the whole comic: http://<br />
www.scribd.com/doc/22133391/<br />
Papel-the-Paper-Cup)<br />
• served as a jury member in the<br />
final design contest (over 400<br />
proposals submitted!)<br />
< Previous Project Next Project >
“Muting” Twitter 2011<br />
Q
“Muting” Twitter<br />
personal design exerc<strong>is</strong>e<br />
As part of a personal design<br />
exerc<strong>is</strong>e, I considered how to add a<br />
“Muting” feature to Twitter, to hide<br />
certain kinds of tweets either<br />
temporarily or permanently.<br />
< Previous Project Next Project ><br />
Muting topics:<br />
In the search results area, there <strong>is</strong> an option to mute select topics (aka<br />
hashtags). The default option <strong>is</strong> to mute the given hashtag indefinitely;<br />
however, the user can enter Advanced Options to restrict the muting to a single<br />
individual and/or period of time.<br />
View all the screens that are part of the design: http://brynnevans.com/files/<br />
muting-twitter.html
“Muting” Twitter<br />
personal design exerc<strong>is</strong>e<br />
As part of a personal design<br />
exerc<strong>is</strong>e, I considered how to add a<br />
“Muting” feature to Twitter, to hide<br />
certain kinds of tweets either<br />
temporarily or permanently.<br />
< Previous Project Next Project ><br />
Muting people:<br />
The other common use case <strong>is</strong> muting individuals. I designed in two places to<br />
mute people: (1) on the status bar to mute for only 24 hours, and (2) under the<br />
“Settings” drop-down to mute indefinitely (by default) or for a limited period of<br />
time.<br />
View all the screens that are part of the design: http://brynnevans.com/files/<br />
muting-twitter.html<br />
1<br />
2
itdefender 2009-2010<br />
Q
BITDEFENDER<br />
user experience designer<br />
I worked with the BitDefender<br />
usability team to test and improve<br />
the ex<strong>is</strong>ting anti-virus installation<br />
process. I ran usability studies of<br />
the experience installing the 2009<br />
software; created wireframes and<br />
mockups for improvements; and<br />
tested the improved prototype.<br />
Q<br />
Software Installation Flow<br />
Campaign Management Website<br />
< Previous Project Next Project ><br />
The Problem:<br />
The installation process was difficult and frustrating for most users. Many<br />
would call help & support for guidance on technical questions that were<br />
actually unnecessary for a simple, basic installation of the anti-virus software.<br />
Solution #1:<br />
At first, we tried having users answer a few simple questions about how they<br />
want to interact with BitDefender. Depending on their answers, we’d present<br />
them with “Basic” vs. “Custom” (Advanced) installation options. In the end, we<br />
simply promoted the Basic install over a Custom install on the initial screen.
BITDEFENDER<br />
user experience designer<br />
I worked with the BitDefender<br />
usability team to test and improve<br />
the ex<strong>is</strong>ting anti-virus installation<br />
process. I ran usability studies of<br />
the experience installing the 2009<br />
software; created wireframes and<br />
mockups for improvements; and<br />
tested the improved prototype.<br />
Q<br />
Software Installation Flow<br />
Campaign Management Website<br />
< Previous Project Next Project ><br />
(The final solution — with v<strong>is</strong>ual design)<br />
The Problem:<br />
The installation process was difficult and frustrating for most users. Many<br />
would call help & support for guidance on technical questions that were<br />
actually unnecessary for a simple, basic installation of the anti-virus software.<br />
Solution #1:<br />
At first, we tried having users answer a few simple questions about how they<br />
want to interact with BitDefender. Depending on their answers, we’d present<br />
them with “Basic” vs. “Custom” (Advanced) installation options. In the end, we<br />
simply promoted the Basic install over a Custom install on the initial screen.
BITDEFENDER<br />
user experience designer<br />
I worked with the BitDefender<br />
usability team to test and improve<br />
the ex<strong>is</strong>ting anti-virus installation<br />
process. I ran usability studies of<br />
the experience installing the 2009<br />
software; created wireframes and<br />
mockups for improvements; and<br />
tested the improved prototype.<br />
Q<br />
Software Installation Flow<br />
Campaign Management Website<br />
< Previous Project Next Project ><br />
(The final solution — wireframe only)<br />
The Problem:<br />
The installation process was difficult and frustrating for most users. Many<br />
would call help & support for guidance on technical questions that were<br />
actually unnecessary for a simple, basic installation of the anti-virus software.<br />
Solution #2:<br />
Additionally, we changed the configuration options so that users were adding<br />
and editing options in screens that looked just like the real software UI. Th<strong>is</strong><br />
helped educate users on where these options could be edited later on, and gave<br />
them an introduction to the interface during the installation process.
BITDEFENDER<br />
user experience designer<br />
I worked with the BitDefender<br />
usability team to test and improve<br />
the ex<strong>is</strong>ting anti-virus installation<br />
process. I ran usability studies of<br />
the experience installing the 2009<br />
software; created wireframes and<br />
mockups for improvements; and<br />
tested the improved prototype.<br />
Q<br />
Software Installation Flow<br />
Campaign Management Website<br />
< Previous Project Next Project ><br />
(The final solution — with v<strong>is</strong>ual design for viewing/editing product in installation flow)<br />
The Problem:<br />
The installation process was difficult and frustrating for most users. Many<br />
would call help & support for guidance on technical questions that were<br />
actually unnecessary for a simple, basic installation of the anti-virus software.<br />
Solution #2:<br />
Additionally, we changed the configuration options so that users were adding<br />
and editing options in screens that looked just like the real software UI. Th<strong>is</strong><br />
helped educate users on where these options could be edited later on, and gave<br />
them an introduction to the interface during the installation process.
BITDEFENDER<br />
user experience designer<br />
I also worked with the social media<br />
team at BitDefender to create a site<br />
where they could view and manage<br />
all the current social media efforts<br />
by the company. I gathered<br />
requirements, and went through<br />
two iterations of wireframes and<br />
mockups.<br />
Q<br />
Software Installation Flow<br />
Campaign Management Website<br />
< Previous Project Next Project ><br />
(The site before redesign)<br />
The Problem:<br />
Create an internal website that becomes the dashboard where all members of<br />
the social media team can access information about current campaigns.<br />
Including: campaign name and description, log<strong>is</strong>tical details, links to any<br />
relevant URLs and internal project docs, monthly analytics, comments, etc.
BITDEFENDER<br />
user experience designer<br />
I also worked with the social media<br />
team at BitDefender to create a site<br />
where they could view and manage<br />
all the current social media efforts<br />
by the company. I gathered<br />
requirements, and went through<br />
two iterations of wireframes and<br />
mockups.<br />
Q<br />
Software Installation Flow<br />
Campaign Management Website<br />
< Previous Project Next Project ><br />
The Landing Page:<br />
The landing page provides an at-a-glance view of the latest campaigns and<br />
social media activity, with location & contact info for each campaign (which<br />
was important to the global team). It also lets the team see how well the<br />
Campaign Objectives are being met. Th<strong>is</strong> helped managers assess how well the<br />
objectives were being met by the current live initiatives.
BITDEFENDER<br />
user experience designer<br />
I also worked with the social media<br />
team at BitDefender to create a site<br />
where they could view and manage<br />
all the current social media efforts<br />
by the company. I gathered<br />
requirements, and went through<br />
two iterations of wireframes and<br />
mockups.<br />
Q<br />
Software Installation Flow<br />
Campaign Management Website<br />
< Previous Project Next Project ><br />
Campaign Template:<br />
The campaign template page has detailed information about the campaign, how<br />
well it’s doing, who’s involved, with an area for comments below.
LIKES IRL 2010-2011<br />
Q
Likes IRL<br />
designer and co-creator<br />
I designed and ran <strong>th<strong>is</strong></strong> site from<br />
July 2010 – March 2011. We made<br />
and sold stickers of the Facebook<br />
Like button. (But were not affiliated<br />
with Facebook!)<br />
I did all the v<strong>is</strong>ual and UX design.<br />
• ~$2000 in revenue<br />
< Previous Project Next Project >
Likes IRL<br />
designer and co-creator<br />
I designed and ran <strong>th<strong>is</strong></strong> site from<br />
July 2010 – March 2011. We made<br />
and sold stickers of the Facebook<br />
Like button. (But were not affiliated<br />
with Facebook!)<br />
I did all the v<strong>is</strong>ual and UX design.<br />
• ~$2000 in revenue<br />
< Previous Project Next Project >
UX FOR GOOD Jan 2011<br />
Q
UX FOR GOOD<br />
designer<br />
January 28-29, 2011<br />
Chicago, Illino<strong>is</strong><br />
I was one of 40 UX designers<br />
invited to the weekend’s design<br />
thinking exerc<strong>is</strong>e, to come up with<br />
breakthrough solutions to some of<br />
the most vexing social challenges. I<br />
stepped up early in the weekend as<br />
a team leaders, running the<br />
ideation sessions, facilitating our<br />
d<strong>is</strong>cussions, and working to both<br />
develop ideas and narrow down the<br />
scope of possibilities. I also helped<br />
prepare, and design, & present our<br />
final presentation at the evening<br />
banquet.<br />
< Previous Project Next Project ><br />
The problem<br />
My team was tackling community mental health — or how our society treats and<br />
talks about mental health d<strong>is</strong>orders. Specifically, we worked with the Adler<br />
School of Psychology to develop changes to the curriculum, the graduate<br />
program overall (e.g., the way it recruits, trains, and supports students and<br />
faculty), and how graduates can get more involved in the community at large.
UX FOR GOOD<br />
designer<br />
January 28-29, 2011<br />
Chicago, Illino<strong>is</strong><br />
I was one of 40 UX designers<br />
invited to the weekend’s design<br />
thinking exerc<strong>is</strong>e, to come up with<br />
breakthrough solutions to some of<br />
the most vexing social challenges. I<br />
stepped up early in the weekend as<br />
a team leaders, running the<br />
ideation sessions, facilitating our<br />
d<strong>is</strong>cussions, and working to both<br />
develop ideas and narrow down the<br />
scope of possibilities. I also helped<br />
prepare, and design, & present our<br />
final presentation at the evening<br />
banquet.<br />
< Previous Project Next Project ><br />
Deliverables<br />
We developed 15-20 solutions in 3 key problem areas: 1) how to empower<br />
Adler's graduate students, 2) how to encourage faculty to develop and embrace<br />
the Adlerian philosophy, and 3) how to bring change to community<br />
organizations (pr<strong>is</strong>ons, clinics, schools, politics, etc). We presented these to our<br />
client, the President of the Adler School, who helped us identify 2–3 of the most<br />
prom<strong>is</strong>ing ideas. We fleshed out these top recommendations in our final<br />
presentation deck.<br />
Final presentation: http://www.slideshare.net/bmevans/community-mental-<br />
health.
Comics for your enjoyment<br />
Q