UX Meets Agile Development in CaringBridge 5.0
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

UX Meets Agile Development in CaringBridge 5.0

  • 3,885 views
Uploaded on

UxPA MN Event: 1/10/13 | Topic: UX Meets Agile Development in CaringBridge 5.0 ...

UxPA MN Event: 1/10/13 | Topic: UX Meets Agile Development in CaringBridge 5.0

CaringBridge UX team presented their experience working on a large agile project and how they used innovative activities to better integrate UX design and research into the agile development process. You can also learn more about the nonprofit organization and its mission!

Presenters:
Grant Novey, UI Designer
Josh Carroll, UX Research Analyst
Tammy Ablan, UX Manager

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,885
On Slideshare
3,716
From Embeds
169
Number of Embeds
7

Actions

Shares
Downloads
31
Comments
0
Likes
7

Embeds 169

http://eduvirtual.cuc.edu.co 113
http://lanyrd.com 27
http://mrssandral.blogspot.com.es 11
https://twitter.com 8
http://dev.lanyrd.org 7
http://tequierotantotantocosii.blogspot.com 2
http://mrssandral.blogspot.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • Charity Navigator, an independent charity evaluator, states that CaringBridge consistently executes its mission in a fiscally responsible way and outperforms most other charities in America-differentiating it from its peers and demonstrating to the public it is worthy of their trust.Nearly 90 percent of all funding comes from individuals and families who use CaringBridge. Donations can be made at www.caringbridge.org/donate.
  • Mehring’s vision was to create a service that would allow people to connect and show support to ones they love.
  • Even when WiFi access is not available, CaringBridge can be accessed on any web-enabled smart phone.
  • Visual Designer, UI Designer, UX analyst. Each have areas of expertise/focus on projects, but work together to support the end result
  • Our problem was that we wanted to create a caring social network. We were tasked by leadership to be more social. We wanted to solve our users problem of needing more meaningful interactions, being able to connect people to others and other interests – which is something we’ve been hearing from our users for a long time
  • A lot of how we were Agile was based on Anders Ramsay’s approach/presentation “Designing with Agile: Fast, Effective UX Methods that Work.” We think about this as two week sprints where we define, design and (mostly) build features (stories). We use little up front documentation and collaborate as a team, which makes it easy to change course and iterate on ideas.
  • We documented our goals, vision and other drivers in the project charter. We spent a couple days working on these before starting any design activities.R1 was a prototype phase with these goals: be innovative, be adaptable to change, include usersWeek long kick off work session.
  • We documented our goals, vision and other drivers in the project charter. We spent a couple days working on these before starting any design activities.R1 was a prototype phase with these goals: be innovative, be adaptable to change, include usersWeek long kick off work session.
  • The goal of the ideation clearinghouse is to capture the final imagined product by tapping into everyone’s creative mind.
  • Sketching time box 8 minute time box everyone in the room sketches sketch individually there are no rulesthis is a research activityCritique 2 minute round robin followed by open discussion discussion includes feedback from everyone else, take notes and attach to sketch look for and work to resolve vision differences
  • The team was made up of cross-organizational roles from technology, marketing, customer care, program strategy and fund development We spent time explaining what each of us would contribute to the project. These cutouts show what our roles are and have hung in our project space since the project began.
  • Because agile is a intensely collaborative approach we designate a workspace for our activities. This didn’t mean we completely abandoned our own workstations but we knew we had an area to work as a team.
  • Documentation for this project was a group effort. The responsibility was performed by BA’s, Software Engineers, UX Designers and Copy Writers. We stored our documentation on our internal network using Confluence. We also had a local instance of Twitter Bootstrap installed on our servers modified using our branding guidelines.
  • One goal was to be open with staff and get staff excited about the project. One way we did that was to showcase our work as we went along (which aligns well with Agile because it’s all about producing software iteratively). Staff could experience our work process and the prototype as it was being built.
  • A large part of the innovation station was the internal micro site, where staff could demo the prototype, learn about the project and leave feedback for the team. We recorded feedback in a survey and kept track of staff trends related to perception of the project.
  • These are just some of the resources and activities we performed as part of the agile process.
  • We’ve had company personas which have been used to describe who our users are in general. Obviously we wanted to keep our users habits, needs and characteristics at the front when designing. These personas are very broad (and a little old). Our first task with them was to decide if they could apply to our project. We had a team work session to go through each persona (we had 6) and determine what applied, what was missing and what we like to investigate further
  • That session produced this type of document that helped us better understand and focus on our users. It also helped us understand the limitations of the personas and actually sparked a parallel project to do more ethnographic research and create customer experience maps
  • This is a whole separatetopic that can’t be covered today, but it’s a good example of how we changed course and iterated (into a new project)
  • Our purpose here was to give our sprint stories a little more context and more of a user experience feel. We wanted to capture the motivation and needs behind a user. Since a lot of what we produced was an improved and expanded CaringBridge, the scenarios were really similar to what we’ve known from other project. This didn’t require a lot of new research and we were able to adapt and extrapolate from our work with personas.This went well when we set aside 30 minutes at the beginning of a sprint to go through the exercise. As the project moved along and we felt the time crunch we stopped doing this as a team and some times just skipped it all together.This was an activity that was done at the beginning of a sprint. It was intended to guide the rest of the work for the sprint. We focused on just what was pertinent for that sprint, not on the whole productThis was a useful activity that we buried a lot or glossed over. It would have been more useful had was scheduled 30 minutes at the beginning of each sprint for understanding users’ motivations and behaviors
  • This process is very experience-focused. The goal is to get to the source of the story, what the real problem is and explore the many possible solutions.
  • Thin slices can be broken down into 3 areas:Easy path – something that is very common for your usersMiddle path – a mix between an easy and complex taskComplex path – this could be an edge case, something that rarely happensBy slicing stories out you can see where there are similarities and differences in user actions. This helps to come up with a solution that aligns well with the user story.
  • Focus is on functionality and usability. There are times when working together makes sense and other times when it doesn’t. The project space and dedicated project time allowed for that interaction to occur.
  • We made the decision that we were going to have users in every sprint to try out what we had at that point and iterate based on their feedback. This was based on the idea of “User Fridays” (Anders Ramsay) where you have users in to validate/give feedback on your sprint stories.We started out with a lo-fiAxure prototype and in subsequent sprints used our actual software in a development environmentWe did this as a team activity. We decided what we wanted to test as a team. Then I wrote the test script and moderated the sessions. Sometimes we used Morae to observe more a standard usability test and sometimes we had 2 or 3 of us sit with a user and interview them about using the prototype. We always noted our findings on our project wiki and used the notes to make changes and ideate for future sprints
  • After we had users in we would pull all of our notes together and summarize the feedback and next steps. This helped us plan for future sprints and also keep track of what to test next and what feedback we’d already received.
  • We had a couple difficulties with this approach to user feedback 1) it’s difficult to find users to come in for 30 to 60 minutes and 2) it’s difficult to find new participants. This helped us start exploring how to get remote usability testing going at CB. This was another project that grew out of the CB 5.0 and we eventually purchased a license for Loop11 and have been able to do quick user research studies as needed. This was a way to validate what we’ve done or answer questions that we couldn’t solve with what we had or needed a way to move a decision forward
  • Agile supports trailing documentation but you should do what’s right for your team. For us documentation was an on-going process and wasn’t limited to just BA’s. SE’s, usability analysts, UI designers, visual designers, and project managers also document.
  • Page tables were introduced to help document page requirements for software engineers. This document started out mainly for copy writing purposes but grew into other areas such as QA testing requirements and business rules.
  • Be realistic with what can be accomplished in a sprintWe were most successful when we took on what we could accomplish in a two week sprint. This allowed us to use the methods and activities that we know would lead to a quality user experience and meet our other project goals. When we over committed in a sprint we were rushed to just get something done.Critique guidelinesThe team should understand how to critique wireframes and designs. Implementing critique guidelines helps to minimize design by committee and makes meetings more productive.Do a retrospect every sprint and follow through on feedbackWith so much going on in a project the retrospect is easy to dismiss. I can’t stress enough on the importance of this activity. Talking about what went well and what didn’t will help improve the next sprint. The ultimate goal is to become better as a team and produce better working software.

