Professional Documents
Culture Documents
The Secret To Building Large Websites Website Architecture
The Secret To Building Large Websites Website Architecture
The Secret To Building Large Websites Website Architecture
13/06/2013
Home
All Articles
Tutorials
Freebies
About
Contact
Follow on Twitter
Like
183
Tweet
427
When I started writing this, the idea of a skyscraper construction project came to mind. I thought of a huge skyscraper with restaurants, retail stores, offices, gyms, and residential spaces a large self-contained, compact community all by itself.
Advertise Here
Advertise Here
Search
http://sixrevisions.com/project-management/website-architecture/
1 / 23
13/06/2013
Search
No one would ever start the construction process of a skyscraper like that until everything is properly planned and drawn out.
Topics
AJAX CSS Design Showcase / Inspiration Flash Freebies Graphic Design JavaScript Mobile Photoshop Project Management Resources Tools Tutorials Usability / Accessibility User Interface Web Applications Web Design Web Development Web Standards WordPress
Recent
Are Your Web Graphics Print-Ready?
Im not a building architect or construction contractor, but I can still see the innumerable requirements you need to draw out before proceeding to construction. Room planning details, sourcing of good construction materials, managing the different teams involved in the buildings construction, zoning permits, funding allocation, natural disaster planning in case of earthquakes, the list goes on. Everybody considers design as an important component of things; whether its the design of a skyscraper or the tires of your car. Design is about not only bringing convenience, innovation, and comfort into peoples lives, but also in many cases such as skyscrapers and your car tires, peoples lives and safety becomes dependent on it. Im not an architect. Im an IT person. Im a concept designer to be more exact. For years, Ive been designing strategies and conducting research for very large, ambitious website projects. Concept design is the foundation of a robust website architecture. Like in the construction of a skyscraper, you need to have a sound blueprint for building largescale websites. In this article, Ill share our companys process for architecting large websites.
Lessons I Learned from Selling My Web Design Agency The Winners of Free Depositphotos Subscriptions A Guide to the New HTML5 Form Input Types The Secret to Building Large Websites: Website Architecture
Partners
Friends
1stwebdesigner Addictive Fonts AddToDesign App Sheriff Blog.SpoonGraphics BrushLovers
2 / 23
13/06/2013
The website architect needs to have a solid understanding of usability, in-depth knowledge of web development tools, online marketing technologies, and everything else involved in the construction and maintenance of a website. Just like an architect of a skyscraper or a residential home, she must be well-versed with the tools, materials, and processes of construction in order to plan the product efficiently and effectively. This person, our website architect, should possess strong logical thinking, has an analytical mind, is smart with commercial aspects of websites, and be attentive to details. Of course, for a guaranteed quality product, the architect can/should consult other specialists: designers, developers, etc. As you see, the ideal web architect in my mind should be a broad specialist, because, as youll soon see below, theres no getting away from that.
DesignM.ag Desizn Tech fudgegraphics Function GraphicsFuel iBrandStudio InstantShift LaptopLogic.com Marcofolio.net MyInkBlog Naldz Graphics NETTUTS
N.Design Studio Noupe Onextrapixel ProductiveDreams psdfan.com PSDVIBE Queness [Re]Encoded.com Smashing Apps Smashing Magazine Stylegala Speckyboy Design Magazine Stylized Web Technology.am TheBestDesigns.com Vandelay Design Walyou Web Designer Help Webdesigner Depot Web Design Ledger Wordpress Themes Shock WPBeginner
http://sixrevisions.com/project-management/website-architecture/
3 / 23
13/06/2013
2. 3. 4. 5. 6. 7. 8. 9. 10. 11.
Website Goal Definition Define the Target Audience Competitor Analysis User Goal-Problem-Solution Scenario Mapping Mind Mapping Information Architecture Prototyping Prototype Usability Testing Project Specification
As you can see, all these stages are related to each other, and weve organized it in a sequential manner. Lets discuss each stage.
Determine Competitors
Who are the websites direct and indirect competitors? The client and the website architect should be aware of the existing competitive environment. There are always competitors. Even if the websites idea is completely unique, there are at least indirect competitors.
13/06/2013
Some of your other questions will need to wait to be answered later on in the website architecture process. What you get out of the project briefing stage will be basic data and just to get a general feel of what your client already knows about his project. Its crucial to understand the clients needs and expectations at this early stage, and to choose the right direction for the project right at the starting line. The price you pay for not giving enough time to this simple but critical first stage exponentially grows as the web architecture process and website production progresses.
The deliverable of the briefing stage is a written document with detailed information given to you by the client and the decision-makers. This document should be approved and verified by the client. It can be in the form of a design brief.
http://sixrevisions.com/project-management/website-architecture/
5 / 23
13/06/2013
http://sixrevisions.com/project-management/website-architecture/
6 / 23
13/06/2013
The main goal of the web architect here is to determine all the possible groups of users, starting from the largest (core) group, and ending with the smallest one. Then we create a persona for each group. Each of the personas you develop should have a: First and Last name (Dont use the names of real people to avoid distortion of the story) Photo Age Location Occupation Marital status Hobby Skills Problems they need to solve Personal and professional experience To get a better image of your target audience you can interview potential users. This is about marketing research at this point.
http://sixrevisions.com/project-management/website-architecture/
7 / 23
13/06/2013
Your websites competitors can be direct competitors or indirect competitors. Direct competitors can be defined as any website operating for the same user base and who offer analogous products. For example, a direct competitor of Microsoft Windows is Apple Mac OS. Indirect competitors are competitors who offer similar products, but only partially satisfy the target audiences needs.
SWOT Analysis
There are different approaches towards competitor identification and analysis. I like SWOT analysis the best.
http://sixrevisions.com/project-management/website-architecture/ 8 / 23
13/06/2013
SWOT analysis the best. SWOT which stands for Strengths, Weaknesses, Opportunities, and Threats helps indicate the strong points and weak points of your competitors, and more importantly, aids you in figuring out project opportunities.
While analyzing competitors, you can discover useful site features and ideas worth adapting onto your own website general, universal site features like commenting systems, web forms, etc. Theres no need to reinvent the wheel in these cases. All good ideas you end up with during the competitor analysis stage will be needed for the mind mapping stage (which well discuss later on).
User Goals
Every person has short-term and long-term goals. There can also be sub-goals. For example, a person might desire to improve his career, but first he needs to find a job. The sub-goal is finding a job to reach the goal of improving his career. For our website project, we identify a persons goals, problems, and we look towards providing solutions for them. All goals should be designed well. Fuzzy goals wont help, as its impossible to solve all problems within one site. Focus on primary goals and keep the list of goals short. Some clients think if users listen to music online, their site should also provide such a service, even if their website isnt looking to solve this problem. The more features we add, the more diluted our core objectives become.
User Problems
When we have a list of concrete goals, we can determine concrete problems.
http://sixrevisions.com/project-management/website-architecture/
9 / 23
13/06/2013
For example, a user goal on our website might be to find a contractor that can build his construction project. That goal is more complex than it seems: How do we locate the right contractor for the users specific construction project? Is it important that the contractor is located close to where the construction project is? How do we allow them to quickly evaluate many candidates? Due to questions like these, youll generate ideas easily.
Our Solutions
When were done identifying goals and problems, its time to design and develop solutions for them. This process brings great fulfillment to the website architect because shes looking to solve pain points that her users have.
http://sixrevisions.com/project-management/website-architecture/
10 / 23
13/06/2013
Once again, we need to think like an end user and create probable scenarios of his actions on our website. Every goal of every persona has his/her own set of scenario maps. These scenarios help reveal weak points in our existing ideas and knowledge. Scenarios also help the website architect develop good user flows later on.
When we wrote out this scenario, we ended up adding these site features: "Zoopedia" rubricator "Read Also" widgets Links to pet stores and dog sellers on the breed information pages As you can see, scenarios help us find opportunities for improvement.
http://sixrevisions.com/project-management/website-architecture/
11 / 23
13/06/2013
See Also:
Customer Journey Maps
Find your list of ideas and divide them into logical categories. For example, lets say were working on a real estate website. The real estate websites sections might be: Property Catalog Community Forums Articles/News Information Center Map all of your ideas into one of these categories. If an idea fits in more than one category, choose the best fit for it. Brainstorming will help sift out the useless and unneeded features, web pages, etc. Each website section should be planned logically. Dont forget about sectiondependent features (such as the user being able to rate each property, in our example). Mark this connection with an arrow to remember the dependence (in our example, it would go to the Property Catalog). You can design your own symbols to indicate different functional sections. If the web architect, for example, is undecided in terms of which section a certain site feature belongs to, she can mark it with a question mark. These symbols are really important if the project is large.
http://sixrevisions.com/project-management/website-architecture/
12 / 23
13/06/2013
http://sixrevisions.com/project-management/website-architecture/
13 / 23
13/06/2013
The websites IA can be created with the help of flowcharting software like Visio.
See Also:
Information Architecture 101: Techniques and Best Practices How to Create Content Maps for Planning Your Websites Content
http://sixrevisions.com/project-management/website-architecture/
14 / 23
13/06/2013
Stage 9: Prototyping/Wireframing
You will need prototyping software for this stage. I recommend Axure, though there are a number of other similar programs.
The home page prototype doesnt necessary have to be prototyped first. For example, in the case of an online shop or a blog, the product page or blog post page should come first, because these are critical pages, and will typically be the landing pages of most users on the site. The website architect is going to lean on the mind map and information architecture diagrams to develop this prototype. When creating each web page prototype, you should focus on how the user can achieve his/her goals. Before prototyping, you should refresh your knowledge of your target audience using the previous stages in the website architecture process.
Client Feedback
The first web page prototype should be shown to decision-makers, and the reason for the layout should be explained to them. The client might revise and suggest some adjustments. Thats OK, because having this done on a low-fidelity prototype is much easier than if we had a higher-fidelity prototype. After the first page is approved, we can move to the next prototypes. All the ideas represented in our mind map should be found in these prototypes. Its crucial not to forget about the smallest detail, as it can turn to hell in the long run if you do.
http://sixrevisions.com/project-management/website-architecture/
15 / 23
13/06/2013
http://sixrevisions.com/project-management/website-architecture/
16 / 23
13/06/2013
http://sixrevisions.com/project-management/website-architecture/
17 / 23
13/06/2013
There are 90 some such prototypes for the example project above. As you can see, each prototype was broken down in detail. This way, no questions and uncertainty arose during the design of the functional prototypes and finished web designs.
http://sixrevisions.com/project-management/website-architecture/
18 / 23
13/06/2013
Usability testing at this stage will help you notice gaps and flaws in the architecture. For testing purpose, we invite some representatives of target audience and observe how they manage to reach certain pages and results within the site. Then, the users can be interviewed regarding the site in general. After usability testing we make final corrections.
http://sixrevisions.com/project-management/website-architecture/
19 / 23
13/06/2013
Related Content
Planning your E-Commerce Website Agile Web Development That Works How to Bake Content Strategy into Your Web Design Process
http://sixrevisions.com/project-management/website-architecture/
20 / 23
13/06/2013
Excellent article. This article guides me to move to next level in my carrier. Thanks Semenov for this Article
Andrew Hinton
June 5th, 2013
I cant help but mention this is how I and many other information architects have done IA for 15+ years. It still confounds me how folks assume IA is smaller or a subset of this w ork you describe. (I should note that now , IA is also about pervasive information environments, not just w eb) Thanks for the article, Im not complaining. Just going on record. :-)
Anthony Russo
June 5th, 2013
This is one of the better articles ive read on the subject of w eb project planning. Too often beginners open up a text editor and start coding/designing w ith no real goal in mind. Great read
Alastair McDermott
June 5th, 2013
Super article, Nikita, youve tied all the stages up brilliantly w ith the diagrams. Great reference article, Ill be sending people to this.
Yao Li
June 5th, 2013
Thanks Semenov for this Article! I am a w eb developer, and your article is useful for me to bulif my skyscraper!
Jennifer
June 6th, 2013
As a project coordinator to a start up company, I had new insight on how to start a project, it w as more like get a project and start w orking on it here, but after reading this article and i come to know that this is right w ay of w orking on project. Thanks a lot
http://sixrevisions.com/project-management/website-architecture/
21 / 23
13/06/2013
florian
June 6th, 2013
very nice article. w ell organized and a lot of information. one things that I feel is missing is content. w ouldnt you have to consider existing content and/or create a content strategy? also the section on IA seems w eak.
Jonathan Nelson
June 6th, 2013
Geri
June 6th, 2013
Fantastic article! I am seeking a career in w eb development and design and planning on attending school soon. I am starting research on the steps for w eb development and this is extremely helpful. Thanks!
Jacob Gube
June 6th, 2013
@Andrew Hinton: Could w e agree that maybe you IA guys have the characteristics of being a W eb Architect? Because w hen I think IA, I think: content organization, site navigation thats it. I w ouldnt expect you guys to manage the project briefing, design brief, usability research for the entire project (not just findability), competitive analysis, etc. How ever, w hen I think of w hod be an effective architect, I automatically think: Give it to the IA guys, they have the skill set and personality characteristics to do this gigantic task
Gareth Thomas
June 7th, 2013
Great article Nikita, Ill definitely be using this for reference on future projects, thanks.
Johan Johansson
June 7th, 2013
How does AI fit into the context of content planning / w ebsite strategy? My understanding is that AI involves organizing information, w hile content planning and w eb strategy involves strategically defining the w ebsites content and functionality. These are 2 distinct phases of the development process, but the article combines them into 1 over-arching AI process.
Jeff Cortez
June 10th, 2013
Steven Hoober
June 11th, 2013
Only thing I challenge is calling the job a *w ebsite* architect. Even leaving aside Jeffs plausible question of mobile specifically, there are many, many, many channels. For the typical enterprise, there are legacy systems: boxes, catalogs, brochures, store displays, actual hardw are, billing systems And, its often time for new media of all sorts. How does that w ebsite w ork on mobile and tablets? How about futureproofing it for w hen everyone brow ses on TV and in the car? W hat about making some data w ork seamlessly w ith desktop or mobile apps, instead of those being funny offshoots. Agree w ith everything, except the premise that the W eb is all there is. Broaden just a bit more, first.
Leave a Comment
Nam e (required) em ail (will not be published) used for Gravatars (required)
http://sixrevisions.com/project-management/website-architecture/
22 / 23
13/06/2013
W ebsite
Submit Comment
Become a Facebook Fan of Six Revisions. Advertise - C ontact - RSS Feed 2008-2013 Six Revisions. Six Revisions mobile version by Mobify.
http://sixrevisions.com/project-management/website-architecture/
23 / 23