I want to rebuild my website. Wait, let me be specific — this website.
When I first built the Learn to Code With Me site you see today (over the summer of 2014), my skills were pretty elementary. (Arguably, they still are.)
Nevertheless, I have learned a lot since. And I know I can make the site much better. It could be faster, easier to navigate, offer a better user experience, and more.
But where do I even begin?
Where to Begin The Website Redesign Process?
Naturally, I have a ton of questions.
And when I began to researching online, many of the results I came across left me overwhelmed.
Unlike a company, I am one person. I don’t have a team. There’s no designer, UX guru, developer, or content creator. Well, there is. And it’s all one person — me.
As much as I’d love to jump right in and get my hands dirty — I need a plan. But before even creating a plan, I need to know what my goals are. And what I can realistically achieve.
Considering The Research
My first few Google searches brought back fairly irrelevant results — at least for my purposes. (Shame on you, Google!)
![google results](png/google-results-1024x926.png)
I don’t want to read about the “signs” of needing a new website. I want to know the best approach to take when rebuilding what I currently have.
Finally, after some digging, I came across several promising articles / videos / infographics.
Below I have included three. Each highly summarized with emphasis on the parts that I found useful for my purposes.
(Note: always keep in mind whenever researching the perspective that the article has been written in. Is it on a company blog? If so, they probably have other intentions in mind. Like getting your business. Not that their information is inaccurate — just keep that in mind.)
Article 1: “A Four-Step Strategic Website Redesign Process”
This article was written two years ago. So, in late 2014, it could be considered outdated.
Moreover, the four steps the author points to are geared towards a business owner, not so much a developer/designer. Nonetheless, I like some of the questions he poses.
For instance, in step one, he talks about goal setting. He recommends asking yourself, “What is the purpose of my website?”
Then, after covering business goals and sales funnels, in step three he recommends doing a current website evaluation.
Specifically, asking yourself what are the strengths and weaknesses of the existing site.
I like step three.
Article 2: “Never Redesign Your Website Without This Strategy!”
This article (link removed as article no longer exists), written in 2014, was published on the Crazy Egg blog. Crazy Egg sells website heat maps. (Meaning, you can see where your website visitors are clicking / spending the most time on a given page.)
That being said, this article has been written from a marketing perspective. Not a designer’s or a developer’s.
Anyways, in this piece author Chris Goward emphasizes taking on a gradual approach to the redesign process. And testing along the way. He calls this method, “Evolutionary Site Redesign”, or ESR.
Chris continues, “The truth is that a dramatic, ‘revolutionary’ redesign is dangerous for most companies.”
Important caveat — I AM NOT A ‘COMPANY’. But point taken.
Instead, Goward recommends implementing,
“a system of continuous A/B split testing throughout your entire website and digital marketing. Rather than relying on the gut-feeling and flawed intuition of an art director, your website decisions should be made against the crucible of customer actions.”
While I don’t have the money and more importantly the time to split test every little design tweak — I do like what he says about introducing gradual changes.
I mean, think about logging into Instagram or Twitter and not recognizing the front screen?!
That scenario reminds me of one of my favorite quotes ever, “If you confuse people, you lose people.”
So, when coming up with a strategy, I am going to consider the best ways to implement moderate change rather than sudden.
Video 3: “6 Steps to Effective Web Design Planning”
So this is not an article, but a video. And a short video, at less than 2 minutes. (However, beware! The entire video is focused in on a man’s beard … )
Nevertheless, the 6 steps he shares are:
- Find a purpose: What do you want the site to do? And how to achieve it?
- Define your audience: Who is your audience?
- Plan content: Including typography, graphics, video etc.
- Plan the navigation: Defining a clear, concise path to and from information the user needs. Specifically, applying a “3 clicks or less” rule. (Meaning it shouldn’t take a person more than three clicks to get where they want to go.)
- Plan the pages: What’s essential?
- Plan the experience: With your goals and target market in mind, organize the pieces of the site.
Compared to the first two articles, I really like these steps.
In particular, I love part four’s “three clicks or less” rule, and number five’s planning the pages.
When I first built this site, I wish I would have given navigation and page structure more thought. Instead, I just made it up as I went along.
Taking What I Found and Adapting It To My Own Site
So, it’s pretty clear that there is not one article of advice out there for everyone. All websites are unique, with their own special goals and audience.
As you saw, some articles are geared towards the business owner or manager, looking to hire people to build the site.
Meanwhile, others are more for marketers. And then of course some for UX, designers or developers themselves.
Nonetheless, it became obvious that analyzing an existing site and planning is important in the early stages of the process — no matter how big or small your website may be.
So, I decided to do my own question and response exercise to get the ball rolling. You know, some reflection.
(And I’d recommend to others trying to rebuild their own site to do similar — that is, establishing what you are hoping to achieve before diving in.)
1) Why do I want to redesign my site?
I like my site, overall. Don’t get me wrong.
But I don’t love it.
Since I have begun learning to code, my skill set has grown immensely. I look back at the CSS I wrote in July and cringe.
More than that, I want to make the site faster, the code more organized and provide an overall more user-friendly experience.
From a design perspective, I am not looking for a complete and total overhaul. But I do want a fresher look.
However, from a tool/framework perspective, I am thinking of a more drastic change. For instance, rather than CSS I want to implement Sass. I also want to setup a task runner like Grunt or Gulp.
Moreover, I want to add special PHP functions (specifically, filters and actions) to make certain aspects of the site more efficient and better organized. (In example, using these custom functions to add forms to the bottom of certain pages.)
I figure it’s better to get my house in order now than wait till a year down the line, when my CSS file reaches 5,000 lines …
2) What is the goal of the site?
This question appeared in article one and video three, so I feel like it’s important to address.
The goal of my site is to provide people with information on learning how to code.
The information can vary. But it is all geared towards beginners/intermediate learners.
I truly want to create a community of people learning together, who can share and learn from one another’s experiences. (Including learning from those who are seasoned and can offer insights on what they wish they did differently — like Jon Chan, from Bento.io.)
3) How would you define your audience?
This is another component of the planning process that I saw repeatedly.
So, who is you audience?
Are you creating a design portfolio to show during a job search? If yes, your audience is potential employers.
Are you a local business? If so, your audience is your potential and existing customers.
As for me, from what I have gathered my audience primarily includes,
- adults looking for a career change or to gain more skills in their existing role
- students considering studying CS in high school or college
- others trying to build their own website/app
Essentially, people who are learning how to code and teaching themselves how to do it.
That’s who I think my audience is. But who are they truly?
Well, as far as demographics go, from what I see (and what my Facebook insights tell me), my audience is predominantly male and between the ages of 18 – 24.
![facebook fans](png/facebook-fans-1024x330.png)
I realize I cannot gauge my overall audience entirely on the breakdown of my FB fans.
But, I think it is a good start. And I believe it is safe to say a majority of my audience, or “fans”, are under the age of 30 and male. (This is also the trend I have seen from the people who send me emails.)
Looking at where people reside, again let’s turn to the Facebook page data.
![fb fans locations](png/fb-fans-locations-1024x477.png)
As you can see, most of my FB fans live in the US. The majority are also English speakers. (No surprise there, since my site is written in English!)
Regarding specific cities, however, London comes in first. (Which to me is in fact a bit surprising.)
Anyways, in the future I will look more in depth at who my audience is — beyond just my FB fans.
4) Do A Current Website Evaluation – What Are Strengths and Weaknesses?
The first article I noted above mentioned this specifically.
Strengths of the current site:
- Responsive design
- Not a total eyesore
- Well written content
- Content is organized fairly well
Weaknesses:
- Could be a lot faster
- Could be a lot sleeker
- My backend WP files could be a lot more organized
- My CSS files are bloated
- The navigation system + sidebar + footer could be more streamlined
So, that’s what I think. But, again, what do others think?!
(And, once again, more on that in the future.)
Introducing the “Insider’s Guide to a Website Redesign”
So, I finished my pre-planning questions. But, now what?
As I searched the web, I became frustrated.
There are tons of great articles, tools, etc. — don’t get me wrong. But no single place where I felt like I could go for answers.
Some articles were geared specifically for businesses, looking at how a website redesign could generate more revenue. Others catered towards marketers, looking at questions like how a website redesign could improve sign-up rates. (Which is important, without a doubt.)
However, I want to bring all these various pieces together. (Okay, not EVERYTHING. But pick out the best and most important parts of from each area: design, marketing, development strategy, etc.)
That’s why I decided to create “The Insider’s Guide to a Website Redesign.”
What is this Insider’s Guide?
Basically, it’s a special series where you’ll be able to watch me rebuild my site. It’s like a behind-the-scenes preview.
Aside from answering some of the questions I posed above, I will also look at the following:
- What is the best way to figure out if the site is user friendly or not?
- What are people’s first impressions when they come to my site?
- What is the ideal way to structure a website, as far as content goes?
- How can I make the site more usable in terms of design decisions?
- How much time should I spend wire framing my site in advance?
- How can I make my website faster?
- How can I test what is working and what is not?
- … and much more
Ultimately, I am looking forward to taking you along for the ride, where you can hopefully learn from any mistakes I make along the way.
Where can I read this Insider’s Guide?!
Of course, I am going to post articles throughout the process on my site.
However, the most informative and data-filled content will not be found on the Learn to Code with Me site.
Yes, you read that right.
Rather, it will be administrated through email to a select group of people. (And, depending how many sign up, there may even be a special invite-only website where people can tune in …. However, that’s to be decided.)
Don’t worry — this Insider’s Guide is totally free.
All you have to do is sign up here to gain access.
And you better hurry — because I will be closing sign ups in January, 2015.
(Why? Because I want to bring the same group of people along for the ride from start to finish. I don’t want any add-ons halfway through.)
Is the “Insider’s Guide to a Website Redesign” right for me?
The Website Redesign series is ideal for,
- Individuals who want to build a website or improve their existing one
- Small business owners (local or online-based) looking to take their site to the next level
- … really, anyone interested in building an awesome site on a budget
This series is not ideal for,
- A middle to large sized company with a team of designers, developers and UX gurus
- A person who could care less about best practices
- A person who is not interested in the User Experience of their website
- An individual who doesn’t care about SEO and related on their site
Realize a single person (read: me) cannot possibly cover every factor that can go into building or rebuilding a website.
Meaning I am going to focus solely on the most important aspects of a website redeisgn and what an individual on a limited budget can realistically handle (read: a person with other responsibilities like a full-time job, family, etc.).
Special Note: I Will Not Be Teaching You How to Code
ATTENTION: Throughout this series I will not be teaching you how to code.
Why not? Because there are countless of awesome places that already do just that. (And you can always email me at laurence@learntocodewith.me if you have any questions on where to get started.)
Rather, I will be documenting the website redesign process from start to finish by,
- Providing my own research and analysis on a range of factors that go into building a site
- Showing how to establish a realistic time frame
- Sharing awesome tools from wire-framing software to developer tools to website analyzers
- Showing how to convert a CSS-based site into Sass (or related)
- Discussing all the ways to make a website faster (which improves a user’s experience)
- Looking at how to test a website’s changes
- And then some!
Here’s Some Extra Reading
For those who are ambitious, check out a few of these resources/articles:
- Free email course, Hack Design, which takes a look at the core and timeless elements of design
- Neil Patel’s “The 10 Key Elements of a High Quality Website” Infographic (Also, browse his site because it’s filled with great marketing info)
- The 5 Most Common Design Mistakes – article by Julie Zhou (Product design director @ Facebook)
- Hubspot’s “Redesign Your Website” Guide – Comes from a marketing perspective, but does have useful goal setting info