SlideShare ist ein Scribd-Unternehmen logo
1 von 17
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
                      Full document
                                      make it to production, it was
                                      valuable to consider in sketch
                                      form.
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.
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
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.
Diagrams
other than wireframes
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.
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
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.
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 audience's 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
Research
usability testing, card sorting, and more
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
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$'==)G'5'$0%=)10KK3&2(L)<&G)G'$25';=)10&('&()1<&)9'$%)HI/)10&=2G';)90!)(0)
        G'5'$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")M'KJ';=)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)K'KJ';=)%;052G')
        13=(0K';)=3%%0;(8)19<$$'&#')(9')10KK3&2(L)!2(9)G'=2#&)10&('=(=8)<&G)3$(2K<('$L)G'12G')!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$(2K'G2<)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)K'KJ';=")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;)'KJ'GG'G)52G'0=")Q$0#=)9<5')(9')
                                                                                                                          Commons could learn.
                       0%(20&)0E)J'2&#)E3;(9';)1$<==2E2'G)<=R)S'&';<$8)4;()T)>'=2#&8)F2%=)T)F;21U=8)0;)D;0V'1(=")
                       HI/)'N325<$'&(R)>2=13==20&=)


        !!!"#$%"&'()*)+,-.)/0&&'1(213()45')678),(9):$00;)*)7<=92&#(0&8)>/)?@@@A)*)BC4)               D<#')+)0E).)




                                                                                                          Full document
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
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

Weitere ähnliche Inhalte

Ähnlich wie V.Erb Portfolio

Skype Code Sandbox Presentation Materials
Skype Code Sandbox Presentation MaterialsSkype Code Sandbox Presentation Materials
Skype Code Sandbox Presentation Materialsjulieharpring
 
UIE Virtual Seminar - From PDFs to HTML Prototyping
UIE Virtual Seminar - From PDFs to HTML PrototypingUIE Virtual Seminar - From PDFs to HTML Prototyping
UIE Virtual Seminar - From PDFs to HTML PrototypingUIEpreviews
 
Using web 2.0 tools in the classroom for the web
Using web 2.0 tools in the classroom for the webUsing web 2.0 tools in the classroom for the web
Using web 2.0 tools in the classroom for the webLjubica Ruzinska
 
Programr overview2
Programr overview2Programr overview2
Programr overview2_programr
 
TTYL IRL :) : Strategies and Tools for Remote Library Teams
TTYL IRL :) : Strategies and Tools for Remote Library TeamsTTYL IRL :) : Strategies and Tools for Remote Library Teams
TTYL IRL :) : Strategies and Tools for Remote Library Teamsteaguese
 
User Interface design of mobile based project sharing platform
User Interface design of mobile based project sharing platformUser Interface design of mobile based project sharing platform
User Interface design of mobile based project sharing platformPratik Padhi
 
Creating Cloud Communities
Creating Cloud CommunitiesCreating Cloud Communities
Creating Cloud CommunitiesPeter Coffee
 
Live@edu + Dreamspark + MSDNAA
Live@edu + Dreamspark + MSDNAALive@edu + Dreamspark + MSDNAA
Live@edu + Dreamspark + MSDNAAMohab El-Shishtawy
 
Prototypes, Prototypes, Prototypes
Prototypes, Prototypes, PrototypesPrototypes, Prototypes, Prototypes
Prototypes, Prototypes, PrototypesShane Morris
 
Virtual Pair Programming
Virtual Pair ProgrammingVirtual Pair Programming
Virtual Pair ProgrammingESUG
 
Presentation of 3rd Semester C++ Project
Presentation of 3rd Semester C++ ProjectPresentation of 3rd Semester C++ Project
Presentation of 3rd Semester C++ ProjectChandan Gupta Bhagat
 
Five steps to learn what your customers (really) want
Five steps to learn what your customers (really) wantFive steps to learn what your customers (really) want
Five steps to learn what your customers (really) wantLane Goldstone
 
DigitalAppsPres Key
DigitalAppsPres KeyDigitalAppsPres Key
DigitalAppsPres KeyHRS
 
