Flamingo Skin
Customizable & Extensible Skin
—
Open Source, Design Process, User Research, Interaction Design, Front-end Development
—
ABOUT THE PROJECT
The Flamingo Skin was created to provide a responsive skin for XWiki, suitable for the Groupware Flavor. The Flamingo Skin was one of the biggest, most successful and durable projects I've worked on with the XWiki community. XWiki is an extensible open-source platform for developing collaborative applications on top of the wiki paradigm.
—
ROLE
For the Flamingo Skin, I've worn two hats: interaction designer and front-end team lead.
• On the design part, I was responsible for the whole process: from research to low and high-fidelity prototyping, usability studies, accounting for accessibility, further improvements, strategy, etc.
• On the implementation part, I've handled the structure and styling (HTML, CSS, LESS, cross-browser compatibility) while also defining a standard for the new layout components. I've collaborated closely with a full-stack developer to deliver the project to the end.
—
TIMELINE
Apr 2013 - Dec 2013 (first release)
2014 - 2019 (various iterations)
—
CONTEXT
The Flamingo Skin has been developed for and with feedback from the XWiki Open Source community, sponsored by XWiki SAS.
Between 2009 and 2019, I've been the main Interaction Designer in XWiki's Core Product Development team, together with 6 other software engineers.
We've focused our efforts on creating a generic and scalable application development platform, receiving feedback and requests from an international community with members from over 100 countries.
During the period, I've been involved in over 600 proposals targeted at improving XWiki's user experience.
—
PROBLEM & GOAL
XWiki's community requested a responsive skin, built on a more modern technology stack. The users' pain points and feedback were collected through the IRC channel, the forum, the issue tracker, through surveys and usability testing.
Previously, XWiki was using a Documentation use case specific layout. Flamingo Skin was designed as a solution suited for a collaborative applications platform. This means focusing on a layout that is simple to customize and that supports scalable application configurations.
—
RESULT
Since 2014 (XWiki version 6.2), Flamingo has been the default XWiki skin for more than 8 major versions, supporting thousands of instances and applications. Its major strengths are extensibility, cleanliness, stability, and usability.
—
PROCESS (2013-2014)
The Flamingo Skin was developed in three phases: design, technical investigation and technical implementation.
—
DESIGN PHASE
Over the years, XWiki transformed from being just a wiki to being a collaborative platform, centered around application usage.
I've been in charge of Flamingo's design phase, making design proposals for the majority of XWiki applications, deciding which one will be installed by default and defining an uniform style for them. The design made sure the selected applications followed the agreed standard and that they were responsive.
—
TECHNICAL PHASE
The technical investigation was done by creating the Junco Skin, which is presented as a separate use case.
After a successful technical investigation, I acted as front-end team lead inside XWiki's Development Team in order to finish the integration and implementation of the Flamingo Skin, with another full-stack software engineer.
From a technical perspective, this meant the creation of a responsive HTML5 XWiki skin. We integrated the Bootstrap framework and the LESS CSS preprocessor inside the XWiki Platform. We also created the Icon Themes and the Flamingo Themes concepts, allowing the usage of Font Awesome and the Bootswatch themes.
Help Center Homepage Mockup
—
UNDERSTAND (2013)
An XWiki Flavor is a set of predefined extensions having a specific use case in mind. XWiki can be customized to serve multiple purposes, from public websites to intranets and business intelligence solutions.
The objective of the research was to differentiate multiple flavors for XWiki and determine what applications are fitted for the Groupware Flavor. Collaborative applications should support the interactions between team members during the group decision-making process.
—
HIGH-FIDELITY PROTOTYPE (2013)
The prototype was coded directly in HTML+CSS, on top of the XWiki Platform.
The proposal aimed at reimagining how XWiki's applications can be mixed and used in order to provide the collaboration needs inside an organization, facilitating the work of groups through communication, cooperation, coordination and problem-solving.
User Profile — Wiki Home
Help Center — Blog Application
Dashboard Application — Application Within Minutes
User Directory — Document Index
Page View — Page Edit
Page Comments — Page Attachments
Page History — Wiki Administration
—
RESPONSIVENESS
The Flaming skin is a responsive skin and works on Mobile devices (Phones, Tablets, etc).
Mobile View
—
USABILITY TESTING
Periodically I've conducted surveys and usability testing sessions with members of the XWiki community in order to evaluate the changes we made inside the product and the design proposals.
—
ANALYSIS
Report status shows the success/fail rate of tasks for the participants. This allows rapid identification of problematic tasks. Issues can occur if users are unable to complete the task or if the duration to complete the task exceeds the initial estimation. The result of the analysis implied a presentation to the development team with the findings and creating development issues in order to track the work. The prioritization of items came from usability recommendations that were voted inside the community and project committers.
—
SKIN EVOLUTION (2014-2019)
Flamingo went through several iterations and experimentation stages, starting with skins like Colibri and Junco, and continuing with Macaw, Jay, Koel, etc. All the work was done for and within the XWiki community. This means the discussions, feedback and decisions were made in public, involving a diverse range of opinions and needs.
One of the greatest strengths of XWiki is its extensibility. You can add over 800 extensions on top of it and truly customize it to fit your needs. This means the user interface needs to be able to support advanced customizations. I've conducted the research and definition of Skin Layouts, Extension Points and over the years I've proposed and implemented multiple Color Themes and Icon Themes for several XWiki skins.
Working on the same product for a longer period of time gives you the unique opportunity to see how a functionality evolves. This progression is triggered by technology changes, performance or consistency needs, requirements evolution or by user demands.
—
Consistency
COLLABORATIVE APPLICATIONS (2014-2015)
With the Flamingo Skin put in place, the next step was to align the individual applications build on top of XWiki with the new guidelines. I've managed 5 Front-end developers (as part of a dedicated team outside of the Core Product Team) in assuring a consistent user experience across the 20 most valuable applications selected from over 800 open-source community extensions. This resulted in the creation of XWiki Store, which is presented as a separate use case.
—
Customizing
COLOR THEMES
Color Themes allow rapid change of the look & feel of your wiki, preserving the global layout and bringing small changes to the interface, like headings size, new fonts, different colors for buttons, links, etc.
Color Themes examples: Iceberg | Pantera | Dawn
—
Customizing
ICON THEMES
ICON THEMES
Similar to Color Themes, XWiki provides an Icon Themes mechanism to easily change the icons set. I've also conducted an interface inventory for icons, listing all the places where icons are found and the way they are used.
Icon Themes examples: Font Awesome | Silk | Material | Glyphicon | Icons Inventory
Video: "Icon Themes - Reusable icon variables and mappings for customizable user interfaces".
Talk held by Ecaterina Moraru at FOSDEM 2018
Talk held by Ecaterina Moraru at FOSDEM 2018
—
Customizing
EXTENSION POINTS
EXTENSION POINTS
User Interface Extensions are used by applications to insert custom content in already existing interface elements.
—
Customizing
SKIN LAYOUTS
SKIN LAYOUTS
Using CSS Grid in the Skin layouts implementation allows total customization of the position of interface elements. I've iterated on multiple layout variations, controlling the layout only from CSS and prototyping how it would look with actual content.
—
NEXT STEPS
Flamingo Skin needs to adapt and keep up with technological advancements. I've investigated switching to newer versions of Bootstrap (4, 5, etc.). The major drawback when using third-party dependency is that sometimes the backward compatibility gets broken. Also, the community needs long-term contributors that are interested in the topic in order to develop and maintain it.
—
KEY LEARNINGS
Working in a small team has resource limitations, but also empowers you to think creatively and find solutions.
The Open Source community is full of very passionate people willing to help and provide feedback. The difficulty is knowing exactly who your users are and how you can reach them.
Designing for a sometimes unknown and diverse crowd of people is very hard. Research is vital in order to understand your target. Aiming for consistency, adopting and imposing standards, thinking generically, being scalable and adapting over time, are all critical characteristics if you want to design in Open Source.
—
IMPACT
I've had a direct impact by delivering an extensible, customizable and responsive skin that covered the community's need to adapt to multiple use cases.
The long-term strategic impact is harder to calculate for an Open Source product that can be installed on-premises. The skin has been used for the customization of hundreds of instances from company intranets to corporate public websites and governmental platforms. There are over 10k XWiki active instances every day. Without the Flamingo Skin and the customization levels it provides, users would have needed extended technical knowledge to be able just to change the colors of their instances, without mentioning the other types of customization Flamingo supports.
