Redesigning the ExpressionEngine website

US/Canada Border Officer: “Are you coming for business or pleasure sir?”
Me: “Business”
Officer: “What is the nature of your stay?”
Me: “I’m a web developer and I’m meeting with a client in Oregon to discuss a project.”
Border Officer: “What’s the name of the client?”
Me: “pMachine.”
Officer: “Are you bringing any websites with you?”
Me: Blank stare
Officer: “Do you have any websites in the car, sir?”
Me: “Ummm… no, websites are on servers; I’m not bringing anything physical with me.”
Officer: “Then how do you bring them to your client?”
Me: “Umm… I’m actually just going to meet with the client to discuss a website, I’m not bringing them anything.”
Officer: “Okay, then, enjoy your stay.”

( 30 seconds of silence )

Heather: “Next time, you say, ‘For pleasure.’”

Lesson learned. The next time I’m on my way to visit a client who puts me up in a gorgeous mountain-view hotel, takes my family out for dinner daily, and calls three hours of discussion followed by an afternoon of rock-climbing a meeting, I will be able to say with a clean conscience that I’m going “for pleasure.”

Prior to this week of meetings with the pMachine people, I had worked with Rick Ellis on a variety of smaller projects, and we had developed a very good working relationship. This paved the way for one of the largest projects that I’ve yet to take on in my career, and includes new website designs for pMachine (nowEllisLab) and ExpressionEngine, as well as redesigns ofCodeIgniter and pMachine Hosting (now EngineHosting).

Years ago, I would have jumped head-first into a project like this, and started working on detailed mockups from day one. This approach forced me into making several different design decisions about layout, color, typography, etc., all at the same time, and usually would result in design gridlock. For this reason, I now tend to split my design process into somewhat separate phases: wireframing, design exploration, and detailing. In this article, I’ll attempt to detail those phases with some practical examples from the design of the ExpressionEngine.com website, as well as demonstrate what to do if the process encounters snags.

Working Environment

I mentioned in an article I did at Cameron Moll’s site that, for me, a creative workspace is critical to producing great work, and this project was no exception. I actually worked on this project in three different locations. I started in the large office downstairs, but moved into an upstairs hallway as we turned the office into a playroom. The hallway office was less than inspiring, and my time there actually coincided with the time I struggled the most during this project. Merely a coincidence? I’m not sure, but I do know that when I moved into the larger spare bedroom, I started to pick up momentum again.

Wireframing

I started the project with the ExpressionEngine home page, because this is arguably their most important presence on the web. I also knew that if I could get the layout for ExpressionEngine to work, I could apply it to the other sites relatively easily, as their content wasn’t as challenging to organize and design.

The first thing that I requested from EllisLab in order to get the wireframing stage underway was a list of design elements that they wanted to display on the home page. After a couple of hours of discussion around Rick’s dinner table, we narrowed down the sections to include:

• Nav, super-nav, logo
• Large expansive banner graphic
• Links to download ExpressionEngine and take a feature tour
• Introduction message
• News, blog posts
• Featured users (bloggers / developers / business owners + featured user)
• Footer

During that conversation, we also discussed the design direction that they wanted to head in, which I will touch on in the next section. With this list of design elements, I was able to open up Adobe Illustrator and get started on trying out some different layouts.

Wireframes fit perfectly with the grid approach to design—grids are essential for every designer to study and understand. The first thing I did was set up two vertical guides to designate the width of the website. From there, I very roughly sketched out grey boxes to represent where content would be placed. In the beginning, this almost resembles a game of Tetris—organizing shapes of content to try to find the best fit. When I noticed that the design started to naturally break up into a set of five columns, I put a few more vertical guides in place to help keep things orderly. Once I felt fairly comfortable with the layouts I had created, I submitted them to EllisLab so they could take a look.

The feedback that I received was somewhat divided, as there were elements of each layout that the team liked. Rick was particularly fond of displaying the featured user section horizontally, and was concerned that the vertical orientation might imply that they were listed by order of importance. Others from the EllisLab team felt that the news section in Figure 1a wasn’t given enough room (quite true), and that layout 1b presented this information much more successfully.

With my next set of wireframes, I attempted to merge the best features of the first two wireframes.

I felt that both of the next two merged wireframes I submitted had some potential. However, the EllisLab team was looking for something much simpler and scaled back. At this point, we were at somewhat of a stalemate, because the amount of content that they wanted to present was in conflict with the visual look they wanted to achieve. In earlier discussions, they mentioned that the look they liked was very clean, uncluttered, and professional. Paul Burdick then decided to log onto the Crazy Egg account to get a better sense of where people were clicking. After checking out the stats, he found that the news section on their home page was getting close to zero traffic, and could probably be removed. This change opened the door for us to take another look at version 1a, with a few modifications.

