Edeneo homepage mockup

After mutliple back and forths, we finally setteld on a black and blue color scheme with green accents. The black would give the design the right atmosphere (and would evoke security and seriousness), while the blue would evoke heaven and match well with the name. And of course, green is the color of hope, and also fits in with the “garden of Eden” theme.

Document management interface

Although a lot of time was spent on the front-end, getting the back-end right was even more important. Thankfully, establishing strong design guidelines in the first phase made it easy to move faster and get the back-end UI done fairly quickly.

The page you see when someone you know has passed away. Not an easy thing to design.

Logo design is not my specialty, but once I scribbled this concept on my pad I knew we had to use it. It’s an angel, but it’s also something else… Can you spot it?

It might not be the FedEx logo, but it's a start

]]> http://www.sachagreif.com/edeneo/feed/ 0 http://www.sachagreif.com/irem-paris-7/ http://www.sachagreif.com/irem-paris-7/#comments Wed, 18 Mar 2009 08:58:00 +0000 Sacha http://www.sachagreif.com/?p=177 The Institute for Researching the Teaching of Mathematics (Institue de Recherche sur l’Enseignement des Mathématiques) of the Paris 7 university needed a new website, and Expression Engine was the perfect tool for the job.

Thanks to EE’s advanced relations management, I was able to implement separate user groups within the site, each with its own homepage, events, articles, and member profiles. This lets the members of IREM update and manage their own content without putting a heavy workload on the webmaster.

IREM home page

The questionnaire I developed gets sent out to World Heritage Sites managers every six years, asking them to evaluate their current situation, needs, and perspectives.

I was responsible both for software development and graphic design, and although I worked in collaboration with UNESCO members, I had a large degree of freedom and some tough choices to make regarding the interface and the functionalities. I also had to learn a new language (ColdFusion) from scratch, and work in the context of an existing website.

Note: since the questionnaires include private data, access is restricted and I cannot give you a link to try it out for yourself, sorry…

Interface design

I was limited to the World Heritage Center website’s existing color palette of blue and grey, but in the end those colors were very well suited to the project, since they don’t distract from the content.

I decided to separate each question into a single block of content with its own small toolbar. From left to right, the toolbar includes the question number, a check mark to indicate if the question is completed, a guidance link to display an in-line popup, and a reset link to erase all answers to the question.

A single question with its toolbar

Since the questionnaires will be filled in by people from all around the world, it was important to use accepted conventions and not try to reinvent the wheel. This is why I used the usual colors or red for errors, green for success, yellow for notices, and blue for help.

Front-end development

UNESCO staff can search for a questionnaire to review

One of the constraints of the project was working within the existing World Heritage structure, which includes Sites Managers responsible for each sites, State Parties Focal Points responsible for all of a country’s sites, and UNESCO staff; each user category having different roles, different access privileges, and even different surveys to fill out.

Some of the features of the online tool include:

• Quicksave your answers at any time without reloading the page (AJAX submit)
• Navigate to any section of the questionnaire using a survey map or pagination, and answer in any order
• Conditional questions that appear only if previous questions have been answered in a certain way

• Export as a Word document or print out the full questionnaire, or just the answers
• Multiple questions types such as comment field, data validation, multiple choice questions, etc.    

Data validation questions

Custom question type

Back-end development

In many ways, the real challenge was in developing the admin interface for such a complex tool. It had to be powerful enough to control all aspects of the questionnaires, but simple enough to be used with 10 minutes of training.

Editing questions through the admin interface

The main feature of the back end was editing questions, and because of the number of questions (more than 300 altogether, with up to 10 potential answers each) the editing had to be as fast as possible. This is why all of the editing interface uses AJAX to minimize loading times.

But we quickly realized that managing the questionnaires involved far more than just editing questions. This is why I added the following features:

• User logging to see who has accessed the questionnaires and when
• Email management to send out emails to Sites Managers and Focal Points. Email templates are automatically filled in with the details and link for the corresponding questionnaire, and UNESCO staff can check if the links have been clicked    

UNESCO staff can review previously sent emails

• Automatic pre-filling of questions for which data already exists, such as addresses, geographical coordinates, etc.
• Language management lets you add languages and translate questions.
• Error reporting displays errors or warning messages encountered by users, which can be used to improve the user experience in later versions
• Caching minimizes the load on the server while speeding up the application

Altogether, this project spanned one year and gave me the occasion to aquire new skills, but more importantly introduced me to the countless problems than can arise when developing an online application for users speaking multiple languages and spanning all over the world.
I learned to work in a big organization, to meet (and in some cases exceed) user demands, and also when to simplay say “no” to feature requests.

Coolhunt home page

The website uses the cforms II WordPress plugin to create customized forms that let visitors request the full version of a given article before deciding if they want to buy it.