5 Steps to a Killer Website

5 Steps to a Killer Website

Image from FreeFoto.com

We recently launched a new website for our athletic teams.  We adopted a process that was used when we redesigned our main college website last year.

The Athletic Director was fairly new to the college and was quite anxious to have a new website, and at times appeared to just want to get it done, instead of going through this “lengthy” process.  I could understand his desire to get this going because our athletics teams haven’t had a
very good presence online.

The Killer Web Design Process

  1. Develop a Strategy: When we worked with our consultants on the main college website, the web strategy document was a 75 page document.  It was very helpful in identify target audiences, goals, tactics, etc.  Going through this long of a process for smaller departments on campus or clients could be overkill.  We adopted a simpler Strategy Questionnaire that asks the client to identify target audiences, profiles, objectives and strategies.
  2. Draft an Information Architecture: Based on the information in the strategy questionnaire, draft an information architecture document, which is an elaborate site map. The content should answer the questions from your audience profile section of the questionnaire.
  3. Design a Lo-fidelity Wireframe: Before jumping right into the visual design, design a lo-fidelity (lo-fi) wireframe.  This is simply a “blueprint” for the website without visuals, style or colour. A great tool that we used is iPlotz, and they even have a free plan.  Designing a wireframe allows you to focus on layout without the complication of color.  We all know that there have been countless discussions like this, “should the button be blue and round or green and square.”  The wireframe approach takes that out of the equation and allows for a smoother design process.  It also allows you to not get attached to a design that you spent weeks on, because wireframes can be cranked out in a matter of hours.
  4. Visual Design: The efforts of the first 3 steps allow your visual design process to be more focused and efficient.  You don’t have to worry about where a button should go or what feature should appear where.  The design process is quite rapid because many of the decisions are already made.  A tool that I have used which is great for gathering design feedback is ConceptShare.
  5. User Research / Usability Testing: Even though this listed as step 5, if you can afford it, you should conduct user research and usability testing all along the way.  But at a minimum, you should test your wireframes before investing time in the design phase.  You may find that you are way off-base, which would be more costly in the design phase. A couple of tools to consider are Fivesecondtest and Usabilla.

You may be asking yourself, “what about the Athletics Director?”

Well, a few weeks ago we previewed the athletics website with the athlete advisory council.  We showed them the site, the cool features and emphasis on athletes.  To quote one of the athletes, “that’s sic!”

After the preview and the extremely positive response, the Athletics Director seems to changed his demeanor.  I believe he now understands the value in research and planning before building.  The days of “whipping” up a website and uploading it to the Web are gone.

Remember to research, plan, design – in that order.

  • Tyler

    Great Article, this is actually the same process that I am using currently. The biggest difference is that I am using Keynote to build the wireframes and am finding that it is working pretty good.

    Once again nice article.

  • http://www.mikemccready.ca/blog/ Mike McCready

    Thanks for the kind words. I would love to share thoughts with you and your team more. I think there is a lot that we can both learn from each other.

  • Tyler

    Yes I think there is a great deal of cross pollination that can happen. And even if in the worst possible scenario that nothing is learned we have at least strengthened our working relationship.