The last wireframe I submitted was indeed very similar to 1a, but included five content blocks that were intended to touch on the features of ExpressionEngine. There were still some concerns from the team that this layout might be too boxy and unfocused, but they decided these issues could be addressed in the next stage.

One of the main advantages I’ve found in working with wireframes is that I can try out a lot of different layout ideas and make modifications to them in a relatively short amount of time. If I had just completed a couple rounds of polished design mockups, and EllisLab had then decided to remove the news section completely, it would have been a bit frustrating for me, but because we were still in the wireframing stage, the changes only took a few minutes.

If you look at the level of detail in the wireframes as the revisions progress, you’ll notice that I was already starting to explore some different design directions (albeit in small doses) as I went along. Throughout the process, I tried out a number of fonts alongside the ExpressionEngine logo, and at times—when I had been stuck too long on a wireframe—I would flip over to iStockphoto and start looking for images that I might use down the road. I mention this because I’ve found it to be beneficial to have a degree of overlap between the different phases of the design process. It’s important to be able to see past the grey boxes to what will potentially be in their place. The level of detail that I inject into the wireframing stage differs from client to client. If I sense that my clients are having difficulties picturing the final product, and therefore having a tough time making a decision, I’ll add a bit more detail until they are comfortable enough to move forward. Conversely, If I sense that my clients are getting hung up on little details too early in the process, I’ll strip the wireframes right back to the basic grey shapes to help them focus purely on the layout.

Design Exploration

Typography

As I mentioned, the search for a new font started during the wireframe stage and continued on into the exploration stage. My first instinct was to keep things clean and simple with a font like DIN or Gotham (figure 2a). Although these fonts are an improvement over Charcoal, which they used in the previous design, neither of them had the punch or uniqueness that I was looking for. After ruling those two out, as well as my entire font library, I hopped onto MyFonts and spent the better part of a day (or was it three?) searching for the right one. I was particularly looking for a typeface that had a great lowercase g, and that also looked really good in its italic state, because I wanted the logo to convey a sense of energy and movement. I eventually landed upon Agfa’s Scene, which satisfied both of my prerequisites rather well.

Now that I had found the right typeface, the logo icon was looking like it could use a little refresher, as well. The first thing I wanted to try was to replace the e with something a little more solid. I eventually settled on Century Schoolbook Italic because its shape and weight matched the curved arrows very nicely.

Now that everything else was updated, the arrows were looking a little chunky in comparison. I shaved off the internal arrow barbs, rounded out the corners, and slightly rotated the pair to better match the e and to streamline the entire mark.

Since EllisLab didn’t even request that this logo be changed, I made sure that my redesign was not a huge departure from the original and that it was still instantly recognizable to existing EE users. To keep some consistency between the logo and the rest of the site, I carried the Scene font through into the main headlines and page titles. I reverted back to using Gotham for the headings of smaller sections, where its cleanliness really shines.

Images and Color

At the same time that I was working on the logo, I was also figuring out what type of colors and imagery I should use on the main website. This was by far the most difficult part of the entire process. I started off with an engine theme in mind, and spent hours attempting to find an abstract photo that I could use in the main banner area to set the tone of the site. I wasn’t really satisfied with the images that I found, and at the same time came to the conclusion that the website should really be less about engines and more about expressions. One of ExpressionEngine’s major strengths is its high level of design flexibility, which allows its users to—for lack of a better word—express themselves visually, and not be locked into the confines of what a typical content-management system might look like.

In my first mockup, I thought the best way to demonstrate flexibility was to show a screenshot of an ExpressionEngine-powered website that had a number of features, and also didn’t have the typical blog layout (I used designer Veerle Pieters’ blog as an example). I also included a testimonial from the designer that mentioned the flexibility of the software.

The layout I used in my first post-wireframe mockup sticks fairly closely to the final wireframe, but instead of five content blocks below the main banner, I decided to merge three of them together. Changing the layout also allowed enough room for an introductory paragraph.

This mockup was fairly well received, but EllisLab wanted a bit more punch with the colors—this one was described as being a tad on the vanilla side. Fair enough. I darkened the background colour of the site to give the banner a bit more pop, and added a couple more screenshots of ExpressionEngine’s control panel.

