This is part 4 of the 9-part series on Redesigning StevePavlina.com.
Planning the Details
At this point I had to do some planning work for the site. For years I’d been accumulating ideas for the inevitable website redesign, scattered across several documents. These included my own ideas as well as reader suggestions. I captured all those ideas when they came up, knowing that I’d someday tackle this project and could process the ideas later. Now it was time to do that processing.
This part probably took a couple of days because there were around 30 pages of ideas, largely typed in random order. Some were duplicated more than once. I took the time to carefully organize them, arrange them in a structure, and prioritize them. I probably had at least a year’s worth of ideas in terms of how long it would take to implement them, so I knew I couldn’t realistically explore them all. Some of the ideas conflicted with each other, so there were some either-or decisions to make too.
I used Scrivener to organize and plan out the project. I’d bought Scrivener in July 2015, several weeks before I began this project, and it seemed like a good fit for organizing all the ideas I had. I’ve been using it for other projects too, and it has served me well. It has a ton of features, many of which I don’t use, but the core functionality is similar to a PC program I used called ActionOutline, which unfortunately hasn’t been updated in many years. Scrivener is technically a program for writers that helps them create books or screenplays, but I find it useful for general project management as well.
I began copying and pasting ideas into Scrivener and arranging them in a logical order based on the parts of the site they referred to: general design, menus, header, footer, plugins, admin, security, maintenance, typography, colors, search, archives, bug fixes, blog posts, products, events, new pages to create, mailing list, advanced features, etc.
As I compiled this list, I came up with other ideas too, so I added them to my evolving outline as well.
When I finally had a reasonable draft of the project outline, I sighed and thought to myself, This is going to be a lot of work! The project was clearly going to take months to implement, even if I cut most of the optional features.
It was good timing for me to tackle this kind of project though because I had been working a lot on my patience and persistence that year. Earlier in 2015 I’d completed some difficult personal projects that required a lot of tenacity, so I felt ready to tackle a public-facing project next.
Throughout the project I would keep referring back to the outline structure I created in Scrivener, deleting completed items and adding new to-dos that came up along the way. It wasn’t a chronological outline since I had the flexibility to tackle the pieces of the project in almost any order, but it gave me a reference to measure progress and to keep track of what still needed to be done. It wasn’t a completely thorough outline either, but it was certainly good enough to get started.
Perhaps the biggest benefit of this outline is that it kept me from getting distracted. Whenever I came up with ideas unrelated to what I was working on in the moment, I could quickly add them to the outline to consider later, and then I’d return to working on the present task.
Menus
One of the first things I implemented was the new menu structure. I knew I wanted to use a drop-down menu for the new site since I liked that structure on other sites. It was intuitive as well since drop-down menus are commonplace in a wide variety of software. This functionality is supported by WordPress and Beaver Builder, so it didn’t require any special programming. The only real challenge was deciding what to put in each menu.
Before I added the menu structure to WordPress, I outlined it in Scrivener. I wanted to have a maximum of seven top-level items, not counting my name (which links back to the homepage) and the search icon.
This wasn’t difficult. I realized it didn’t have to be perfect because changing the menu structure is easy. I figured that I’d make some tweaks to it even after launch.
The new site already had blog posts on it since I imported the database earlier, but it didn’t have any pages yet since those would have to be recreated in WordPress from the older HTML versions. So for the menu items that didn’t have associated pages yet, I just had them all link to a stub page, and I would update them later once their associated pages had been created.
I made minor changes to the menu structure several times during the site’s development, but I largely maintained the original design.
This was a nice action step since it didn’t take long, and it gave me a feeling of progress. The new site now had a working menu, and one of my upcoming goals was to create all the pages for the menu items.
Sidebar or No Sidebar
The next decision was to decide whether or not to use a sidebar, similar to what I had on the original site. This wasn’t just about a design element. The decision involved clarifying my overall business philosophy too, more than I initially realized. Throughout the project I occasionally encountered design decisions that seemed trivially basic, such as choosing one of two options, but once I drilled down into them, I realized there were deeper clarifications to make before proceeding.
I had originally expected to include a sidebar since I figured it would be necessary for business reasons. On the other hand, I also felt that if I could design the site without a sidebar, it would probably make reading articles a more pleasant experience. I usually find sidebars distracting on other sites, even if they don’t animate. But I began with the assumption that a sidebar would be necessary for a site like mine.
One of the main reason sidebars are used is for monetization. It’s a prime place to put advertising, affiliate links, newsletter sign-ups, and other promotions. And for that purpose it works. That’s probably why they’re so popular.
I knew I could use a sidebar to increase the visibility of new workshops, new promotions, and the most popular articles on the site. It worked reasonably well for my old site. So why not keep it?
I had recently read a wonderful book called The Pumpkin Plan, which uses lessons from growing giant pumpkins as an analogy for business success. The book emphasizes that a business can grow faster if it does a better job of serving its best customers (as opposed to its average customers or non-customers). To grow a giant pumpkin, that pumpkin must eventually become the only pumpkin on the vine, so it gets all of the vine’s energy. This aligns well with my own business philosophy, which is to focus on serving people who are clearly interested in personal growth, not people who have to be convinced of its value. I don’t chase the apathetic.
My best customers are the people who attend my workshops. On average these people have been reading my work for about 4-5 years before they go to their first event. I can’t imagine most of them needing or wanting a sidebar. They’re already very familiar with the site’s content, and even with a new design, they’re going to pick it up quickly. Many of them are eagerly looking forward to new workshops, and they don’t really need constant reminders about them. A better way to serve them would be to make it easier to read articles with minimal distractions. There’s really no need to push anything at them to try to wrangle their attention away from the primary content on a page.
My best customers are very committed to personal growth, and if a particular offer makes sense to them, they usually respond with something like a “you had me at hello” reaction. Otherwise if they’re not interested in something, it’s unlikely that I’d be able to persuade them to become interested anyway. The best I can do is to deliver workshops that align well with their desires and interests. When I do a good job of that, plenty of people show up.
I tend to be the same way. If something interests me, I can go all-in quickly. Otherwise if I’m not interested, the constant reminders are more annoying than persuasive. For the extra people that may be persuaded by lots of extra reminders, you could argue that it’s a bad trade-off, given that this approach will simultaneously annoy many times that number. The typical sales and marketing expert might say that this is a numbers game and that you have to fire a lot of shots. I question this approach though. I don’t think it’s the best long-term strategy for me. Why strain my relationship with so many people in an attempt to nudge one more towards a sale? It seems there must be a smarter approach than this.
I expect that if I make the site easier to use and less distracting, then it will be easier for people to engage with the free content, sans distractions and reminders. Then if they want to engage more fully, they can sign up for themailing list, attend a workshop, etc. Some of these people will really love the free content and will eventually want to check out the workshops and/or product recommendations.
This feels more congruent because it also aligns with my general philosophy of relationships. I’m not into persuading people to do things. I’m not into chasing. I’m into mutual compatibility. I like spending time with people with whom I share a natural affinity. I like the idea of having a website that reflects this philosophy too.
I like ad-free sites that are easy to read. A while back I started using an ad blocker, which has blocked about half a million ad impressions since I started using it. If my readers are similar, I expect they’d appreciate an ad-free, uncluttered site over the alternative. And I suspect that if they see that the site is designed for people like them, they might also surmise that the workshops are too (which is true).
I like making invitations instead of trying to capture sales. Sales happen naturally when there’s high compatibility between the offer and the individual. When the compatibility is weak, I’m okay with letting potential sales go. This frees up time to do a better job of serving the people with whom compatibility is high, such as by doing more workshops.
I also want to keep my business enjoyable to run. The more I enjoy my work, the more motivated I feel. When business feels like a chore, I’m more likely to procrastinate. Trying to persuade and serve low-compatibility people is a chore because there’s friction in the relationship. Serving high-compatibility people is a joy; the friction is replaced by fun, connection, and growth.
The workshop where I did the least amount of promotion was the last one, the Conscious Heart Workshop in 2015. That workshop also got the highest ratings of any, especially for the social connections. I think the reason was that the attendees didn’t have to be pushed or convinced to go. This was a workshop with no pre-determined theme or topic and no obvious benefits — it was done in an inspired, off the cuff, go with the flow manner throughout — and people still signed up. Afterwards some attendees told me they’d love to go to it again.
So I’ve seen that pushing for sales isn’t necessary and that a more yin style of marketing seems to work well for me. It’s as simple as inviting people and then respecting their freedom to decide for themselves. When I think about it, this is how I like to be sold as well. Just give me the details, and if it looks good to me, I’m in. An occasional reminder is okay now and then, but don’t go overboard with it.
In the end I tested both options just to be sure, and I liked the sidebar-free design better. It made each page of the site look cleaner and simpler. The eyes were drawn to the primary content, not to distractions on the side.
Another element I had to consider is that more people are accessing my site via mobile devices (currently about 40% of all traffic to the site), and sidebars don’t make sense on smaller screens.
Interestingly enough, by making this decision based on what I felt the best customers would like and based on what I liked, I think it’s also the right decision for the casual visitor. Most new visitors land directly on one of the articles, usually coming from a search engine or a referral link on a related website. Once they land on my site, their choice is mainly to read the article or to hit the Back button and leave. I like offering new visitors this simple choice, as opposed to loading a page with lots of extra links in the hopes that they’ll click on something, or trying to bribe them with a freebie to join the mailing list.
It was more difficult at first to design the site to be sidebar-free, but I found that all of the info that would otherwise be included in a sidebar could be conveyed in another form just as well. I looked at everything that I’d been including in the old site’s sidebar, and I felt that most of it was redundant anyway.
Furthermore, if most other bloggers are using sidebars, then having a sidebar-free site makes mine stand out from the crowd a little more. People will be exposed to plenty of distracting sidebars elsewhere on the web. My site can be their sanctuary from that.
Later in the project, I decided to add sidebars to the individual workshop pages and the product pages. For those pages the sidebars serve a clear purpose that increases usability. The sidebars share important information such as a workshop’s price, ordering button, location, dates, and hours, so the sidebar content is strictly relevant to that particular page. This decision came about through testing too. I tried both options, and in this case, the sidebar version made the pages easier to use.
Categories
One design improvement I wanted to make was to simplify the blog’s categories. There were 36 different categories on the old site, but they weren’t very intelligently designed. The structure had evolved over time, whereby I’d occasionally add a new category when I started blogging about a new topic. These categories were listed in the sidebar on the old site, but without a sidebar it would be unwieldy to stuff 36 categories into the menu.
I spent a few hours working on this and came up with a plan for remapping the old categories to the new ones, which looked like this:
- Announcements <- General
- Productivity <- Balance, Career & Work, Getting Things Done, Goals & Goal Setting, Problem Solving, Productivity, Success, Technology, Time Management
- Abundance <- Business, Entrepreneurship, Passive Income
- Creating Reality <- Consciousness & Awareness, Intention-Manifestation, Lucid Dreaming, Metaphysics, Psychic Development, Spirituality
- Emotions <- Courage & Fear, Motivation, Passion
- Health <- Health, Sleep
- Lifestyle <- Humor, Music, Personal Development, Public Speaking, Travel
- Relationships <- People Skills, Relationships
- Values <- Planning, Purpose, Self-Discipline
Then I had to find a way to apply this remapping to all the articles. I could have done this by using phpMyAdmin to do some searching and replacing in the database, but it was easy to find a WordPress plugin that did exactly what I needed. I don’t recall which plugin I used, but all I did was install it, tell it to reassign the blog posts from each old category to the corresponding new category, and then I uninstalled it and never needed it again.
Later in the project, I added rewrite rules to the .htaccess file to redirect all the old category pages to the new ones, so links to the old categories wouldn’t return 404 “page not found” errors. For instance, here’s the line for redirecting the old Travel category to the new Lifestyle one:
RewriteRule ^blog/category/travel/?(.*)$ /lifestyle/$1 [R=301,L]
I also redirected the old Podcasts category to go directly to the new Audiopage. I stopped podcasting in 2009 because it was one too many media to manage, but all the podcasts are still available on the Audio page.
Additionally, I added a new Favorites section to the website. This looks like any other category, but it wasn’t implemented as one. My blog doesn’t actually have a Favorites category internally. Instead this is a collection of posts that I’ve manually assigned to Beaver Builder’s Posts Grid Module, so this relies on a special feature of the page builder I’m using. I could have added the same functionality by adding a new category, but that would have taken more time because I’d have to edit the categories for many posts (or tweak the database) to add each post to the new Favorites category. With Beaver Builder it was faster and easier to add this feature.
The new Favorites section was an evolution of the “Best of StevePavlina.com” sidebar section from the old site. It includes the most popular articles, the most impactful articles based on reader feedback, and my own personal favorites. Initially I had planned to split these into separate lists, such as Most Popular and Steve’s Favorites, but I didn’t see the point in making such a distinction. It seemed simpler to just have a single Favorites category. Otherwise there would have been a lot of overlap between these lists anyway.
It wasn’t easy coming up with good category names because there were so many possibilities to choose from. I could have used different labels for many of them. In the end I chose to favor labels that slant towards the personal development aspects of each topic, as opposed to labels that may be more common in other fields. This is why I used Abundance instead of Business, Money, or Entrepreneurship. I wanted to align each label with the known desires and interests of the people visiting my website.
I like the simplicity of the new categories, and the mapping from the old categories to the new ones worked reasonably well. I manually edited the categories for some posts where I felt the remapping wasn’t quite right.
This simplification of the categories also makes my work a little easier when writing new articles since I don’t have to select from among 36 different categories.
Colors
As a color blind person, I knew I’d need some help with this area.
A person with normal color vision sees about one million shades of color. I see about 25,000 shades, or 2.5% of normal. How am I supposed to design a website for people who see 40x as many colors as I do?
Fortunately my girlfriend Rachelle has normal color vision, so I leaned heavily on her to help me with the color aspects of the site. It’s amazing to have a girlfriend who can tell the difference between red and brown. I don’t know how she does it — it’s like magic!
I wanted the site to favor the blue range of the spectrum because that’s where my color vision is closest to normal. I thought cooler colors would give the site a relaxed vibe as well. Warm colors like reds and oranges didn’t seem to fit. I also liked muted, less saturated colors. Rachelle agreed.
I did some research on color theory and played around with a few online tools. I learned some things here and there, but it all seemed a bit abstract, especially since I couldn’t validate many of the ideas with my own eyeballs. I did glean from this research that a good step would be to choose a color palette for the site. The palette didn’t have to be very big; around five colors total should be plenty. The colors in a palette would all work well together, so as long as I limited myself to colors from the palette, I should be reasonably safe.
I soon found Adobe’s Color Wheel, which was a great tool for exploring palettes. My favorite feature was the camera icon, which let me upload an image, and the tool would generate a small palette based on the colors from the image. I tried uploading a bunch of different photos and looked at the resulting palettes.
I showed this tool to Rachelle, and she went hunting for images that had colors she liked. Eventually she came across a photo of a geode with rings of colors that we both liked. The resulting palette consisted of relaxing, non-ostentatious shades that Rachelle described with words like teal, moss, pastel mint, lemongrass, and off white. These colors looked very nice with a navy blue header and footer too. We had found our palette.
So the color scheme for the new site was inspired by a geode — by nature itself. I like that!
Rachelle and I began assigning colors from the new palette to various elements on the site, such as the links and buttons. We lightened some colors to use as backgrounds. We experimented with slight variations, asking questions like, Is #9BBEA8 better than #96BAA1? We also found that going slightly off-palette was okay in limited doses when we needed more variety, such as the icon colors on the home page.
We probably spent a few days just getting the colors right. We kept experimenting until we were both pleased. Sometimes we’d do more rounds of tweaking after more pages on the site were filled out.
The new site is fairly restrained in its use of color, which was by design. I didn’t want people to be distracted by color, especially while reading articles. But I didn’t want to go minimalist either and settle for black and white.
It was fun to work on this part of the project with Rachelle. I thought we worked well together as a team. Sometimes it was pretty draining though. My brain felt extra tired at the end of those days, like I was overtaxing some neural circuitry that wasn’t used to so much activation.