A UX design process for building an open-source plugin

This talk is about bringing the principles of user experience design together with the development team to build a stronger and better solution. I talk about the benefits of user experience design early in the development process and the difficulties we faced implementing the changing user flow into our plugin. Additionally, I show the audience how we used personas, user testing and several use cases based on real life examples using the open-source plugin User Feedback.

https://github.com/wearerequired/user-feedback

Transcript

1. A UX DESIGN PROCESS
   FOR BUILDING AN OPEN-SOURCE PLUGIN
   Silvan Hagen, required+

   @neverything
   

   View Slide

2. ABOUT ME
   WordPress Developer
   

   View Slide

3. WAIT WHAT?
   Why is a developer giving a UX Talk?
   

   View Slide

4. THE PLUGIN
   Idea behind it, why open source it, why use UX
   

   View Slide

5. USER FEEDBACK
   Easy communication: Support, Change Requests
   

   View Slide

6. View Slide

7. THE TEAM WHO BUILT IT
   Pascal, Karin, Silvan
   

   View Slide

8. THE PROCESS
   Design and Development
   

   View Slide

9. WHO DID WE DESIGN FOR?
   Our clients as the base for our Personas
   

   View Slide

10. PERSONAS
    Identifying Personas
    

    View Slide

11. • male, 39
    • contacts us through e-mail
    • very active on social media
    • WP User Role (Editor)
    • Seamless publishing
    • Quick replies on issues
    Rolf Nidegger
    Community Manager/Content Marketer
    Photo by:https://www.flickr.com/photos/argonne
    

    View Slide

12. • female, 55
    • contacts us through calls
    • not active on social media
    • WP User Role (Administrator)
    • Evaluates team performance
    • Checks costs
    Anna Schneider
    Head of Content Marketing
    Photo by: https://www.flickr.com/photos/richardskoonberg
    

    View Slide

13. SUPPORT ISSUES
    The base for use cases and test scenarios
    

    View Slide

14. A TESTABLE PROTOTYPE
    Design and development goes hand in hand
    

    View Slide

15. BUILDING A TESTABLE PROTOTYPE
    Design and development goes hand in hand
    

    View Slide

16. View Slide

17. USER TESTING
    Expert review and remote user tests
    

    View Slide

18. THE TEST-PAGE
    A WP Site with a bug
    

    View Slide

19. View Slide

20. View Slide

21. View Slide

22. View Slide

23. ITERATE WITH THE FINDINGS
    Test, refine, repeat
    

    View Slide

24. KEY FINDINGS
    Highlighting & Summary
    

    View Slide

25. NEXT STEP
    Testing a simpler approach
    

    View Slide

26. THE UX APPROACH
    Difficulties & benefits
    

    View Slide

27. LOVE YOUR DESIGNERS
    Everything is design, Everything generates experience
    

    View Slide

28. QUESTIONS?
    You can grab an early version on GitHub.

    h p://github.com/wearerequired/user-feedback/
    

    View Slide

29. THANK YOU
    Beer?
    

    View Slide