Posts in This Series

Part I: A Completely Unnecessary Redesign

...in which the redesign of this site is announced.

Part II: The Path Ahead

...in which the redesign process is outlined.

In the last post in this series, we embarked on a complete redesign (both from a usability perspective and a design one) of this, my personal web site and blog. Today, we’ll take a look at our roadmap for doing so. Though it’s tempting to simply “jump in” and start sketching a redesign, it’s important to have a good foundation to keep us focused on what matters, so we’ll begin there.

Users and Usability

The most important component of any system, be it blog or otherwise, is the user. Though it may seem obvious, users frequently take a back seat to technology, and clever new techniques are often given more consideration than whether users’ goals are efficiently accomplishable.

This site’s redesign, then, will of course begin with users. We’ll start by identifying the most common user types and their goals, focusing on factors such as how they arrived at the site (say, a tweet or a search result) and why they’re here (to solve a particular JavaScript problem, for example). We’ll look at two or three different types of users, and distill everything we can determine about them into meaningful metrics to keep us on track.

Next, we’ll perform a survey of the existing design’s content: the types of pages within the design, where the most “useful” parts of the site are found, and what ancillary information is being displayed. A common problem on blog sites, especially, is the focus on titles and headers, advertisements, and other sometimes-helpful, but rarely-essential, content; we’ll take special care to avoid that pitfall.

Finally, we’ll compare users’ goals with the way content is arranged currently to determine the areas that need the most improvement. From this, we’ll rearrange, reconfigure, and generally tweak the layout so it best meets the aforementioned goals before moving on to implement it. This part of the process is a tad easier for this site than most, as there’s already a design in place on which we can iterate( otherwise, we’d likely start by creating some basic content arrangements first, using user goals as a guide).

Visual Design

Thus far in our plan, we’ve paid little attention to the stylistic aspects of the site. This is deliberate: before getting ourselves bogged down in colors and typefaces, we’ve focused on making the experience a more pleasurable one for users. This is the point, however, at which we’ll shift gears and move into more visual aspects of the redesign.

To begin, we need to define the personality and character of the site. Should it come across as professional and serious, or wacky and light-hearted? This is my chance to bring my design preferences and personality into the site, while still meeting those essential user goals. We’ll list out some adjectives to help us get a feel for the site’s disposition, and build up something akin to a human personality for the design.

After we have a good idea of where the visual style is headed, we’ll move on to creating some specific assets to guide the design implementation. I’ve had some excellent results using “style tiles“—documents that show the major UI elements of a design, from colors to typography—so we’ll work to put together one or two of those. These style tiles will be excellent references when we begin implementation.

Next, we’ll move on to said implementation: turning these assets into HTML, JavaScript, CSS, and images. There’s also a possibility that this site’s current blogging platform, Jekyll, won’t quite fit our needs, so we may be reevaluating blogging engines along the way, as well.

Once the implementation is finished, though, there’s still some work left to do. We’ll need to analyze some traffic patterns to make sure the redesign worked: mainly, that users stay on the site longer and, hopefully, move on to discover more content. For this, we’ll look at some analytics sites and how we can best take advantage of the tools they provide.

What’s Next

Now that we’ve discussed the broad steps we’ll be going through for this redesign process, it’s time to get started in earnest. In the next post in this series, we’ll begin identifying those always-important users and their objectives. Stay tuned!