Transcript

  • 1. UX Meets AgileDevelopment inCaringBridge 5.0 January 10, 2013 1/10/2013 www.caringbridge.org
  • 2. About CaringBridge. 1/10/2013 www.caringbridge.org
  • 3. Our mission.To amplify the love, hope and compassion inthe world, making each health journey easier. 1/10/2013 www.caringbridge.org
  • 4. Our history• CaringBridge is a nonprofit founded in 1997• First and most widely used “caring” social network• Funded by a grateful, engaged community 1/10/2013 www.caringbridge.org
  • 5. We offer multiple ways to care CaringBridge Sites Post health updates and receive support. SupportPlanner Organize day-to-day support and other helpful tasks 1/10/2013 www.caringbridge.org
  • 6. Where our heart is• Available at no cost• Protected from intrusive advertising• Multiple privacy settings to everyone’s needs• Available online 24/7, accessible to anyone, anywhere 1/10/2013 www.caringbridge.org
  • 7. Sona Mehring, CaringBri dge Founder & CEO “My original idea was simple. I wanted to connect family and friends facing a health challenge with loved ones, because care and concern can be transformative and healing.”1/10/2013 www.caringbridge.org
  • 8. Half a million peopleconnect throughCaringBridgeeach day. That’s a lot of love. 1/10/2013 www.caringbridge.org
  • 9. We’re everywhereCaringBridge can be accessed through any onlineor mobile connection. Mobile website iPhone and Android apps provide easy access to loved ones on the go. Notifications Family and friends may receive an email or text message when a new journal entry is made. 1/10/2013 www.caringbridge.org
  • 10. Our impact • More than 500,000 people connect through CaringBridge every day. • 46 million people visited CaringBridge.org in 2012. • More than 408,000 Sites and SupportPlanners have been created since the organization was founded in 1997. • More than 118,000 families and individuals made a charitable gift to CaringBridge in 2012. • More than 1,100 volunteers 1/10/2013 www.caringbridge.org
  • 11. Spread the word. Show caring for others. 1/10/2013 www.caringbridge.org
  • 12. Amplify love, hope and compassion• Tell someone about CaringBridge• Start a Site or SupportPlanner for someone who needs support• Connect with CaringBridge via Facebook or Twitter• Become an Amplifier (amplifierhub.caringbridge.org)• Support the mission by donating (caringbridge.org/donate) 1/10/2013 www.caringbridge.org
  • 13. Meet the UX Team. 1/10/2013 www.caringbridge.org
  • 14. UX Team Tammy Ablan UX Manager Caryn Pagel Josh CarrollVisual Designer UX Analyst Bridget Suddendorf Grant Novey UI Designer UI Designer 1/10/2013 www.caringbridge.org
  • 15. User Experience at CaringBridge 1/10/2013 www.caringbridge.org
  • 16. UX meets AgileDevelopment inCaringBridge 5.0 1/10/2013 www.caringbridge.org
  • 17. Agenda1. CaringBridge Today2. CaringBridge 5.0 Demo3. Project Kickoff4. The Sprint and UX Activities5. Lessons Learned 1/10/2013 www.caringbridge.org
  • 18. CaringBridge Today 1/10/2013 www.caringbridge.org
  • 19. CaringBridge 5.0 Demo 1/10/2013 www.caringbridge.org
  • 20. Project Kickoff 1/10/2013 www.caringbridge.org
  • 21. Defined Agile• 2 week sprints• Focus on solving a problem• Collaborate• Be flexible• Little up front documentation 1/10/2013 www.caringbridge.org
  • 22. Develop a Project Charter 1/10/2013 www.caringbridge.org
  • 23. Project Charter (continued) 1/10/2013 www.caringbridge.org
  • 24. A Few of Our Project Goals• Deliver a working prototype by 10/19 that includes a user experience across multiple devices.• Be innovative• Be "open" internally - clear, creative and consistent communication with CB staff (e.g. video blog) 1/10/2013 www.caringbridge.org
  • 25. Ideation Clearinghouse 1/10/2013 www.caringbridge.org
  • 26. Ideation Clearinghouse Our process• Facilitator drives the activity• Focus on a problem• As many iterations as you’d like; let the group decide• 8 minute time box• 2 minute round robin critique• 5 minute retrospective
  • 27. Ideation Clearinghouse Results 1/10/2013 www.caringbridge.org
  • 28. Defined Roles 1/10/2013 www.caringbridge.org
  • 29. Defined Workspace 1/10/2013 www.caringbridge.org
  • 30. Defined Documentation Wiki and style guide
  • 31. Innovation Station 1/10/2013 www.caringbridge.org
  • 32. Internal Micro Site 1/10/2013 www.caringbridge.org
  • 33. Time to Sprint 1/10/2013 www.caringbridge.org
  • 34. What did we do?• Design Studio• Personas• User Stories• User Scenarios• Cross-functional Pairing• Formative User Research (Usability)• Documentation 1/10/2013 www.caringbridge.org
  • 35. Design Studio Leverage team’s knowledge and creativity
  • 36. Design Studio Our process• Facilitator drives the activity• Focus on a problem• 3-4 iterations; last iteration is a group sketch• 8 minute time box• 2 minute round robin critique• 5 minute retrospective 1/10/2013 www.caringbridge.org
  • 37. Design Studio Results: a shared vision 1/10/2013 www.caringbridge.org
  • 38. Personas Patty Patient “Having cancer changes your perspective on what’s important – the way you view life. CaringBridge has allowed me to focus on getting better and has provided me the support I need.”Bio Overview Patty’s SituationAge: 51 Patty was diagnosed with stage II breast cancer. She was stunned, as she hadn’t been sick a dayEducation: High School degree in her life before that. Her prognosis is good, and her CaringBridge website has helped herand some college credits cope with the situation as she begins her journey towards wellness.Occupation: Receptionist at St.Charles Humane Society Patty’s NeedsHH Income: $25,000  To get well and feel “normal” againFamily: Divorced with twoadult children (Sara and Melody)  To feel loved and supported by friends and familyand a dog (Rutabaga)  To respond to all of the “well wishes”, questions and notes from friends and familyResidence: St. Charles, IL  Help getting everyday things done, from doctor’s visits to household choresHobbies: taking care of animals  To spend time on “stuff that matters” – reunited friendships, her faith, and of course familyof all kinds (loves dogs) Patty’s StoryTechnology Usage February 16, 2009 is the day that Patty’s life changed forever – she recalls it vividly. “I found a• Not very “tech savvy” – just lump in my breast a few weeks earlier and was waiting for the test results. When myenough to get by for work, home oncologist told me I had breast cancer, I was dumbfounded. I hadn’t been sick a day in my life, I(though not scared by 1/10/2013technology) thought there must be some mistake.” www.caringbridge.org• Has a cell phone, but only uses (continued, p. 2)
  • 39. Patty Patient “Having cancer changes your perspective on what’s important – the way you view life. CaringBridge has allowed me to focus on getting better and has provided me the support I need.” Bio stats may be outdatedBio Overview Patty’s SituationAge: 51 Patty was diagnosed with stage II breast cancer. She was stunned, as she hadn’t been sick a dayEducation: High School degreeand some college credits in her life before that. Her prognosis is good, and her CaringBridge website has helped her cope with the situation as she begins her journey towards wellness.Occupation: Receptionist at St.Charles Humane Society Patty’s NeedsHH Income: $25,000  To get well and feel “normal” againFamily: Divorced with twoadult children (Sara and Melody)  To feel loved and supported by friends and familyand a dog (Rutabaga)  To respond to all of the “well wishes”, questions and notes from friends and familyResidence: St. Charles, IL  Help getting everyday things done, from doctor’s visits to household choresHobbies: taking care of animals  To spend time on “stuff that matters” – reunited friendships, her faith, and of course familyof all kinds (loves dogs) Get educated about her health conditionsTechnology Usage Connect with people in similar situations• Not very “tech savvy” – just Patty’s Storyenough to get by for work, home February 16, 2009 is the day that Patty’s life changed forever – she recalls it vividly. “I found a(though not scared by lump in my breast a few weeks earlier and was waiting for the test results. When mytechnology) oncologist told me I had breast cancer, I was dumbfounded. I hadn’t been sick a day in my life, I• Has a cell phone, but only uses thought there must be some mistake.”it sporadically (continued, p. 2)• Dial-up Internet access 1/10/2013Technology may be out of date www.caringbridge.org
  • 40. Customer Experience Maps 1/10/2013 www.caringbridge.org
  • 41. User ScenariosVince wants to be able to help Patty, but doesn’twant to bother Patty or Abby by calling them. Hefollows Patty’s community on CaringBridge to seehow she’s doing, but he’s not comfortable leaving along guestbook message. He wants to help Pattyout in tangible ways, but only if he knows what sheneeds. 1/10/2013 www.caringbridge.org
  • 42. User Stories Experience/outcome focused
  • 43. User Stories Our process• Focus on a problem• Explore the range of possible solutions• Generate user stories• Break down the story / scenario based• Focus on thin slices 1/10/2013 www.caringbridge.org
  • 44. Cross-Functional Pairing Continuous ideation, production, & feedback 1/10/2013 www.caringbridge.org
  • 45. Cross-Functional Pairing Our process• Wireframe/sketch to code• Focus on functionality and usability, not design• UX and software engineer’s unite 1/10/2013 www.caringbridge.org
  • 46. Iterative Usability Testing 1/10/2013 www.caringbridge.org
  • 47. Iterative Usability Testing 1/10/2013 www.caringbridge.org
  • 48. Other User Research 1/10/2013 www.caringbridge.org
  • 49. Trailing Documentation 1/10/2013 www.caringbridge.org
  • 50. Page Tables • Business rules • QA testing requirements • Page metrics • Event tracking requirements • Open graph meta tags 1/10/2013 www.caringbridge.org
  • 51. Lessons Learned• Be realistic with what can be accomplished in a sprint• Do user testing every sprint• Every team activity needs a strong facilitator• Establish critique guidelines• Do a retrospect every sprint and follow through on feedback 1/10/2013 www.caringbridge.org
  • 52. Agile ReferencesUIE Podcast “Anders Ramsay – Applying Agile Values toUX”: www.uie.com/brainsparks/2012/01/11/anders-ramsay- applying-agile-values-to-ux/Anders Ramsay write about Agile and UX frequently at:AndersRamsay.comAgile Dictionary: agiledictionary.comAgile Manifesto: agilemanifesto.org 1/10/2013 www.caringbridge.org
  • 53. Thank YouUI Designer UX ManagerGrant Novey Tammy Ablangnovey@caringbridge.org tablan@caringbridge.org@gdnovey @tammyablanUX Research AnalystJosh Carrolljcarroll@caringbridge.org@joshcarroll01 1/10/2013 www.caringbridge.org