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, successful and durable projects I've worked with the XWiki community. XWiki is an extensible open-source platform for developing collaborative applications on top of the wiki paradigm.

View proposal    |    Prerequisites    |    Download it
Problem & GOAL
XWiki needed a responsive skin, built on a new technology stack that could support user application development and management. Previously, XWiki was using a layout that focused on the Documentation use case. Flamingo Skin was provided as a solution suited for a collaborative applications platform.

RESULT
Since 2014 (XWiki version 6.2), Flamingo has been the default XWiki skin for more than 7 major versions, supporting thousands of instances and applications. Its major strengths are extensibility, cleanliness, stability, and usability.

MY ROLE
For 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, to usability studies, accounting for accessibility, further improvements, and strategy.
    • On the implementation part, I've handled the structure and the styling part (HTML, CSS, LESS, SSX, cross-browser compatibility) while also defining a standard for the new components. I've collaborated closely with a full-stack developer to deliver the project to the end.

TIMELINE
Nov 2013 - Sep 2014 
Mobile View
RESEARCH
An XWiki Flavor is a set of predefined extensions having a specific use case in mind since 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 individuals that make up the team and the interactions between them during the group decision-making process.



HIGH-FIDELITY MOCKUPS
The mockups and the prototype was coded directly in HTML+CSS, on top of the XWiki Platform. The design proposals have been discussed inside the XWiki Community, which is an Open Source community around the XWiki platform.
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
PROCESS
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 a 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've acted as front-end team lead inside XWiki's Development Team in order to finish the integration and implementation of the Flamingo Skin.

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. 

Thank you
Let's work together!


TWITTER • INSTAGRAM • LINKEDIN • WEBSITE
Moraru Ecaterina @evalica 
Flamingo Skin | 2013
4
188
1
Published:
user's avatar
Ecaterina Moraru

Flamingo Skin | 2013

Responsive skin, focused on application usage, suitable for Groupware Flavor definition inside XWiki.
4
188
1
Published: