Your SlideShare is downloading. ×
V.Erb Portfolio
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

V.Erb Portfolio


Published on

1 Like
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Veronica ErbUser experience design and research
  • 2. Wireframesfrom sketches to interactive prototypes
  • 3. 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 Full document make it to production, it was valuable to consider in sketch form.
  • 4. 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 Full document than if we had used a computer or a whiteboard.
  • 5. Wireframes: vector images of registration Challenge: Register to Participate in Discussions Create a registration process Name that would ease account Who are you? Select your role creation for Rwanda Education Where are you? Select your school Commons users, who are Which website do you use most often? inexperienced with online Gmail MySpace accounts. Yahoo! Mail Facebook Flickr AOL I do not use any of these websites. Solution: Continue 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 Page 2 screens, to ease completion. Full document
  • 6. 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 Full document prototypes in usability testing, but it also eased the transition to the production build.
  • 7. Diagramsother than wireframes
  • 8. Site map: simple and dynamic Proposed NACI Sitemap -- 24 June 2009 Challenge: Communicate the information About NAEPP About NACI What is Asthma? Managing Asthma architecture of the National Asthma Control Initiative Clinical Practice Recommendations Enhancing Implementation Individual resources can be linked from the rest of the site according to relevance. website to the client. Learn: Educate Yourself Teach: Educate Your Audience Exchange: Collaborate with Others National Partners Program Local Champions Program Demonstration Projects Solution: NAEPP Materials Inhaled Corticosteroids Asthma Action Plans Asthma Severity Browse by Subject Asthma Control !"#$%&" Follow-up Visits ($)*"& All resources can be accessed through Environmental Exposures any of the three “Browse by” branches. Disparities Providers This simple site map, which Browse by Target Audience Patients & Families Schools and Childcare Healthcare Policy/Finance pulled most of its content from Coalition Leaders & Community Advocates Action Kits a mind mapping tool, Slide Decks Browse by Type Newsletters Handouts provided a way to visualize and discuss the architecture of Full document the in-progress site.
  • 9. Flowchart: issue tracker process start reporter Challenge: NEED INFO NEW Help members on the Rwanda Education Commons team tracker manager understand the processing of NEED INFO NEEDS LOE tickets in our issue tracker. WORKING AS INTENDED lead developer NEEDS CANNOT REPRODUCE Solution: ASSIGNMENT project WILL NOT FIX I created a ow chart that manager n o w o r k re q ui re d documented the process that NEED INFO ASSIGNED tickets would go through and DUPLICATE the roles which would have owner i s s u e a l re a dy t d ra c ke the responsibility to move the ACCEPTED ticket through each stage. NEED INFO WORK FIXED end STARTED ve d WORK i s s u e re s o l COMPLETE reporter Full document
  • 10. Concept model: development cycle Liferay Theme Development Cycle Challenge: ( start ) Edit CSS les Explain to my Rwandan to position and style elements counterpart the preferred Edit Velocity les process for developing and to create/alter HTML elements publishing themes for Liferay Portal. Zip saved les as .war format Solution: View results in Firefox and IE6 I created this simple concept Upload .war le model to map each step ( nish ) to development site needed to create and deploy a theme. When I explained the Full document process, we spoke though VoIP and walked through the model step by step.
  • 11. Concept model: social media notes The POST Method and other Social Media Notes Challenge: Who are you targeting? What are they already using? People Assess your audiences social activities How are they using it? Who do they already interact with? Where will they want to talk to you? Share a social media strategy planning process with team. Listening (you monitor) Talking (you publish) Objectives Decide what you want to accomplish Energizing (you connect others) Supporting (you provide tools) Embracing (you collaborate) Solution: In addition to talking my team Strategy What will change? How will you know it changed? How will your organization change in response? through the POST Method at a Plan for how their lives will change team meeting, I handed out Blogs Bookmarks this diagram to capture the Multimedia Technology What technology or technologies will help you reach your customers to bring about that change? General Social Networks Professional Social Networks Moblie and Twitter essential parts of the process. Games and Virutal Worlds Decide which technology to use Combined Strategy Take advantage of automation when strategic Use the audience’s language Coordinate social media and traditional media e orts Follow the technology’s social norms SOCIAL MEDIA Measure through multiple metrics Focus on building a community Manage expectations within organization Be human! Know how and when to respond to negative responses Keep an acceptable use policy Not a quick x Monitor the channels for related discussions from the InsideNGO Social Media Roundtable on June 17, 2009 || Notes by Veronica Erb Full document
  • 12. Researchusability testing, card sorting, and more
  • 13. Research report: usability testing Challenge: Document the second set of research for the Rwanda Education Commons. Solution: This quick and simple document served as a way for us to record the results of the usability tests. Its list of changes and observed behaviors provided just the level of context our team needed. Full document
  • 14. Competitive review: online communities Challenge: !"#$"%&(&)*+",-."//&0+12&3/"+&456"+(,7"& Find ways to design an online community for teachers. 8%&-"/&)*+",-."//&+".,6"&6&!9:;& F903#9)F9;<G$==)<&G)HI/)9<5)G2EE;&()<3G2&1=8)<19)=(;25=)(0)J)<)52J;<&()0&$2&)K(2&#) %$<1)E0;)(90=)<3G2&1=8)<&G)<19)K3=()%;052G)<)5<;2(L)0E)10&(&()2&)<=2$L)<11==2J$)K<&&;") F9)!<L)F9;<G$==)G5$0%=)10KK3&2(L)<&G)G$25;=)10&(&()1<&)9$%)HI/)10&=2G;)90!)(0) G5$0%)2(=)0!&)10KK3&2(L)<&G)G$25;)2(=)0!&)10&(&(") Solution: <*,6&$/&)*+",-."//;& F9;<G$==)2=)<&)0&$2&)G=2#&)10KK3&2(L)=3%%0;(G)JL)%<2G)=(<EE")MKJ;=)0E)(9)10KK3&2(L) 2&(;<1()2&)<)5<;2(L)0E)!<L=8)E;0K)=3JK2((2&#)G=2#&=)E0;)%;);52!)(0)9$%2&#)<19)<&0(9;)$<;&) Though the Threadless &!)G=2#&)(19&2N3=)(0)G2=13==2&#)(9)$<(=()K052);$<=")F9;<G$==)=(<EE)KKJ;=)%;052G) 13=(0K;)=3%%0;(8)19<$$&#)(9)10KK3&2(L)!2(9)G=2#&)10&(=(=8)<&G)3$(2K<($L)G12G)!9219) audience of the designers is G=2#&=)<;)%;2&(G") quite different from our group 8%&-"/&)*+",-."//&-&$6;& F9)2&(;<1(25)%0;(20&)0E)F9;<G$==O!9<()J=();$<(=)(0)HI/O1<&)J)=&)2&)(9)E0;3K")F9) of teachers, the Threadless E0;3K)10KJ2&=)G2=13==20&=8)J$0#=8)&!=8)<&G)K3$(2KG2<)2&(0)<)=2&#$)=L=(K")) website provided inspiration. :56"56&)=>"/& This overview highlighted F9;<G$===)G$25;=)=2P)(L%=)0E)10&(&()(9;03#9)2(=)E0;3K)=L=(K")F903#9)HI/)K<L)&0()G2;1($L) 2K%$K&()<19)10&(&()(L%)3=G)JL)F9;<G$==8)(9)$2=()J$0!)=3##=(=)<);03#9$L)N325<$&()HI/) features and an approach from 10&(&()(L%)E0;)<19)F9;<G$==)10&(&()(L%") +" Q$0#=) which the Rwanda Education Q$0#=)<;)%0=(=)JL)2&G252G3<$)10KK3&2(L)KKJ;=")F0%21=)<;)0E(&);$<(G)(0)(=92;() G=2#&8)J3()1<&)<$=0)J)(<&#&(2<$$L);$<(G)0;)5&)0EE)(0%21")D0=(=)1<&)J)<)E!) $2&=)0;)$0&#8)0;)=5;<$)%<;<#;<%9=)!2(9)2K<#=)0;)KJGGG)52G0=")Q$0#=)9<5)(9) Commons could learn. 0%(20&)0E)J2&#)E3;(9;)1$<==2E2G)<=R)S&;<$8)4;()T)>=2#&8)F2%=)T)F;21U=8)0;)D;0V1(=") HI/)N325<$&(R)>2=13==20&=) !!!"#$%"&()*)+,-.)/0&&1(213()45)678),(9):$00;)*)7<=92&#(0&8)>/)?@@@A)*)BC4) D<#)+)0E).) Full document
  • 15. Research design: consensus on a logo GLP Logo Redesign -‐ Activity Challenge: In order to represent the many aspects of GLP, we asked our designers to create Select a new logo for the logo comps focused on three GLP concepts: Global Learning Portal. global connections learning and knowledge technology Solution: 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 This activity encouraged team 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 members to think about their responses will help ground our group discussion. preferences before we met. The kits were intentionally 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. hands-on: they included 2. Pick the three most promising logos. Choose based on the graphical printed logo comps, element you believe has the most potential to represent our the key GLP concepts. Text content and style can be more easily changed later. instructions, and a glue stick. 3. Paste the three chosen logos on the attached sheet in the indicated locations, By the time we met, not only in any order. had each member already 4. Write down three nouns and three adjectives describing each logo, in the space provided. Choose the first words that come to mind. voiced their responses to the designs, but we had also achieved a consensus. Full document
  • 16. 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
  • 17. Veronica ErbUser experience design and research