Drawing from my experience as a Product Manager, I approach each client project with a clearly defined, goal oriented process. This ensures that the resulting website matches their expectations and avoids wasted work. I am a major proponent of the axiom "measure twice, cut once." By flushing out the project specifics upfront, we avoid having to make changes later on when it is more costly.
Goals: The process starts with the definition of the goals for the website and how they correlate to the overall business. How does the site create value for your business? What user actions on the site represent that value? What experiences can we provide that will act as decision drivers for that user action?
Site Architecture: The next step is to review the visual and written content that will comprise the website, and determine an architecture that is oriented around achieving the site goals - i.e. making sure your high priority content gets in front of your users.
Brand & Design: It is important that the site design matches the client's brand. I like to collaborate closely with clients at this stage - putting together a compsite of existing materials and eternal touchpoints that will be used as reference. This often involves looking at other websites and picking out aspects that we like or want to avoid. I then put everything together a series of wireframes that we review, edit and finalize.
Development: Once designs are in place, the actual technical implementation begins. I review progress at checkpoints to ensure we are on track, and then present the final result for review and edits before we push to a hosting service.
Below is an example of my process carried out with the redesign of the website for the interior design firm Mark Cunningham Inc.
In my initial conversations with Mark, we identified two primary use cases for the site - potential clients researching his work, and design fans who had found him on Instagram or Pinterest and wanted to see more of his work. The goal was to convince the first group to hire him, and the second to follow him on social media.
The site therefore should be designed as a kind of sales pitch with an emphasis on rich visual experiences (Mark's craft is a visual one, after all), consisting of three parts - a landing page that draws the viewer in (the hook), a set of pages containing his portfolio and credentials (the pitch), and a page that contains his contact information and social media links (the close). The whole package then needed to be tied together by a navigation system that made it easy to transition between these pages.
As an exercise, I asked Mark to identify a list of words to describe the site that he wanted to have. From that list we selected three finalists that we would use as a starting point for the design.
Clean - Mark’s personal style is simple and precise, and, as a reflection of him, the site should be too.
Innovative - We looked at many sites of other interior designers and they often felt repetetive. It was important that Mark’s site be distinct.
Editorial - Mark wanted the site to have the feel of a glossy magazine spread.
We used these three concepts and the two use cases as the basis for design decisions going forward.
Even though Mark wanted to rebuild his site from the ground up, I began my design process by examining the existing site. The first thing I noticed was that the images were small and as a result I was clicking through them quickly without examining the details. I also found that images from different projects were formatted differently, which made the site experience inconsistent and some projects look better than others. My takewaway was that images should be in a larger format and presented in a consistent manner across all projects.
The second thing I noticed was that navigation was laborious. It took multiple steps for me to go from landing page to images of his work. once you arrived at a project page, it would take multiple clicks to get to another project. The old site architecture looked like this:
I wanted to remove the points of friction that might prevent users from exploring multiple pages, and, in general, get users looking at his work as quickly as possible. To do this, I flatted the site’s architecture so that every page is available to the user with just a single click at any given point. The new site architecture looked like this:
To further reduce complexity, I combined the “Residential” and “Commercial” project categories. The “Commercial” section had only a single set of images - the equivalent of one residential project - so I did not feel that it warranted a separate section. I also combined the About and Contact pages, since the information contained on them was closely related.
To make the new site architecture work, I needed to create a navigation system that tied it all together in a seamless way. This presented one of the primary design challenges of the site. Mark had over 15 projects and I needed a way to present the full list of options in a way that did not detract from the overall visual presentation.
The project pages use varying widths and layouts to mimick the editorial feel that Mark wanted, and also to give each project its own character.