Everyone seemed to really like this revision. Everyone except me. I felt that the repetitive dark horizontal bands that spread across the page (as a result of the background color changing) broke up the visual flow of the page too much, and that a better solution could be discovered with another revision. As a result, I attempted to merge the two areas and use a background color to differentiate the sections. This approach still felt unfinished to me, so I decided that I would take one last stab at it before resorting to the one everyone else liked.

I don’t think the mockup below was ever shown to the guys at EllisLab, but it ended up setting the stage for the final version of the site that we eventually chose. The buttons morphed into tabs, and the introductory paragraph migrated up into the banner area.

There were many more revisions and concepts than what I’ve shown here, but the ones I’ve shown represent the most linear path from start to finish. When the project was finished, I had a total of twenty three Photoshop files with slightly different design directions for the home page alone, and more than a hundred for all the different EllisLab sites combined.

Icons

One of the most important discoveries I made during this project were a couple of icon packs fromIconDrawer. On some pages, these icons really carry the design of the page upon their little pixelated backs. Take the home page, for example. If I were to remove the large IconDrawer icons and replace them with the much-loved and often-used famfamfam icons, those tabs are no longer begging to be clicked. Another example is the features page (one of my favorites), which would have absolutely fallen flat without these icons. Best $113 I ever spent.

Pixel Perfect

Once I had decided that the design direction had good potential, I started to add another layer of subtle refinements and detailing. The dictionary on my Mac defines subtle as “a change or distinction so delicate or precise as to be difficult to analyze or describe.” This definition perfectly explains the balance that I attempted to maintain when adding these details to the ExpressionEngine site. The goal is not for the details to draw attention to themselves, but instead to give the site that visual x-factor that is difficult to analyze or describe—difficult, but not impossible.

Take the footer, for example: If you contrast one of the early drafts of the footer with the finished one, you can see that a few delicate touches were added to give it an extra bit of flavor. I swapped the icons so that they would stay consistent with the rest of the site, added a soft grey fade along the bottom to suggest a bit of dimension, and refined the buttons to give them a more buttony feel. None of these effects really stands out on its own, but when they are all added together, the total is greater than the sum of the parts.

The footer wasn’t completely done yet, though. After I zoomed in a few hundred percent, I could see that my vector graphic wasn’t completely lining up to the pixel grid in Photoshop, and as a result, it was giving me a soft edge down the right hand side. If you take another look at the zoomed out screenshot above, you can see the difference if you look for it. Attention to minute, pixel-level details like this might not be easily apparent to the naked eye, but they can make a big difference in the final design.

Rolling with the Punches

I originally didn’t have this section included in the article, but after a substantial change was made to the site just prior to launch, I realized that I should also include some advice for when things don’t go according to plan. You may have already noticed that the featured user section on the mockups and the live site look a little bit different. On the morning that the site was to launch, I loaded up the development site to discover that the user section was replaced by a new graphic and message.

I was surprised at the change, and jumped onto iChat to ask Rick about it. I had grown pretty attached to those three columns, and was wondering what happened to them. Rick let me know that he done a lot of thinking about it, and felt very strongly that the replacement message was what he wanted to go with, and that if I wanted to tweak the graphic a little, I was free to do so. My first instinct was to fight the change, and to push for them to change it back to the original layout. With only fifteen minutes on hand before the site was to start the launch procedure, I fired back a quick mockup that I felt preserved the new message and the older format.

Rick stuck to his instincts (which I respect completely), and reiterated that he wanted the information presented in the same way. I then had a quick funeral for those three columns (I’ll miss you dearly), rolled up my sleeves, and got back to doing what designers do best—solving problems. The new graphic on the left side weighed about the same visually as the featured user photo on the right, and they were competing with each other for attention. Also, the new headline and text didn’t line up with the underlying five-column grid, which made the transition from the header to the content section a little bit jarring.

I went as light as I could with the logo to fix the visual weight issue, and tucked it under the headline—which I was then able to align to the left. Rick approved the changes and we managed to sneak them in minutes prior to launch. Whew.

It Doesn’t End Here

Launching the site doesn’t mean that my job is over. I think it’s important to have a strong sense of what you envision for a site, and to have confidence in your choices, and this comes a bit more easily as you gain experience. At the same time, it’s not all about the designer, it’s about the clients and the users. I expect that we’ll see the need for some refinements as the sites are used and we have time to live with them. In that regard, a website isn’t a static design, and once it launches, it’s not mine anymore—it’s a living, breathing entity that will change as others interact with it, and as it grows.