Phase: LISTEN

Few months ago we were found by a company called CIT Energy Management. Being part of the larger group known as Stiftelsen Chalmers Industriteknik they felt the time was right to have their own distinctive face and feel towards clients - a web site tailored for their specific needs.

Chalmers Industriteknik is the interface between companies and academia. Through them, companies get access to a broad, cross disciplinary spectra of state-of-the-art competences within science and technology.

CIT Energy Management works with issues of energy use and interior climate in buildings of all kinds, from residential housing to advanced laboratories. Their goal is to collaborate with the client in handling these issues to achieve long-term efficient use of energy in both economic and environmental respects, while also securing the clients interior climate.

Initial meeting

First meeting was very much like a dialog and an opportunity to share ideas. We were listening carefully and noting down everything about the requested look and feel of the site. Since there was a small web application development involved, we needed to know who are the targeted users for this web app. 

A quick mock-up

We were competing with other design companies to get the job, hence for a rough showcase mock-up we studied Energy Management’s marketing materials in order to define color scheme and similar image.

It turned out to be a good idea to put some more effort on finding decent direction, since we happened to be selected to carry on with the project.

Phase: CREATE

In Cannedapps we work iteratively. We have noticed that it is more efficient to show each significant step to our clients before proceeding to the next. Here is a rough outline of the process for CIT Energy Management’s web site:

01 Scenarios of use and wireframes

Before creating wireframes and sort of moving on from the initial graphic mockup, we analyzed couple of use scenarios of the future site. First, it would be a platform for many scientific publications (sorting and search) and second, a communication tool between EM and their clients. 

02 Graphic mock-ups

Now that we got most of the page wireframes signed off, it was time to reshape previously designed graphic mock-up. Graphic mockups are realistic images of a user interface (web page). They are refinements of the previously made conceptual user interface. Graphic mockups do not function, they are merely static screen drawings, looking like the real thing.

03 Quick task analysis for file management application

Task analysis simply means understanding users’ work. During task analysis we investigate sequence and character of a user’s actions and decisions to achieve a goal. We use rapid task analysis to make user experience design process suitable for almost any project. Good emotions arise when things are easy to use, aesthetic and useful.

04 Model development and implementation 

After our graphic mockups were approved, we started building the real thing. That, of course, means cutting mock-ups into pieces and sewing together again with the help of HTML (not an acronym for "Hey That's My Lighter!") and CSS (HAML http://haml-lang.com/ and SASS http://sass-lang.com/ to be more precise). 

Here is were the ease of use and flexibility of Sandals really comes into play. The core of Sandals is good enough to allow integration with other custom web apps - in EM’s case the web based file upload and file management application.

05 Launch

Energy-management.se has been live for a few weeks by now and we have been able to make changes based on feedback. It is always good to test and keep an eye on the site for a while to learn what people think works and what not. Click the image below to visit site.

Loading mentions Retweet

Timing is one of the most important things in business. To address that issue, there are companies selling companies off a shelf helping you start changing the world quickly, hence saving you time and tedious paperwork.

Imagine, if you were on the market and searching for a company like this, what would you look for? Price list, speed of the service or something else? We recon, one of the key qualities you are looking for is the credibility of that company.  

Guys from AktiebolagNu, who contacted us few weeks ago, are running a solid business and are really nice people to work with, however, their web page couldn’t match their profile. It just didn’t look serious enough. They knew to sell better they need something more.

Phase: LISTEN

This was a rather quick polishing project, since back-end of the site was fully functional. A simple yet professional looking outcome that would appeal to business people was a must. Furthermore, the logo had to be redesigned and a new color scheme suggested.

Phase: CREATE

We started sketching down ideas for a new logo immediately, however, we could only spend up to 3-4 hours for a logo, so it made sense to divide it for several days and let it settle in between. Iterative process as usual. Fortunately it came out rather good.

We found brown with different shades would be suitable base color for their business image..

.. and eventually we got to a decent graphic mock-up to present. 

Layout had to be simple, conventional and showing 2 kinds of services prominently. We were satisfied to discover that shades of light gray in hand with selected brown color gave a professional yet relaxed feel to the site. To visit, click on a picture above or hit www.aktiebolagnu.se

Loading mentions Retweet

Imagine a world where residual biomass and by-products are cleverly converted into a valuable carbon neutral solid biofuel – the Bioagro pellets. Well, in the heat of discussions about carbon footprint and biofuels in general, there is one innovation based company in Sweden providing these sustainable conversion technologies.

OUR TASK: Make it easier to update

The Bioagro project initially started out as part of EU Life initiative. Ecoera company had a project site which had to be converted to work on a more manageable platform. At the time, the www.bioagrolife.com project overview site didn’t have any CMS system behind it. We were asked to simplify the content update process and to create a more modern feel before the project will be commercialized.

In Cannedapps we work iteratively. We have noticed that it is more efficient to show each significant step to our clients before proceeding to the next. Here is rough outline of the process for Bioagroenergy.com redesign:

01 Old site audit

Before going to work on the new version of Bioagroenergy.com we took a closer look at what they already had and what the main problems were with current site. Firstly, it contained too much, too small text. Secondly, it was very difficult to update. We figured that Sandals would fit right into place here.

04 Scenarios of use >> Scenarios of use in the future

At present the main purpose of the site is to give information about the technology and a brief overview about the project. Soon, however, it will act as a sales gateway for Bioagro pellets. In the next larger iteration there might be a web application developed for that purpose.

06 Wireframes

First ideas usually appear on napkins, inside notebooks or just on casual printing papers. I usually have several A3 papers in front of me all the time.

When the main concept has had some time to consolidate, it’s usually a good time to turn to more advanced wireframing applications. Cannedapps likes to use Hotgloo for digital wireframes.

07 Graphic mockups The client requested that the European Union-like blue and yellow colors would remain dominant. Graphic mockups are realistic images of a user interface (web page). They are refinements of the previously made conceptual user interface. Graphic mockups do not function, they are merely static screen drawings, looking like the real thing. You guessed it, it was now time to open Photoshop.

08 Model development and implementation After the graphic mockups were approved, we started building the real thing. That, of course, means cutting mockups to pieces and sewing together again with the help of HTML and CSS (HAML http://haml-lang.com/ and SASS http://sass-lang.com/ to be more precise). To fill the updating criteria, we suited our preferred content management system – Sandals, to work with Bioagroenergy.com.

09 Launch Bioagroenergy.com has been live already since December, 2009. More content is on the way from the client who now uses Sandals to make fast updates and publish news.

Loading mentions Retweet