Top 20 Design & Wireframing Tools
Top 20 Design & Wireframing ToolsTop 20 Design & Wireframing Tools
Top 20 Design & Wireframing ToolsMopinion
 
eClassrooms Come of Age?
eClassrooms Come of Age?eClassrooms Come of Age?
eClassrooms Come of Age?Alan Wimberley
 
Making Drupal 7 Simple to Use for Everyone
Making Drupal 7 Simple to Use for EveryoneMaking Drupal 7 Simple to Use for Everyone
Making Drupal 7 Simple to Use for EveryoneAcquia
 

Ähnlich wie V.Erb Portfolio (20)

Skype Code Sandbox Presentation Materials
Skype Code Sandbox Presentation MaterialsSkype Code Sandbox Presentation Materials
Skype Code Sandbox Presentation Materials
 
UIE Virtual Seminar - From PDFs to HTML Prototyping
UIE Virtual Seminar - From PDFs to HTML PrototypingUIE Virtual Seminar - From PDFs to HTML Prototyping
UIE Virtual Seminar - From PDFs to HTML Prototyping
 
Using web 2.0 tools in the classroom for the web
Using web 2.0 tools in the classroom for the webUsing web 2.0 tools in the classroom for the web
Using web 2.0 tools in the classroom for the web
 
Programr overview2
Programr overview2Programr overview2
Programr overview2
 
TTYL IRL :) : Strategies and Tools for Remote Library Teams
TTYL IRL :) : Strategies and Tools for Remote Library TeamsTTYL IRL :) : Strategies and Tools for Remote Library Teams
TTYL IRL :) : Strategies and Tools for Remote Library Teams
 
User Interface design of mobile based project sharing platform
User Interface design of mobile based project sharing platformUser Interface design of mobile based project sharing platform
User Interface design of mobile based project sharing platform
 
Creating Cloud Communities
Creating Cloud CommunitiesCreating Cloud Communities
Creating Cloud Communities
 
Poster - Tweaking HCI methods for m-desing
Poster - Tweaking HCI methods for m-desingPoster - Tweaking HCI methods for m-desing
Poster - Tweaking HCI methods for m-desing
 
Live@edu + Dreamspark + MSDNAA
Live@edu + Dreamspark + MSDNAALive@edu + Dreamspark + MSDNAA
Live@edu + Dreamspark + MSDNAA
 
Prototypes, Prototypes, Prototypes
Prototypes, Prototypes, PrototypesPrototypes, Prototypes, Prototypes
Prototypes, Prototypes, Prototypes
 
Virtual Pair Programming
Virtual Pair ProgrammingVirtual Pair Programming
Virtual Pair Programming
 
Chcpr
ChcprChcpr
Chcpr
 
Presentation of 3rd Semester C++ Project
Presentation of 3rd Semester C++ ProjectPresentation of 3rd Semester C++ Project
Presentation of 3rd Semester C++ Project
 
Five steps to learn what your customers (really) want
Five steps to learn what your customers (really) wantFive steps to learn what your customers (really) want
Five steps to learn what your customers (really) want
 
DigitalAppsPres Key
DigitalAppsPres KeyDigitalAppsPres Key
DigitalAppsPres Key
 
Porfolio
PorfolioPorfolio
Porfolio
 
Top 20 Design & Wireframing Tools
Top 20 Design & Wireframing ToolsTop 20 Design & Wireframing Tools
Top 20 Design & Wireframing Tools
 
eClassrooms Come of Age?
eClassrooms Come of Age?eClassrooms Come of Age?
eClassrooms Come of Age?
 
Firesite Chat Klemen 18 March 2010
Firesite Chat Klemen 18 March 2010Firesite Chat Klemen 18 March 2010
Firesite Chat Klemen 18 March 2010
 
Making Drupal 7 Simple to Use for Everyone
Making Drupal 7 Simple to Use for EveryoneMaking Drupal 7 Simple to Use for Everyone
Making Drupal 7 Simple to Use for Everyone
 

Mehr von Veronica Erb

How and Why to Start Sketchnoting, UX Week 2012
How and Why to Start Sketchnoting, UX Week 2012How and Why to Start Sketchnoting, UX Week 2012
How and Why to Start Sketchnoting, UX Week 2012Veronica Erb
 
