this is my portfolio - Brynn Evans

this is my portfolio - Brynn Evans this is my portfolio - Brynn Evans

brynnevans.com
from brynnevans.com More from this publisher

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

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!