Designing for Action Architecture

Archintorno’s website is the result of a 10-week internship for my BA degree in e-Concept Development. Archintorno is an Italian non-profit that works in community and social architecture. I initiated an internship project to design and develop their first website to help them to boost project funding and expand their EU client base.

This was a challenging project because my attention and skills were split in many directions, but rewarding because I learned and accomplished a lot in an intense 10-weeks. I initially approached the project as a web design and development exercise. However, as I got deeper into the project it became clear that I wouldn’t be provided web-ready content by the client. As a result, much of my time was spent on content development translating, writing and finessing text thereby helping to clarify Archintorno’s service offering to users. I was also directly responsible for design, web development and project management.

I conducted usability testing (using Steve Krug’s methodology), the first round of which indicated users were confused by what it was Archintorno actually did. In response, I tightened up labelling and menu items, clarified messaging on the home page, and added the tagline Action Through Architecture to the logo to reinforce Archintorno’s mission. On the technical side, I developed the site in WordPress, customising a responsive theme and setting up SEO and multi-language functionality (for future use) in the process.

The common language between myself and the client was Spanish, which gave the project management an added layer of complexity. Another challenge was that much of the provided text was in Italian and written by various authors. I used google to translate the text into English and then interpreted and rewrote it in natural language to match the site’s friendly tone of voice. Pulling together all of the text in different languages and writing styles and making it clear and concise was quite rewarding, but took a big chunk of my time away from customising the visual and UX to the level I had aspired to.

Here’ a look at how I approached visual design, content development and project management for the site.

VISUAL DESIGN

Moodboard

In the early phase of the site design, I presented a mood board to Archintorno to convey my thoughts on how the site could look and feel. I use mood boards as a collaboration tool because they help to create a common vision for the site’s visual design. I proposed friendly graphics, sketches, bright colours, images of people and clean typography to express Archintorno’s connection to community and social architecture.

a moodboard for archintorno

Style Tiles

I further defined the design direction by creating a set of style tiles that described three distinct design directions for the site (style tiles are a design deliverable consisting of fonts, colours and interface elements that communicates the evolution of a visual brand for the web). Drawing from comments and feedback on the style tiles, I re-iterated the style tiles (shown below) to more closely reflect the site’s design direction.

The first set of style tiles were used to engage conversations about visual direction for the site. Each style tile demonstrated a different look and feel, and included examples of typography, colour, buttons and imagery.

the first three style tiles with different design directions

The second iteration of the style tile combined elements from first set and moved toward a monochromatic, classic feel.

style tile #2 for archintorno

I sketched out a quick idea of elements to include in the style tiles including typography, descriptor words and button styles, and explored possible layouts. I decided on a structure loosely based on a homepage to show the design elements in context.

Sketches of style tile layouts and content from my sketchbook

CONTENT DEVELOPMENT

One of the challenges of the project was to define Archintorno’s eclectic services into a core service offering that could be expressed in a user-friendly way on the web. To tackle this, I conducted discussions and surveys with the client and then reviewed their projects and pulled out themes and patterns in services. I proposed that Archintorno offer their services under three dominant practise areas and elaborated on the client’s suggestion that we categorise their projects by theme. These categories were then used in a sort function in the portfolio section and I designed theme icons (shown on the homepage slide, below) for use in project descriptions.

I designed eight icons to represent Archintorno’s project categories. They were paired with a bold positioning statement on the homepage landing slide to clearly communicate Archintorno’s service offering.

archintorno homepage with 8 project theme icons

Working with the WordPress theme's built-in portfolio settings, I designed the project description content to include a short summary, fact box and project theme icons, as shown in this detail from the Oaxaca Experimental Centre project.

detail from archintorno's project page showing summary, fact box and theme icons

PROJECT MANAGEMENT

Our collaborative workspace

In addition to the design and development of the site, I was responsible for project management. From the get-go, I set up a collaborative workspace on Podio and a file-sharing folder on Dropbox. I chose to do this for the following reasons:

  • with the goal to minimise (if not eliminate) the need for one-way email communication between multiple team members;
  • to centralise all activities by the group, including task assignments, design proofing and sharing comments;
  • to allow access to all files at all times, and track file versions;
  • to encourage involvement between team members.

It was the first time both the client and I had used Podio. Evidently we took to the platform quickly, within an hour or two I designed a couple of custom apps for file proofing and approvals and we were posting comments on our work.

Before I started on the design of the site, I created a “coming soon” splash page to establish Archintorno’s web presence while the site was under construction. The client and I discussed the design of the splash page on Podio, using the comments and approvals tools to track our progress.

Project management page on Podio

One of the great Podio features for international, multi-lingual teams is the user interface language customisaion settings. While correspondence between me and the client was in Spanish, my interface was set to English, and Archintorno’s to Italian, meaning we could each comfortably navigate the platform in our native language.

I found Podio was missing two crucial tools for project management: a time-tracker for my personal time management and a project planning chart for breaking the entire project into weekly tasks and targets. I looked elsewhere and found a time tracking tool in FreshBooks, and created a Google Doc spreadsheet that I shared with the client. It would have been very useful to have these tools integrated into the tasks app on the Podio platform.

In the schedule I staggered the client’s content deliveries into part-deliveries starting with small sets of project descriptions and team profiles. This helped the client pace their tasks into manageable chunks while giving me a continuous flow of content to work with as I built the site.

Weekly task list made in Excel

Handing over the website

website guide cover

With the site was launched, my final project management duty was to write a website user’s guide to help the client get up and running on their own. I chose the WordPress platform partly because I am familiar with it, but also because it is quick to learn with basic training. In the “Next Steps” section of the guide I recommended that the client take an online beginner’s training course and start practising with blog posts. I also recommended that they translate the site into Italian first (based on google analytics traffic stats) and hire a developer familiar with the WordPress Multilingual plugin (WPML) to insert the Italian text.

website user's guide

The bilingual user’s guide included all the details that the client needed to take over the site administration including accounts, theme overview, and recommendations for next steps. I first wrote the guide in English, and translated it into Spanish with the help of google translate.