Organizing Sketchnotes — MidwestUX 2012
Organizing Sketchnotes — MidwestUX 2012Organizing Sketchnotes — MidwestUX 2012
Organizing Sketchnotes — MidwestUX 2012Veronica Erb
 
Let's Sketchnote — MidwestUX 2012
Let's Sketchnote — MidwestUX 2012Let's Sketchnote — MidwestUX 2012
Let's Sketchnote — MidwestUX 2012Veronica Erb
 
Why and How to Start Sketchnoting, IA Summit 2012
Why and How to Start Sketchnoting, IA Summit 2012Why and How to Start Sketchnoting, IA Summit 2012
Why and How to Start Sketchnoting, IA Summit 2012Veronica Erb
 
UX Research in the Real World: Stories from Rwanda (Big Redux 2011)
UX Research in the Real World: Stories from Rwanda (Big Redux 2011)UX Research in the Real World: Stories from Rwanda (Big Redux 2011)
UX Research in the Real World: Stories from Rwanda (Big Redux 2011)Veronica Erb
 
UX Research in the Real World: Stories from Rwanda (MidwestUX 2011)
UX Research in the Real World: Stories from Rwanda (MidwestUX 2011)UX Research in the Real World: Stories from Rwanda (MidwestUX 2011)
UX Research in the Real World: Stories from Rwanda (MidwestUX 2011)Veronica Erb
 
Email subject tags
Email subject tagsEmail subject tags
Email subject tagsVeronica Erb
 

Mehr von Veronica Erb (7)

How and Why to Start Sketchnoting, UX Week 2012
How and Why to Start Sketchnoting, UX Week 2012How and Why to Start Sketchnoting, UX Week 2012
How and Why to Start Sketchnoting, UX Week 2012
 
Organizing Sketchnotes — MidwestUX 2012
Organizing Sketchnotes — MidwestUX 2012Organizing Sketchnotes — MidwestUX 2012
Organizing Sketchnotes — MidwestUX 2012
 
Let's Sketchnote — MidwestUX 2012
Let's Sketchnote — MidwestUX 2012Let's Sketchnote — MidwestUX 2012
Let's Sketchnote — MidwestUX 2012
 
Why and How to Start Sketchnoting, IA Summit 2012
Why and How to Start Sketchnoting, IA Summit 2012Why and How to Start Sketchnoting, IA Summit 2012
Why and How to Start Sketchnoting, IA Summit 2012
 
UX Research in the Real World: Stories from Rwanda (Big Redux 2011)
UX Research in the Real World: Stories from Rwanda (Big Redux 2011)UX Research in the Real World: Stories from Rwanda (Big Redux 2011)
UX Research in the Real World: Stories from Rwanda (Big Redux 2011)
 
UX Research in the Real World: Stories from Rwanda (MidwestUX 2011)
UX Research in the Real World: Stories from Rwanda (MidwestUX 2011)UX Research in the Real World: Stories from Rwanda (MidwestUX 2011)
UX Research in the Real World: Stories from Rwanda (MidwestUX 2011)
 
Email subject tags
Email subject tagsEmail subject tags
Email subject tags
 

V.Erb Portfolio

  • 1. Veronica Erb User experience design and research
  • 2. Wireframes from 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.
  • 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 audience's 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. Research usability 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$'==)G'5'$0%=)10KK3&2(L)<&G)G'$25';=)10&('&()1<&)9'$%)HI/)10&=2G';)90!)(0) G'5'$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")M'KJ';=)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)K'KJ';=)%;052G') 13=(0K';)=3%%0;(8)19<$$'&#')(9')10KK3&2(L)!2(9)G'=2#&)10&('=(=8)<&G)3$(2K<('$L)G'12G')!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$(2K'G2<)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)K'KJ';=")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;)'KJ'GG'G)52G'0=")Q$0#=)9<5')(9') Commons could learn. 0%(20&)0E)J'2&#)E3;(9';)1$<==2E2'G)<=R)S'&';<$8)4;()T)>'=2#&8)F2%=)T)F;21U=8)0;)D;0V'1(=") 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 Erb User experience design and research