Veronica Erb User experience design and research 

Wireframes from sketches to interactive prototypes 

Wireframes: sketching password recovery Challenge: Experiment with ways to accommodate users who were unaccustomed to online accounts. Solution: I started with sketched wireframes that were informal enough to comfortably discuss new ideas. Though this particular screen could never make it to production, it was valuable to consider in sketch form. Full document 

Wireframes: sticky notes and collaboration Challenge: Teach information architecture concepts to my web counterpart in Rwanda. Solution: When he visited us in DC, we built sticky note wireframes together. The physicality and exibility of the written sticky notes and printed page templates made the activity more interactive and inviting than if we had used a computer or a whiteboard. Full document 

Continue Register to Participate in Discussions Gmail Yahoo! Mail Flickr MySpace Facebook AOL Which website do you use most often? I do not use any of these websites. Name Who are you? Where are you? Select your school Select your role Page 2 Wireframes: vector images of registration Challenge: Create a registration process that would ease account creation for Rwanda Education Commons users, who are inexperienced with online accounts. Solution: So we could focus more easily on the microcopy and question format, I created the registration wireframes outside of the context of the rest of the site. We separated questions into multiple screens, to ease completion. Full document 

Wireframes: interactive HTML prototype Challenge: Test new Rwanda Education Commons functionality with users before the changes were made to the live site. Solution: I moved from tweaking vector image wireframes to creating interactive prototypes with HTML, CSS, and basic JavaScript. By using front-end technologies, we were not only able to use these prototypes in usability testing, but it also eased the transition to the production build. Full document 

Diagrams other than wireframes 

Proposed NACI Sitemap -- 24 June 2009 Disparities Environmental Exposures Follow-up Visits Asthma Control Asthma Severity Asthma Action Plans Inhaled Corticosteroids NAEPP Materials Providers Handouts Newsletters Slide Decks Action Kits Browse by Type Coalition Leaders & Community Advocates Healthcare Policy/Finance Schools and Childcare Patients & Families Browse by Target Audience Browse by Subject 5HVRXUFHV Demonstration Projects Local Champions Program National Partners Program Exchange: Collaborate with Others Teach: Educate Your Audience Learn: Educate Yourself *HW,QYROYHG Enhancing Implementation Clinical Practice Recommendations $VWKPD*XLGHOLQHV Managing Asthma What is Asthma? 8QGHUVWDQGLQJ$VWKPD About NACI About NAEPP $ERXW8V 1$&,+RPH !"#$%&'" ($)*"& Individual resources can be linked from the rest of the site according to relevance. All resources can be accessed through any of the three “Browse by” branches. Site map: simple and dynamic Challenge: Communicate the information architecture of the National Asthma Control Initiative website to the client. Solution: This simple site map, which pulled most of its content from a mind mapping tool, provided a way to visualize and discuss the architecture of the in-progress site. Full document 

FIXED DUPLICATE WILL NOT FIX CANNOT REPRODUCE WORKING AS INTENDED NEED INFO NEED INFO NEED INFO NEED INFO reporter WORK COMPLETE WORK STARTED ACCEPTED owner ASSIGNED project manager NEEDS ASSIGNMENT lead developer NEEDS LOE tracker manager NEW reporter issue resolved issue already tracke d no work required end start Flowchart: issue tracker process Challenge: Help members on the Rwanda Education Commons team understand the processing of tickets in our issue tracker. Solution: I created a ow chart that documented the process that tickets would go through and the roles which would have the responsibility to move the ticket through each stage. Full document 

Edit Velocity les to create/alter HTML elements Edit CSS les to position and style elements Zip saved les as .war format Upload .war le to development site View results in Firefox and IE6 ( start ) ( nish ) Liferay Theme Development Cycle Concept model: development cycle Challenge: Explain to my Rwandan counterpart the preferred process for developing and publishing themes for Liferay Portal. Solution: I created this simple concept model to map each step needed to create and deploy a theme. When I explained the process, we spoke though VoIP and walked through the model step by step. Full document 

People Objectives Strategy Technology Listening (you monitor) Talking (you publish) Energizing (you connect others) Supporting (you provide tools) Embracing (you collaborate) Who are you targeting? What are they already using? How are they using it? Who do they already interact with? Where will they want to talk to you? What will change? How will you know it changed? How will your organization change in response? What technology or technologies will help you reach your customers to bring about that change? Assess your audience's social activities Decide what you want to accomplish Plan for how their lives will change Decide which technology to use Coordinate social media and traditional media e orts Take advantage of automation when strategic Manage expectations within organization Keep an acceptable use policy Focus on building a community Be human! Monitor the channels for related discussions Follow the technology’s social norms Use the audience’s language Know how and when to respond to negative responses Measure through multiple metrics The POST Method and other Social Media Notes SOCIAL MEDIA Blogs Bookmarks Multimedia General Social Networks Professional Social Networks Moblie and Twitter Games and Virutal Worlds Combined Strategy Not a quick x from the InsideNGO Social Media Roundtable on June 17, 2009 || Notes by Veronica Erb Concept model: social media notes Challenge: Share a social media strategy planning process with team. Solution: In addition to talking my team through the POST Method at a team meeting, I handed out this diagram to capture the essential parts of the process. Full document 

