Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Portfolio

 Portfolio

Veronica Erb

May 02, 2011
Tweet

More Decks by Veronica Erb

Other Decks in Design

Transcript

  1. Veronica Erb
    User experience design and research

    View full-size slide

  2. Wireframes
    from sketches to interactive prototypes

    View full-size slide

  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
    make it to production, it was
    valuable to consider in sketch
    form.
    Full document

    View full-size slide

  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
    than if we had used a
    computer or a whiteboard.
    Full document

    View full-size slide

  5. 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

    View full-size slide

  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
    prototypes in usability testing,
    but it also eased the transition
    to the production build.
    Full document

    View full-size slide

  7. Diagrams
    other than wireframes

    View full-size slide

  8. 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

    View full-size slide

  9. 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

    View full-size slide

  10. 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

    View full-size slide

  11. 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

    View full-size slide

  12. Research
    usability testing, card sorting, and more

    View full-size slide

  13. 'LVFRYHULHVIURPXVDELOLW\WHVWLQJ
    2FWREHU1HZ
    &KDQJHVDQGEHKDYLRUWKDWLQGLFDWHGFKDQJH

    Ɣ 'LVSOD\FKDQJH&KHFNER[HVLQ6XEMHFWVVHOHFWLRQUHJQHHGWREHGLVSOD\HGDV
    RU!?
    ż NQRZQDIHZSDUWLFLSDQWVKDGVRPHWURXEOH
    Ɣ 7H[WFKDQJH³6WDUWP\VHVVLRQ´WR³6LJQLQ´VLJQHGRXWYLHZRQDOOSDJHVUHJ
    ż S
    Ɣ )HDWXUHDGGLWLRQLQIRZKHQVLJQHGLQ³:HOFRPHVRDQGVR9LHZSURILOH6LJQRXW´
    ż SZDVQ¶WVXUHZKHUHWKHOLQNHGHPDLODGGUHVVOHG
    Ɣ 7H[WFKDQJH³&UHDWHD*PDLODFFRXQW´WR³-RLQWKHFRPPXQLW\´
    ż 3FRQIXVLRQRYHUZKDW*PDLOLV
    Ɣ )HDWXUHDGGLWLRQ³3ULQWWKLVGRFXPHQW´RQ:RUGGRFDQG3')SDJHV
    ż LQDGYHUWHQWO\OHIWRXWRILQLWLDOPRFNQRWLFHGZLWKS
    Ɣ )HDWXUHUHPRYDOUHPRYHJUDGHOHYHOILOWHUIURPOLEUDU\KRPH
    ż SWKRXJKWWKDWWKHILOWHUZDVIRUWKHLWHPVRQWKHOHIW
    Ɣ 7H[WFKDQJH³6LJQLQQDPH´WR³'HVLUHGVLJQLQQDPH´
    ż SRU
    ż S³P\QDPHRUP\HPDLOQDPH"´
    Ɣ &RQWHQWDGGLWLRQOLVWFXUUHQWO\YLHZHGGRFXPHQWDVZHOODVUHODWHGGRFXPHQWVWRROEDU
    ż SGRXEOHFOLFNDFWHGDVWZRVLQJOHFOLFNVWDNLQJXVHUWRLQWHQGHGGHVWLQDWLRQ
    DQGEDFN
    Ɣ 7H[WFKDQJH³*XLGH´WR³7HDFKHU¶V*XLGH´IRUYLGHRFRPSDQLRQJXLGH
    ż SZDVQ¶WVXUHZKDWWKH³*XLGH´ZDV
    Ɣ %DFNHQGXVHUQDPHDIWHUWKH#V\PEROQHHGVWREHSXOOHGRXWUHJ
    ż SW\SHGXVHUQDPH#LQORJLQQDPHEODQN
    Ɣ 7H[WFKDQJH³&KRRVHSDVVZRUG´WR³&UHDWHSDVVZRUG´UHJ
    ż SJRRGVXJJHVWLRQRQKHUSDUW³FKRRVHPHDQVWRVHOHFWIURPRSWLRQV´
    Ɣ )XQFWLRQDOLW\FKDQJH0DNHLFRQVFOLFNDEOH
    ż SRQO\FOLFNHGRQLFRQVQRWRQOLQNVIRUGRFXPHQWV
    Ɣ %DFNHQGDFFHSWERWKXVHUQDPHDQGXVHUQDPH#GRPDLQIRRIURP2SHQ,'VHOHFWLRQ
    ż SW\SHGLQRQO\KHUXVHUQDPHDQGQRWWKHIXOOHPDLODGGUHVV
    Ɣ 7H[WFKDQJH³7U\WRW\SHWKHFKDUDFWHUV\RXVHHLQWKHSLFWXUHEHORZ´WR³7U\WRW\SH
    WKHOHWWHUV\RXVHHEHORZ´
    ż SGLGQ¶WXQGHUVWDQGZKDW³FKDUDFWHUV´ZHUHDQGVDLGWKDWWKRVHZHUHZRUGVQRW
    SLFWXUHV
    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

    View full-size slide

  14. !!!"#$%"&'()*)+,-.)/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;'%$<1')E0;)(90=')<3G2'&1'=8)<&G)'<19)K3=()%;052G')<)5<;2'(L)0E)10&('&()2&)'<=2$L)<11'==2J$')K<&&';")
    F9')!G'5'$0%)2(=)0!&)10KK3&2(L)<&G)G'$25';)2(=)0!&)10&('&(")
    <*,6&$/&)*+",-."//;&
    F9;'2&(';<1()2&)<)5<;2'(L)0E)!&'!)G'=2#&)('19&2N3'=)(0)G2=13==2)(9')$<('=()K052');'$'<='")F9;'13=(0K';)=3%%0;(8)19<$$'')(9')10KK3&2(L)!2(9)G'=2#&)10&('=(=8)<&G)3$(2K<('$L)G'12G')!9219)
    G'=2#&=)<;')%;2&('G")
    8'%&-'"/&)*+",-."//&-'&$6;&
    F9')2&(';<1(25')%0;(20&)0E)F9;'E0;3K)10KJ2&'=)G2=13==20&=8)J$0#=8)&'!=8)<&G)K3$(2K'G2<)2&(0)<)=2$')=L=('K"))
    :'56"56&)=>"/&
    F9;'2K%$'K'&()'<19)10&('&()(L%')3='G)JL)F9;'10&('&()(L%')E0;)'<19)F9;'+" Q$0#=)
    x
    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)0;)='5';<$)%<;<#;<%9=)!2(9)2K<#'=)0;)'KJ'GG'G)52G'0=")Q$0#=)9<5')(9')
    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(=")
    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

    View full-size slide

  15. 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

    View full-size slide

  16. &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

    View full-size slide

  17. Veronica Erb
    User experience design and research

    View full-size slide