SlideShare a Scribd company logo
UPDATING MAILMAN'S UI
HYPERKITTY
PRESENTED BY
Principal Interaction Designer,
Red Hat, Inc.
Máirín Duffy
This presentation is under a Creative Commons Attribution ShareAlike 3.0 License.
Please enjoy and share.
Who am I?
QUICK STATS:
Occupation
Last used OS X, Windows,
or any Adobe stuf
Desktop Environment
Principal Interaction Designer @ Red Hat
Early 2006
Operating System Fedora 20
GNOME 3
Fedora Design Team Lead
How the heck do you pronounce
your name?
Just call me “Mo.” :)
What am I talking about?
(and why should you care?)
● Are you subscribed to any mailing lists?
● Do you want to interact with a project that
uses mailing lists?
● Are you drowning in email?
● Do you hate flamewars and trolls?
GNU Mailman
Started in 1997/1998
History
(selective)
Mailman 1.0 released July 30, 1999
Mailman 2.0 released November 22, 2000
Mailman 3.0 Alpha 1 released March 26, 2009
Mailman 3.0 Beta 1 / Postorious 1.0 Alpha 1 released March 26, 2009
Mailman 3.0 Beta 3 released December 31, 2012LATEST STABLE
Hyperkitty: Updating Mailman's UI
Hyperkitty: Updating Mailman's UI
Hyperkitty: Updating Mailman's UI
Hyperkitty: Updating Mailman's UI
Hyperkitty: Updating Mailman's UI
#1 1997 called; it wants its design
back.
#2 No ability to search.
#3 Clunky navigation; less
affordances than mail clients.
SOME SURFACE UX ISSUES
#4 Intimidating interface for
would-be new contributors.
#5 Difficult to get clear overview.
#1 Missed opportunity to improve
list interaction dynamics.
#2 Barriers to access high-value
content / knowledge / history.
#3 All lists per server treated
equally.
SOME DEEPER UX ISSUES
#4 Trolls and other scary creatures.
#5 Missed opportunity to enable
remote collaboration.
Enter Hyperkitty.
What are we talking
about here?
MAILMAN
POSTORIOUS HYPERKITTY
REST API
Web UI for
list archives
Web UI for list
management &
administration
Core server
March 2010 http://ur1.ca/gvmwy
2 years pass. Then...
A new hope!
February 2012, http://ur1.ca/8g7l7February 2012, http://ur1.ca/8g7l7February 2012, http://ur1.ca/8g7l7
#1 Original blog post continued to
get a massive number of hits
and continued to be widely
referenced.
#2 Opportunity at Red Hat to
commit developer time towards
implementation.
#3 Great timing with PyCon 2012
and upstream Mailman project
interest.
March 2012, http://ur1.ca/8n5v6
Summer of Code 2012
Summer 2012, https://github.com/syst3mw0rm/hyperkitty/
Student Aamir Khan
(syst3mw0rm,) mentored
by Pierre-Yves Chibon
● Login authentication
● Initial reputation system
● Basic user profiles
● Template refactoring / bootstrap
● Discussion threading
● Thread tagging
● Thread rating mechanism
● Initial unit tests
Aurélien Bompard Joins!
August 2012, http://ur1.ca/gvnef
Aurélien Bompard joins Red Hat
and begins working on
HyperKitty full-time in August
2012.
● First alpha release
November 23, 2012
● Moved to Github January 2013
(http://github.com/hyperkitty)
● He continues to crank out
*tons* of new features and
improvements; details at
aurelien.bompard.org and
in github
On the UX front...
2013-2014, http://ur1.ca/gvnb0
Máirín Duffy, Summer 2013+
● List overview redesign
● Design for user profiles
● Design iterations on UI chrome
● Post category design
July 2013, http://ur1.ca/gvnc5
August 2013, http://ur1.ca/gvnd8
Hyperkitty: Updating Mailman's UI
JUly 2013, http://ur1.ca/gvnc5
Women's Outreach Program 2014
Dec 2013 - Mar 2014, http://uxscrutiny.com/category/opw/hyperkitty/
Karen Tang (ktnode), mentored
by Máirín Duffy
● Bootstrap upgrade to 3.0
● Massive CSS cleanups
● Addition of LESS to django setup
● Responsive & mobile-friendly
layouts
● List overview statistics redesign
● Better personalization in design
● New page stubs: category list, category
overview, find user, user public profile
● Icon fixes (upgrade to font icons)
Frequently-Asked
Questions
Photo Credit: “Angry” by Jonathan Grenier on Flickr. Used under a Creative Commons Attribution ShareAlike 2.0 license.
#1 Do you expect me
to use a lame web
UI, like a forum user
or something? Ick.
Photo Credit: “Curious Fennek” by Slapix on Flickr. Used under a Creative Commons Attribution 2.0 license.
#2 What about
GroupServer?
Photo Credit: “Curious Tiguak” by ankakay on Flickr. Used under a Creative Commons Attribution 2.0 license.
#3 What about
Discourse?
Photo Credit: “Amazed - Maker Faire - 2012” by Scott Loftesness on Flickr. Used under a Creative Commons Attribution ShareAlike Non-Co
license.
#4 When will it
be released?
Demo time!
Follow along at:
https://lists.stg.fedoraproject.org/archives/
#1 Test out our demo server!
#2 Report bugs!
#3 Check out the code:
GETTING INVOLVED
#4 Read the docs and install it:
#5 Chat with us:
https://lists.stg.fedoraproject.org/archives/
http://fedorahosted.org/hyperkitty
http://github.com/hyperkitty
http://hyperkitty.rtfd.org
hyperkitty-devel@lists.fedorahosted.org
Questions?
Fedora 20 • LibreOffice Impress • Inkscape • GIMP • Firefox
Creative Commons-licensed artwork • Openly-licensed fonts (M+ among others)
This presentation is under a Creative Commons Attribution ShareAlike 3.0 License.
Please enjoy and share.
This presentation was created through the exclusive use of free software and content:
Hyperkitty
https://fedorahosted.org/hyperkitty/
https://github.com/hyperkitty/hyperkitty

More Related Content

PDF
Getting Involved in an Free/Open Source Operating System
PDF
Design Bounties
PDF
Giannis Konstantinidis - The fedora community
PPTX
Bus2302 assignment 5 presentation rob kerr group 5
PDF
A Tour Through Open Source Creative Tools.Take4
ODP
How to Contribute to GNOME as an Artist
PDF
Community-Led Open Source Art: The Fedora Design Team
PDF
Design Bounties: Adventures in Recruiting New Free Software Ninjas
Getting Involved in an Free/Open Source Operating System
Design Bounties
Giannis Konstantinidis - The fedora community
Bus2302 assignment 5 presentation rob kerr group 5
A Tour Through Open Source Creative Tools.Take4
How to Contribute to GNOME as an Artist
Community-Led Open Source Art: The Fedora Design Team
Design Bounties: Adventures in Recruiting New Free Software Ninjas

Viewers also liked (7)

ODP
How To Theme Fedora
PDF
Digital Art using Gimp & Inkscape
PDF
A Tour Through Open Source Creative Tools
PDF
Designing UI Mockups in Inkscape
PDF
Inkscape for Beginners Bootcamp
PDF
Beginner's Guide to UI Design
PPTX
UX for Dummies
How To Theme Fedora
Digital Art using Gimp & Inkscape
A Tour Through Open Source Creative Tools
Designing UI Mockups in Inkscape
Inkscape for Beginners Bootcamp
Beginner's Guide to UI Design
UX for Dummies
Ad

Similar to Hyperkitty: Updating Mailman's UI (20)

PPSX
Hackaton for health 2015 - Sharing the Code we Make
PDF
WebMatrix, see what the matrix can do for you!!
PDF
Open Source Community Metrics: LinuxCon Barcelona
PDF
Open Source Community Metrics for FOSDEM
PDF
When Will Drupal Die? Keynote talk from Bay Area Drupal Camp 2014
PDF
Open Source Community Metrics LibreOffice Conference
PDF
State of Fedora (Flock 2015)
PDF
[SiriusCon 2018] Closing session - Live Community Survey
PDF
HyperKitty, or how to get the best from mailing lists and forums
PDF
Hands On With OpenSocial and Embedded Experiences
PDF
Micro Frontends
PDF
Hacking the Kinect with GAFFTA Day 1
PDF
Python: the secret weapon of Fedora - FLISoL 2015
PDF
I Know What Youll Do Next Summer - The Skills You Will Be Learning 
as a Domi...
PDF
DevTeach Ottawa - Webmatrix, see what the matrix can do for you!!
PDF
Developing FirefoxOS
PPTX
Hacktoberfest 2020 - Open source for beginners
PDF
DrupalCon chicago 2011 summary
PDF
Kernel Recipes 2016 - Patches carved into stone tablets...
PDF
Community building lessons from Ansible
Hackaton for health 2015 - Sharing the Code we Make
WebMatrix, see what the matrix can do for you!!
Open Source Community Metrics: LinuxCon Barcelona
Open Source Community Metrics for FOSDEM
When Will Drupal Die? Keynote talk from Bay Area Drupal Camp 2014
Open Source Community Metrics LibreOffice Conference
State of Fedora (Flock 2015)
[SiriusCon 2018] Closing session - Live Community Survey
HyperKitty, or how to get the best from mailing lists and forums
Hands On With OpenSocial and Embedded Experiences
Micro Frontends
Hacking the Kinect with GAFFTA Day 1
Python: the secret weapon of Fedora - FLISoL 2015
I Know What Youll Do Next Summer - The Skills You Will Be Learning 
as a Domi...
DevTeach Ottawa - Webmatrix, see what the matrix can do for you!!
Developing FirefoxOS
Hacktoberfest 2020 - Open source for beginners
DrupalCon chicago 2011 summary
Kernel Recipes 2016 - Patches carved into stone tablets...
Community building lessons from Ansible
Ad

Recently uploaded (20)

PDF
Machine learning based COVID-19 study performance prediction
PDF
TokAI - TikTok AI Agent : The First AI Application That Analyzes 10,000+ Vira...
PDF
Mobile App Security Testing_ A Comprehensive Guide.pdf
PPTX
MYSQL Presentation for SQL database connectivity
PDF
Assigned Numbers - 2025 - Bluetooth® Document
PPT
“AI and Expert System Decision Support & Business Intelligence Systems”
PPTX
Spectroscopy.pptx food analysis technology
PDF
Encapsulation_ Review paper, used for researhc scholars
PPTX
Digital-Transformation-Roadmap-for-Companies.pptx
DOCX
The AUB Centre for AI in Media Proposal.docx
PDF
Electronic commerce courselecture one. Pdf
PDF
Diabetes mellitus diagnosis method based random forest with bat algorithm
PDF
Unlocking AI with Model Context Protocol (MCP)
PDF
Blue Purple Modern Animated Computer Science Presentation.pdf.pdf
PDF
Chapter 3 Spatial Domain Image Processing.pdf
PDF
Advanced methodologies resolving dimensionality complications for autism neur...
PDF
Architecting across the Boundaries of two Complex Domains - Healthcare & Tech...
PDF
Spectral efficient network and resource selection model in 5G networks
PDF
Empathic Computing: Creating Shared Understanding
PPT
Teaching material agriculture food technology
Machine learning based COVID-19 study performance prediction
TokAI - TikTok AI Agent : The First AI Application That Analyzes 10,000+ Vira...
Mobile App Security Testing_ A Comprehensive Guide.pdf
MYSQL Presentation for SQL database connectivity
Assigned Numbers - 2025 - Bluetooth® Document
“AI and Expert System Decision Support & Business Intelligence Systems”
Spectroscopy.pptx food analysis technology
Encapsulation_ Review paper, used for researhc scholars
Digital-Transformation-Roadmap-for-Companies.pptx
The AUB Centre for AI in Media Proposal.docx
Electronic commerce courselecture one. Pdf
Diabetes mellitus diagnosis method based random forest with bat algorithm
Unlocking AI with Model Context Protocol (MCP)
Blue Purple Modern Animated Computer Science Presentation.pdf.pdf
Chapter 3 Spatial Domain Image Processing.pdf
Advanced methodologies resolving dimensionality complications for autism neur...
Architecting across the Boundaries of two Complex Domains - Healthcare & Tech...
Spectral efficient network and resource selection model in 5G networks
Empathic Computing: Creating Shared Understanding
Teaching material agriculture food technology

Hyperkitty: Updating Mailman's UI

  • 1. UPDATING MAILMAN'S UI HYPERKITTY PRESENTED BY Principal Interaction Designer, Red Hat, Inc. Máirín Duffy This presentation is under a Creative Commons Attribution ShareAlike 3.0 License. Please enjoy and share.
  • 2. Who am I? QUICK STATS: Occupation Last used OS X, Windows, or any Adobe stuf Desktop Environment Principal Interaction Designer @ Red Hat Early 2006 Operating System Fedora 20 GNOME 3 Fedora Design Team Lead How the heck do you pronounce your name? Just call me “Mo.” :)
  • 3. What am I talking about? (and why should you care?) ● Are you subscribed to any mailing lists? ● Do you want to interact with a project that uses mailing lists? ● Are you drowning in email? ● Do you hate flamewars and trolls?
  • 4. GNU Mailman Started in 1997/1998 History (selective) Mailman 1.0 released July 30, 1999 Mailman 2.0 released November 22, 2000 Mailman 3.0 Alpha 1 released March 26, 2009 Mailman 3.0 Beta 1 / Postorious 1.0 Alpha 1 released March 26, 2009 Mailman 3.0 Beta 3 released December 31, 2012LATEST STABLE
  • 10. #1 1997 called; it wants its design back. #2 No ability to search. #3 Clunky navigation; less affordances than mail clients. SOME SURFACE UX ISSUES #4 Intimidating interface for would-be new contributors. #5 Difficult to get clear overview.
  • 11. #1 Missed opportunity to improve list interaction dynamics. #2 Barriers to access high-value content / knowledge / history. #3 All lists per server treated equally. SOME DEEPER UX ISSUES #4 Trolls and other scary creatures. #5 Missed opportunity to enable remote collaboration.
  • 13. What are we talking about here? MAILMAN POSTORIOUS HYPERKITTY REST API Web UI for list archives Web UI for list management & administration Core server
  • 15. 2 years pass. Then...
  • 16. A new hope! February 2012, http://ur1.ca/8g7l7February 2012, http://ur1.ca/8g7l7February 2012, http://ur1.ca/8g7l7 #1 Original blog post continued to get a massive number of hits and continued to be widely referenced. #2 Opportunity at Red Hat to commit developer time towards implementation. #3 Great timing with PyCon 2012 and upstream Mailman project interest.
  • 18. Summer of Code 2012 Summer 2012, https://github.com/syst3mw0rm/hyperkitty/ Student Aamir Khan (syst3mw0rm,) mentored by Pierre-Yves Chibon ● Login authentication ● Initial reputation system ● Basic user profiles ● Template refactoring / bootstrap ● Discussion threading ● Thread tagging ● Thread rating mechanism ● Initial unit tests
  • 19. Aurélien Bompard Joins! August 2012, http://ur1.ca/gvnef Aurélien Bompard joins Red Hat and begins working on HyperKitty full-time in August 2012. ● First alpha release November 23, 2012 ● Moved to Github January 2013 (http://github.com/hyperkitty) ● He continues to crank out *tons* of new features and improvements; details at aurelien.bompard.org and in github
  • 20. On the UX front... 2013-2014, http://ur1.ca/gvnb0 Máirín Duffy, Summer 2013+ ● List overview redesign ● Design for user profiles ● Design iterations on UI chrome ● Post category design
  • 25. Women's Outreach Program 2014 Dec 2013 - Mar 2014, http://uxscrutiny.com/category/opw/hyperkitty/ Karen Tang (ktnode), mentored by Máirín Duffy ● Bootstrap upgrade to 3.0 ● Massive CSS cleanups ● Addition of LESS to django setup ● Responsive & mobile-friendly layouts ● List overview statistics redesign ● Better personalization in design ● New page stubs: category list, category overview, find user, user public profile ● Icon fixes (upgrade to font icons)
  • 27. Photo Credit: “Angry” by Jonathan Grenier on Flickr. Used under a Creative Commons Attribution ShareAlike 2.0 license. #1 Do you expect me to use a lame web UI, like a forum user or something? Ick.
  • 28. Photo Credit: “Curious Fennek” by Slapix on Flickr. Used under a Creative Commons Attribution 2.0 license. #2 What about GroupServer?
  • 29. Photo Credit: “Curious Tiguak” by ankakay on Flickr. Used under a Creative Commons Attribution 2.0 license. #3 What about Discourse?
  • 30. Photo Credit: “Amazed - Maker Faire - 2012” by Scott Loftesness on Flickr. Used under a Creative Commons Attribution ShareAlike Non-Co license. #4 When will it be released?
  • 31. Demo time! Follow along at: https://lists.stg.fedoraproject.org/archives/
  • 32. #1 Test out our demo server! #2 Report bugs! #3 Check out the code: GETTING INVOLVED #4 Read the docs and install it: #5 Chat with us: https://lists.stg.fedoraproject.org/archives/ http://fedorahosted.org/hyperkitty http://github.com/hyperkitty http://hyperkitty.rtfd.org hyperkitty-devel@lists.fedorahosted.org
  • 33. Questions? Fedora 20 • LibreOffice Impress • Inkscape • GIMP • Firefox Creative Commons-licensed artwork • Openly-licensed fonts (M+ among others) This presentation is under a Creative Commons Attribution ShareAlike 3.0 License. Please enjoy and share. This presentation was created through the exclusive use of free software and content: Hyperkitty https://fedorahosted.org/hyperkitty/ https://github.com/hyperkitty/hyperkitty