Research usability testing, card sorting, and more 

'LVFRYHULHVIURPXVDELOLW\WHVWLQJ 2FWREHU1HZ

!!!"#$%"&'()*)+,-.)/0&&'1(213()45')678),(9):$00;)*)7<=92&#(0&8)>/)?@@@A)*)BC4) D<#')+)0E).) !"#$"%&'(&)*+",-."//&0'+12&3/"+&456"+(,7"& 8'%&-'"/&)*+",-."//&+".,6"&6'&!9:;& F903#9)F9;'"/& F9;''=2#&8)F2%=)T)F;21U=8)0;)D;0V'1(=") x HI/)'N325<$'&(R)>2=13==20&=) Competitive review: online communities Challenge: Find ways to design an online community for teachers. Solution: Though the Threadless audience of the designers is quite different from our group of teachers, the Threadless website provided inspiration. This overview highlighted features and an approach from which the Rwanda Education Commons could learn. Full document 

4. Write down three nouns and three adjectives describing each logo, in the space provided. Choose the first words that come to mind. 3. Paste the three chosen logos on the attached sheet in the indicated locations, in any order. 2. Pick the three most promising logos. Choose based on the graphical element you believe has the most potential to represent our the key GLP concepts. Text content and style can be more easily changed later. 1. Remove the nine logos from the attached envelope. Familiarize yourself with them: look them over one at a time, or spread them out on a flat space. The following exercise is intended to promote our focus on what the logo says about GLP, instead of how we feel about the logo. Take 15 minutes to complete the following steps, and then return to Veronica or Sonja. The prompts aim to help each of us gather our thoughts before we meet, and the gathered responses will help ground our group discussion. global connections learning and knowledge technology In order to represent the many aspects of GLP, we asked our designers to create logo comps focused on three GLP concepts: GLP Logo Redesign -‐ Activity Research design: consensus on a logo Challenge: Select a new logo for the Global Learning Portal. Solution: This activity encouraged team members to think about their preferences before we met. The kits were intentionally hands-on: they included printed logo comps, instructions, and a glue stick. By the time we met, not only had each member already voiced their responses to the designs, but we had also achieved a consensus. Full document 

&DUG6RUW3ODQIRU*RRJOH*URXSV $GGUHVV1DPLQJ&RQYHQWLRQ 6XPPDU\ :HKDYHFUHDWHGDILUVWGUDIWRID*RRJOH*URXSHPDLODGGUHVVQDPLQJFRQYHQWLRQ(DFKHPDLO DGGUHVVZLOOKDYHDSUHIL[WKDWKHOSVWRRUJDQL]HWKHPDQ\H[LVWLQJDQGSRWHQWLDO*RRJOH*URXSV LQWRPHDQLQJIXOFDWHJRULHV  $FDUGVRUWHQDEOHXVWRWHVWWKHV\VWHPZLWK$('HPSOR\HHV7KLVVRUWLVSDUWLDOO\RSHQLWLV GHVLJQHGQRWRQO\WRWHVWZKDWZHKDYHIRUHVHHQEXWDOVRWKHZD\VRXUSDUWLFLSDQWVLQWHQGWR XVH*RRJOH*URXSV  6HWVRIWKUHHHPSOR\HHVZLOOZRUNWRJHWKHUWRSODFH*URXSQDPHVXQGHUFDWHJRULHVIURPWKH FRQYHQWLRQ7KH\ZLOOEHLQYLWHGWRH[SODLQWKHPHDQLQJRIWKHFDWHJRULHVDVZHOODVWRVXJJHVW WKHLURZQFDWHJRULHVDWWKHHQGRIWKHH[HUFLVH 5HVHDUFKTXHVWLRQV Ɣ $UHWKHRUJFKDUWEDVHGSUHIL[HVLPPHGLDWHO\XQGHUVWDQGDEOH" Ɣ 'RWKHSUHVFULEHGFDWHJRULHVKDYHWKHEHVWQDPHVWKH\FDQ" Ɣ +RZPXFKGLVWLQFWLRQGRWKHQRQRUJFKDUWFDWHJRULHVQHHG"'RZHXVHRQH³JHQHULF´ SUHIL[RUVKRXOGWKHUHEHVHYHUDOVPDOOHUFDWHJRULHV" Ɣ ,ID³FRPPXQLW\RISUDFWLFH´FDWHJRU\H[LVWVZKDWVKRXOGLWEHFDOOHG" *RDOVIRUWKHFRQYHQWLRQ  0DNHLWHDV\WRILQGWKHULJKW*RRJOH*URXSWRMRLQ  (QFRXUDJHFURVVFHQWHUFROODERUDWLRQ  0DNHLWHDV\WRUHPHPEHU*URXSHPDLODGGUHVVHV  $YRLGHPDLODGGUHVVFROOLVLRQV Research plan: naming convention card sort Challenge: Prevent collisions between Google Groups and email addresses when AED switched from Novell GroupWise mail to Gmail. Solution: I developed a naming convention and tested it with users through a card sort. The research allowed me to re ne the system into a convention that prevented collisions and enabled users to nd and remember the Groups they sought. Full document 

Veronica Erb User experience design and research