Upload
gavin-kerr
View
217
Download
0
Embed Size (px)
Citation preview
7/28/2019 The Secret to Building Large Websites Website Architecture
1/23
Home All Articles Tutorials Freebies About Contact Subscribe: RSS FeedFollow on Twitter
Jun 5 2013 by Nikita Semenov | 14 Comments
Like 183
The Secret to Building Large Websites:
Website Architecture
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
Tweet 427
Advertise Here
Search
The Secret to Building Large Websites: Website Architecture 13/06/2013
http://sixrevisions.com/project-management/website-architecture/ 1 / 23
http://buysellads.com/buy/detail/872/zone/1236051?utm_source=site_872&utm_medium=website&utm_campaign=adhere&utm_content=zone_1236051http://stats.buysellads.com/click.go?z=1236051&b=504400&g=&s=&sw=1680&sh=1050&br=firefox,21,win&r=0.7282242959945036&link=http://site24x7.com/signup-plans.html?q=F2HvWaWAhttp://stats.buysellads.com/click.go?z=1234901&b=3471362&g=&s=&sw=1680&sh=1050&br=firefox,21,win&r=0.29727535635476743&link=http://www.stamplia.com/?utm_campaign=SixRevisions&utm_medium=SixRevisionsSELL&utm_source=BuySellAdshttp://stats.buysellads.com/click.go?z=1234901&b=3549886&g=&s=&sw=1680&sh=1050&br=firefox,21,win&r=0.2917410262290957&link=http://www.themeland.com/?ref=bsahttp://stats.buysellads.com/click.go?z=1234901&b=3549886&g=&s=&sw=1680&sh=1050&br=firefox,21,win&r=0.2917410262290957&link=http://www.themeland.com/?ref=bsahttp://buysellads.com/buy/detail/872/zone/1236051?utm_source=site_872&utm_medium=website&utm_campaign=adhere&utm_content=zone_1236051http://stats.buysellads.com/click.go?z=1236051&b=3305498&g=&s=&sw=1680&sh=1050&br=firefox,21,win&r=0.04704979280148369&link=http://www.freshbooks.com/painless-billing/?ref=9263http://stats.buysellads.com/click.go?z=1236051&b=3211472&g=&s=&sw=1680&sh=1050&br=firefox,21,win&r=0.3448259182031602&link=http://offers2.compuware.com/Free_Trial_APM_SaaS.html?promosource=sixrevisionshttp://stats.buysellads.com/click.go?z=1236051&b=504400&g=&s=&sw=1680&sh=1050&br=firefox,21,win&r=0.7282242959945036&link=http://site24x7.com/signup-plans.html?q=F2HvWaWAhttp://stats.buysellads.com/click.go?z=1236051&b=3508940&g=&s=&sw=1680&sh=1050&br=firefox,21,win&r=0.9113954755077527&link=http://mastering-mobile.comhttp://stats.buysellads.com/click.go?z=1236051&b=3535727&g=&s=&sw=1680&sh=1050&br=firefox,21,win&r=0.6427226847997112&link=http://hourstracking.comhttp://buysellads.com/buy/detail/872/zone/1234901?utm_source=site_872&utm_medium=website&utm_campaign=adhere&utm_content=zone_1234901http://stats.buysellads.com/click.go?z=1234901&b=3457543&g=&s=&sw=1680&sh=1050&br=firefox,21,win&r=0.677014389519016&link=http://www.wix.com/eteamhtml/400?utm_campaign=ma_sixrevisions.com&experiment_id=ma_sixrevisions.com_125_htmlgreencube_400http://stats.buysellads.com/click.go?z=1234901&b=335627&g=&s=&sw=1680&sh=1050&br=firefox,21,win&r=0.6419053904446003&link=http://psd2html.com/?utm_source=sixrevisions.com&utm_medium=banner&utm_campaign=new-p2hhttp://stats.buysellads.com/click.go?z=1234901&b=3471362&g=&s=&sw=1680&sh=1050&br=firefox,21,win&r=0.29727535635476743&link=http://www.stamplia.com/?utm_campaign=SixRevisions&utm_medium=SixRevisionsSELL&utm_source=BuySellAdshttp://stats.buysellads.com/click.go?z=1234901&b=3549886&g=&s=&sw=1680&sh=1050&br=firefox,21,win&r=0.2917410262290957&link=http://www.themeland.com/?ref=bsahttp://stats.buysellads.com/click.go?z=1234901&b=3305496&g=&s=&sw=1680&sh=1050&br=firefox,21,win&r=0.23456161389734942&link=http://www.freshbooks.com/painless-billing/?ref=9262http://stats.buysellads.com/click.go?z=1234901&b=3448774&g=&s=&sw=1680&sh=1050&br=firefox,21,win&r=0.24742583195023982&link=http://www.kendoui.com/?utm_source=SixRevisions&utm_medium=banner&utm_campaign=BSA_KendoUI_SixRevisions_125x125http://www.freshbooks.com/?ref=93273http://sixrevisions.com/project-management/website-architecture/http://sixrevisions.com/project-management/website-architecture/#commentshttp://sixrevisions.com/project-management/website-architecture/http://twitter.com/sixrevisionshttp://feeds2.feedburner.com/SixRevisionshttp://sixrevisions.com/contact/http://sixrevisions.com/about/http://sixrevisions.com/category/freebies/http://sixrevisions.com/category/tutorials/http://sixrevisions.com/all-articles/http://sixrevisions.com/http://sixrevisions.com/7/28/2019 The Secret to Building Large Websites Website Architecture
2/23
Source: Bernt Rostad
No one would ever start the construction process of a skyscraper like that until
everything is properly planned and drawn out.
Source: Steve Newfield
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 designerto be more exact.
For years, Ive been designing strategies and c onducting 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 large-
scale websites.
In this article, Ill share our companys process for architect ing large websites.
The Website Architect
Lets first figure out whose role it is to do this thing called website architecture.
To me, this job is carried out by a website architect.
I deliberately avoid mentioning UI/UX designers and the IA guys here because website
architecture goes beyond or rather encompasses the user interface, user
experience, and information architecture of the site.
-
Search
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?
Lessons I Learned from Selling My Web DesignAgency
The Winners of Free DepositphotosSubscriptions
A Guide to the New HTML5 Form Input Types
The Secret to Building Large Websites: WebsiteArchitecture
Partners
Friends
1stwebdesigner
Addictive Fonts
AddToDesign
App Sheriff
Blog.SpoonGraphics
BrushLovers
Burbia
Chris Wallace
CoolHomepages
CSS Globe
Design Bump
DesignOra
The Secret to Building Large Websites: Website Architecture 13/06/2013
http://sixrevisions.com/project-management/website-architecture/ 2 / 23
http://designora.com/http://www.designbump.com/http://www.cssglobe.com/http://www.coolhomepages.com/http://www.chris-wallace.com/http://www.burbia.com/http://www.brushlovers.com/http://www.blog.spoongraphics.co.uk/http://www.appsheriff.com/http://www.addtodesign.com/http://www.addictivefonts.com/http://www.1stwebdesigner.com/http://www.maxcdn.com/http://sixrevisions.com/project-management/website-architecture/http://sixrevisions.com/html5/new-html5-form-input-types/http://sixrevisions.com/contests/depositphotos-subscriptions-winners-may2013/http://sixrevisions.com/project-management/sell-web-design-agency/http://sixrevisions.com/graphics-design/print-ready-graphics/http://sixrevisions.com/category/wordpress/http://sixrevisions.com/category/web-standards/http://sixrevisions.com/category/web-development/http://sixrevisions.com/category/web_design/http://sixrevisions.com/category/web-applications/http://sixrevisions.com/category/user-interface/http://sixrevisions.com/category/usabilityaccessibility/http://sixrevisions.com/category/tutorials/http://sixrevisions.com/category/tools/http://sixrevisions.com/category/resources/http://sixrevisions.com/category/project-management/http://sixrevisions.com/category/photoshop/http://sixrevisions.com/category/mobile/http://sixrevisions.com/category/javascript/http://sixrevisions.com/category/graphics-design/http://sixrevisions.com/category/freebies/http://sixrevisions.com/category/flashactionscript/http://sixrevisions.com/category/design-showcase-inspiration/http://sixrevisions.com/category/css/http://sixrevisions.com/category/ajax/http://en.wikipedia.org/wiki/Website_architecturehttp://www.flickr.com/photos/18588282@N00/2297077517/sizes/z/in/photostream/http://www.flickr.com/photos/brostad/4751870052/sizes/l/in/photostream/7/28/2019 The Secret to Building Large Websites Website Architecture
3/23
,
knowledge of web development tools, online marketing technologies, and everything
else involved in the c onstruction 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 construct ion in order to plan the product
efficiently and effectively.
This person, our website architect, should possess st rong logical thinking, has an
analytical mind, is smart with c ommercial 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.
Overview of the Website Architecture Process
Ill give you just a general overview of my companys website architecture process.
The process is divided into these 11 stages:
1. Project Brief
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
The Secret to Building Large Websites: Website Architecture 13/06/2013
http://sixrevisions.com/project-management/website-architecture/ 3 / 23
http://www.wpbeginner.com/http://www.wordpressthemeshock.com/http://webdesignledger.com/http://www.webdesignerdepot.com/http://www.webdesignerhelp.co.uk/http://www.walyou.com/blog/http://vandelaydesign.com/blog/http://www.thebestdesigns.com/http://www.technology.am/http://stylizedweb.com/http://speckyboy.com/http://www.stylegala.com/http://www.smashingmagazine.com/http://www.smashingapps.com/http://www.reencoded.com/http://www.queness.com/http://psdvibe.com/http://psdfan.com/http://www.productivedreams.com/http://www.onextrapixel.com/http://www.noupe.com/http://www.ndesign-studio.com/http://nettuts.com/http://naldzgraphics.net/http://www.myinkblog.com/http://marcofolio.net/http://laptoplogic.com/http://www.instantshift.com/http://ibrandstudio.com/http://www.graphicsfuel.com/http://wefunction.com/http://www.fudgegraphics.com/http://desizntech.info/http://designm.ag/7/28/2019 The Secret to Building Large Websites Website Architecture
4/23
2. Website Goal Definition
3. Define the Target Audience
4. Competitor Analysis
5. User Goal-Problem-Solution
6. Scenario Mapping
7. Mind Mapping
8. Information Architecture
9. Prototyping
10. Prototype Usability Testing
11. 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.
Stage 1: Project Brief
Gathering the needed data from the client and your team can usually take 2 days.
Though you should be as thorough as possible, also keep in mind that theres always
room for elaboration and additional data-gathering in the other stages of the website
architecture process, so dont get too off-track if some pieces of information havent
been transmitted to you.
Determine Goals and Expected OutcomesWhat is the clients goals and expected outcomes of this project, and how does she
envision the end result of the project?
You should be clear about the evaluation criteria of these goals and expected
outcomes to make sure youre both on the same page.
You have to be as specific as possible; goals and outcomes should be quantifiable and
measurable.
Brainstorm with the Client
Ask the c lient to tell you everything he has on his mind. Listen to what he says
patiently and thoughtfully. Take notes. Focus on what theyre saying and resist the
urge to chime in. Your ideas and remarks can wait.
If the client is passionate about his ideas for the project, he can spend hours talking
about it, which is completely normal.
When the c lient is really into the project, hes a great help and pleasure to work with.
Client Idea Summary
At the end of your brainstorming session, you should ask the client to sum everything
up if he succeeds in boiling his idea down to one sentence, then the idea is clear. If
not, you will need better clarity and focus.
Determine the Target Audience
Who is the c lients target audience? Whos going to use this site, and how might they
benefit from the site?
The client should have a clear idea of who the end user is, so that we can produce awebsite for them. Otherwise, its like playing darts with your eyes closed: You know
where the target is, but its going to be nearly impossible to hit it.
You can also start discussing what the client already knows about their target
demographic: gender, age, location, etc.
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.
Meet the Decision MakersMeet with the people who make decisions. Discuss the deadlines, the budget limit,
resource availabilities, and so forth.
Organizational matters, matter.
Results and Deliverables
The Secret to Building Large Websites: Website Architecture 13/06/2013
http://sixrevisions.com/project-management/website-architecture/ 4 / 23
7/28/2019 The Secret to Building Large Websites Website Architecture
5/23
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.
A project brief template. Source: docstoc.com
The deliverable of the briefing stage is a written document with detailed information
given to you by the c lient and the dec ision-makers. This document should be approved
and verified by the client. It can be in the form of a design brief.
Stage 2: Website Goal Definition
A website needs goals. The clients goals might be these: to monetize the site, to
increase the offline market share through online marketing, to better engage
customers online, and so forth.
The goals define the direction of the entire website production process.
Besides determining the websites goals, you also need to define success criteria
according to the client.
A good way to establish goals is by using the SMART criteria. That is, each goal should
be:
Specific
Measurable
Attainable
Relevant
Time-bound
For example:
Generate $50,000 income within 5 years through ads, information products likee-books and paid subscription plans
Assist users in making a choice of what pet to own
Provide users with advice on pet issues
Create a marketing platform for pet products
The Secret to Building Large Websites: Website Architecture 13/06/2013
http://sixrevisions.com/project-management/website-architecture/ 5 / 23
http://en.wikipedia.org/wiki/SMART_criteriahttp://sixrevisions.com/web-development/a-6-step-general-process-for-producing-a-website/http://designinstruct.com/articles/project-management/client-design-brief-questions/http://www.docstoc.com/docs/2628263/Project-Brief-Template-Project-Brief-project-management-Business-Case-Project-Initiation-Document-Project-Planning-Crown-copyright-Project-Manager-Project-Scope-proposed-project7/28/2019 The Secret to Building Large Websites Website Architecture
6/23
Results and Deliverables
As a result, you will have a document containing 2 lists:
A list of project goals
A list of the clients goals
This document needs sign-off by the c lient/dec ision-makers.
Stage 3: Define the Target Audience
This stage involves researching the target audience. We need to identify what types
of users will go to the site, and also define the needs of each group.
Gather Characteristics Data
We need to create a common persona for each group. The user interface design
depends greatly on the results of this stage. To get started with this, we first need to
define what our audiences c ommon characteristics are.
Define Socio-Demographic Characteristics: We should figure out the sex, age,
education level, and occupation of our target audience. Targeting teenagers (15-18)
is going to differ from a site meant for people over 60.
Define Psychological Characteristics: We should determine the lifestyle, personality,
temperament, motivation, value system, philosophies, etc. of our target audience. This
information is even more important than socio-demographic characteristics in terms of
user interface design. If, for example, our users are early adopters, the user interfaceand pre-launch strategy will be different than other websites.
Define Wants/Needs Characteristics: We should figure out why our user would
want to sign up to our website, what problems theyre looking to solve with our site,
etc. We define their pain points and aim to solve it with our website.
This information is vital, though its hard to find. If youre working on a website
redesign project , the client may already have this information if they have user
feedback tools in place.
Sometimes the competitor can have it (but good luck gett ing them to share it with
you). In this case, you need to perform user research studies and conduct surveys.
Geographic Location Characteristics: Country, city, region, continent these are
all helpful information. Being online does not completely eliminate the location factor.
Sometimes geotargeting is the first thing to think of when creating a national site,
government website, or any locat ion-dependent website.
Moreover, website content and website copywriting is heavily determined by the
audiences location.
You will need this when youre in the information architecture (IA) stage.
Create User Personas
When the target audience portrait is well-defined, we can then create personas.
The Secret to Building Large Websites: Website Architecture 13/06/2013
http://sixrevisions.com/project-management/website-architecture/ 6 / 23
http://en.wikipedia.org/wiki/Persona_(user_experience)http://sixrevisions.com/usabilityaccessibility/information-architecture-101-techniques-and-best-practices/http://sixrevisions.com/content-strategy/is-web-copy-ruining-your-design/http://en.wikipedia.org/wiki/Geotargetinghttp://sixrevisions.com/usabilityaccessibility/10-usability-tips-based-on-research-studies/http://sixrevisions.com/tools/10-excellent-feedback-tools-for-web-designers/http://sixrevisions.com/web_design/an-exploration-of-website-redesigns-tips-and-examples/http://sixrevisions.com/project-management/Content/Nikita_Semenov_Architecture_Largescale_Sites/The%20Secret%20to%20Entrepreneurial%20Success:%20A%20Monetizable%20Painhttp://sixrevisions.com/web-development/10-simple-tips-for-launching-a-website/7/28/2019 The Secret to Building Large Websites Website Architecture
7/23
Example of a persona. Source: uxmag.com
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 ofthe 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.
Results and Deliverables
After f inishing this stage, you should now have two things:
A document presenting the general characteristics of the target audience
Personas
The Secret to Building Large Websites: Website Architecture 13/06/2013
http://sixrevisions.com/project-management/website-architecture/ 7 / 23
http://uxmag.com/articles/personas-the-foundation-of-a-great-user-experience7/28/2019 The Secret to Building Large Websites Website Architecture
8/23
Stage 4: Competitor Analysis
To ensure the success of the project, you need to know your competitors and have
good ideas on how to get ahead of them. You should discover their strong points and
weak points.
There are several methodologies involved in conducting competitor analysis research,
including market participant polling, and Internet and print media research.
If youre creating a local website, dont limit yourself only to your country. Look
through international websites that are doing similar things. Most likely, there are
similar or analogous projects up and running somewhere in the world. Some of these
projects can be rather inspiring.
For example, weve been working on a social networking site for pet lovers for a client
in Russia. We didnt find direct competitors in the local market. However, there are
several foreign sites and indirect local competitors. They are:
Competitor Characteristics
www.dogster.com international, popular, quality
www.dogster.ru Russian project, quite popular, satisfying quality
www.catster.com international, popular, quality
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 ofMicrosoft Windows is Apple Mac OS.
Indirect competitors are competitors who offer similar products, but onlypartially satisfy the target audiences needs.
SWOT Analysis
There are different approaches towards c ompetitor identificat ion and analysis. I like
SWOT anal sis the best.
The Secret to Building Large Websites: Website Architecture 13/06/2013
http://sixrevisions.com/project-management/website-architecture/ 8 / 23
http://en.wikipedia.org/wiki/SWOT_analysishttp://en.wikipedia.org/wiki/Competitor_analysis7/28/2019 The Secret to Building Large Websites Website Architecture
9/23
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.
SWOT matrix. Source: wikipedia.org
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).
Results and Deliverables
You should now have:
A list of direct and indirect competitors
A SWOT analysis for each competitor
Research summaries (ideas generated, market opportunities, etc.)
Stage 5: User Goal-Problem-Solution
Proceeding from the personas weve developed, we can start working on goal-problem-
solution.
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 c areer.
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 aservice, 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.
The Secret to Building Large Websites: Website Architecture 13/06/2013
http://sixrevisions.com/project-management/website-architecture/ 9 / 23
http://en.wikipedia.org/wiki/File:SWOT_en.svg7/28/2019 The Secret to Building Large Websites Website Architecture
10/23
For example, a user goal on our website might be to find a contractor that can build
his construct ion 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 architec t because shes looking tosolve pain points that her users have.
Results and Deliverables
As the result, well have a goal-problem-solution matrix designed for each persona
weve developed for our website.
Stage 6: Scenario Mapping
Scenario mapping is the stage dedicated to revealing possible user flows.
The Secret to Building Large Websites: Website Architecture 13/06/2013
http://sixrevisions.com/project-management/website-architecture/ 10 / 23
http://www.uxforthemasses.com/scenario-mapping/7/28/2019 The Secret to Building Large Websites Website Architecture
11/23
User experience mapping. Source: adaptivepath.com
Once again, we need to think like an end user and c reate 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.
Results and Deliverables
We should have scenarios mapped out for critical site goals that weve established in
the previous stage.
Heres an example of a scenario:
User Goal:
Choose a dog
Scenario:
1. Go to main page
2. Go to "Zoopedia" sect ion of the site
3. In "Zoopedia" sect ion, find topics and discussions about dog breeds
4. Read topics and discussions of interest
5. Go to the Read Also section, located at the end of the topic because theresmore information there
6. Choose 3 preferred dog breeds
7. Return to "Zoopedia" top- level web page
8. Read some more
9. Find links to people selling dogs of these breeds
10. Make an informed, final decision
11. Go to a pet store to purchase a pet
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.
The Secret to Building Large Websites: Website Architecture 13/06/2013
http://sixrevisions.com/project-management/website-architecture/ 11 / 23
http://adaptivepath.com/ideas/the-anatomy-of-an-experience-map7/28/2019 The Secret to Building Large Websites Website Architecture
12/23
See Also:
Customer Journey Maps
Stage 7: Mind Mapping
When we have a bunch of ideas, it becomes helpful when we start visualizing and
interconnecting them.
The mind mapping stage is dedicated to creating a solid system of logically connected
ideas and also helps us cut out unnecessary things. Its a popular design
conceptualization tool.
To create mind maps, we should use Xmind.
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 sect ion should be planned logically. Dont forget about section-
dependent 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.
Results and Deliverables
As a result, we have a birds-eye view of the interconnections of site features and
sections.
The Secret to Building Large Websites: Website Architecture 13/06/2013
http://sixrevisions.com/project-management/website-architecture/ 12 / 23
http://www.xmind.net/https://en.wikipedia.org/wiki/Mind_maphttp://sixrevisions.com/user-experience-ux/customer-journey-maps/7/28/2019 The Secret to Building Large Websites Website Architecture
13/23
Stage 8: Information Architecture
Now that we have a detailed mind map of our website, we can start working on the
websites information structure, which will be the foundation of the websites
prototype.
The Secret to Building Large Websites: Website Architecture 13/06/2013
http://sixrevisions.com/project-management/website-architecture/ 13 / 23
7/28/2019 The Secret to Building Large Websites Website Architecture
14/23
The websites IA can be created with the help of flowcharting software like Visio.
Results and Deliverables
You should end up with an information architecture (IA) design after this stage.
See Also:
Information Architecture 101: Techniques and Best Pract ices
How to Create Content Maps for Planning Your Websites Content
The Secret to Building Large Websites: Website Architecture 13/06/2013
http://sixrevisions.com/project-management/website-architecture/ 14 / 23
http://sixrevisions.com/content-strategy/content-mapping/http://sixrevisions.com/usabilityaccessibility/information-architecture-101-techniques-and-best-practices/http://office.microsoft.com/en-us/visio/7/28/2019 The Secret to Building Large Websites Website Architecture
15/23
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 f irst. 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.
Prototype the Primary Navigation Menu
The primary navigation menu is the first to create. We need to figure out the number
of menu items and the number of drop-down menus.
Prototype the Header Section
Then we design the header section that typically contains these items:
The primary navigation menu
Search form
Contact information
Website logo
Prototype Contextual Areas
Now we start designing contextual areas, which will differ depending on the web page
youre prototyping. We will make content blocks, some of which are constant for every
page, some of which wont.
Prototype the Website Footer
The footer typically stays the same on each web page. Usually, the footer duplicates
the main menu. It also contains auxiliary information such as the websites privacypolicy, links to social networks, contact information, copyright information, and so
forth.
Client Feedback
The f irst web page prototype should be shown to dec ision-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-f idelity 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.
Test the Prototypes Against Scenario Maps
Our scenarios will help test the mockups to ensure the logical order of every ac tion.
This is the most time-consuming component of this stage and requires a lot of
patience and attentiveness. In the case of large websites, there could be over 100
unique interface prototypes.
The Secret to Building Large Websites: Website Architecture 13/06/2013
http://sixrevisions.com/project-management/website-architecture/ 15 / 23
http://sixrevisions.com/web_design/five-types-of-effective-headers-in-web-design/http://www.axure.com/7/28/2019 The Secret to Building Large Websites Website Architecture
16/23
Results and Deliverables
The deliverables after this stage are low-fidelity prototypes/wireframes of all web page
types.
Examples:
The Secret to Building Large Websites: Website Architecture 13/06/2013
http://sixrevisions.com/project-management/website-architecture/ 16 / 23
7/28/2019 The Secret to Building Large Websites Website Architecture
17/23
The Secret to Building Large Websites: Website Architecture 13/06/2013
http://sixrevisions.com/project-management/website-architecture/ 17 / 23
7/28/2019 The Secret to Building Large Websites Website Architecture
18/23
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 funct ional prototypes and f inished web designs.
Stage 10: Prototype Usability Testing
This is one of the best ways to quickly validate the effectiveness of the website
architecture and make changes before things progress further.
Axure generates HTML from prototypes, which make them interactive and ready to
test on users.
The Secret to Building Large Websites: Website Architecture 13/06/2013
http://sixrevisions.com/project-management/website-architecture/ 18 / 23
7/28/2019 The Secret to Building Large Websites Website Architecture
19/23
Usability testing at this stage will help you notice gaps and flaws in the architecture.
For test ing 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.
Results and Deliverables
As the result, we will have validated and improved the user-friendliness of our web
page prototypes and we get a better picture of how users would be interacting with
the site.
Stage 11: Project Specification
The final stage of the website architecture process is to create the project
specification document. This should contain a detailed description of each stage of the
website architecture process.
The project specification is the result of all the stages youve gone through. It
typically will contain a detailed description of each prototype, user flows, and so forth.
The specs should be full and unequivocal. Be detailed and thorough, but also keep it
as succinct and as concise as possible.
The project specification should contain all the information regarding software and web
technologies required for the website.
Design requirements should be clear.
Once the project specification is approved, website development starts.
The Secret to Building Large Websites: Website Architecture 13/06/2013
http://sixrevisions.com/project-management/website-architecture/ 19 / 23
http://en.wikipedia.org/wiki/Specification_(technical_standard)7/28/2019 The Secret to Building Large Websites Website Architecture
20/23
Related Content
Planning your E-Commerce Website
Agile Web Development That Works
How to Bake Content Strategy into Your Web Design Process
The Secret to Building Large Websites: Website Architecture 13/06/2013
http://sixrevisions.com/project-management/website-architecture/ 20 / 23
http://sixrevisions.com/content-strategy/web-design-process/http://sixrevisions.com/web-development/agile/http://sixrevisions.com/web-development/planning-your-e-commerce-website/7/28/2019 The Secret to Building Large Websites Website Architecture
21/23
Related categories: Project Management and UX
About the Author
Nikita Semenov is the founder and CEO at SECL Group Ltd. Web
development has been his lifes work since 2003. Contact him via the
company w ebsite contact page or on Facebook.
14 Comments
Edwin AlexJune 5th, 2013
Excellent article. This article gu ides me to move to next level in my carrier. Thanks
Semenov for this Article
Andrew HintonJune 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 ho w folks as sume IA is smaller or a sub set o f this
work 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 o n record. :-)
Anthony RussoJune 5th, 2013
This is one of the better articles ive read on the subject of web project planning. Too
often beginners open up a text editor and start coding/designing with no real goa l in
mind. Great read
Alastair McDermottJune 5th, 2013
Super article, Nikita, youve tied a ll the stage s up brilliantly with the diag rams.
Great reference article, Ill be sending peo ple to this.
Yao LiJune 5th, 2013
Thanks Semeno v for this Article! I am a we b deve loper, and your article is us eful for me
to bu lif my skyscraper!
JenniferJune 6th, 2013
As a project coordinator to a start up company, I had new insight on ho w to start a
project, it wa s more like get a p roject and sta rt working on it here, but after reading
this article and i come to know that this is right way of working on project.
Thanks a lot
The Secret to Building Large Websites: Website Architecture 13/06/2013
http://sixrevisions.com/project-management/website-architecture/ 21 / 23
http://www.liyao.name/http://www.websitedoctor.com/http://imaginethatgraphics.net/http://inkblurt.com/http://www.facebook.com/semenov.nikita.andreevichhttp://seclgroup.com/kontakty.htmlhttp://seclgroup.com/http://sixrevisions.com/category/user-experience-ux/http://sixrevisions.com/category/project-management/7/28/2019 The Secret to Building Large Websites Website Architecture
22/23
florianJune 6th, 2013
very nice article. well organized and a lot o f information. one things that I feel is missing
is content. wouldnt you have to consider existing content and/or create a content
strategy? also the section on IA seems w eak.
Jonathan NelsonJune 6th, 2013
Best article Ive read on information architecture in a long time.
GeriJune 6th, 2013
Fantastic article! I am seeking a career in we b development and de sign and planning on
attending school soon. I am starting research on the s teps for web development and
this is e xtremely helpful. Thanks!
Jacob GubeJune 6th, 2013
@Andrew Hinton: Could we agree that maybe you IA guys have the characteristics of
being a Web Architect?
Because when I think IA, I think: content organ ization, site navigation thats it. I
wouldnt expect you guys to manage the project briefing, design brief, usability research
for the e ntire project (not just findability), competitive ana lysis, etc.
However, when I think o f who d 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 ThomasJune 7th, 2013
Great article Nikita, Ill definitely be us ing this for reference on future projects, thanks .
Johan JohanssonJune 7th, 2013
How does AI fit into the context of content planning / webs ite strategy?
My understanding is that AI involves organizing information, while content planning and
web strategy involves strategically defining the websites content and functionality.
These are 2 distinct phase s o f the development process, but the article combines them
into 1 over-arching AI process .
Jeff CortezJune 10th, 2013
How would you approach mobile or design with mobile first?
Steven HooberJune 11th, 2013
Only thing I challenge is calling the job a *w ebs ite* architect. Even leaving aside Jeffs
plausible question of mobile specifically, there a re 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 tha t webs ite work on mobile and tablets? How a bout futureproofing it for when
everyone browses o n TV and in the car? What about making some data work
seamlessly with desktop or mobile ap ps, instead of those being funny offshoots.
Agree with everything, except the premise that the Web is all there is. Broaden just a
bit more, first.
Leave a Comment
Name (required)
ema il (will not be pub lished) use d for Gravatars (required)
The Secret to Building Large Websites: Website Architecture 13/06/2013
http://sixrevisions.com/project-management/website-architecture/ 22 / 23
http://www.4ourth.com/http://jeffcortez.com/http://www.pixelmade.com/http://www.blubox.co.uk/http://sixrevisions.com/http://adproof.com/http://designingit.com/7/28/2019 The Secret to Building Large Websites Website Architecture
23/23
Website
Subscribe to the comments on this article.
Submit Comment
Become a Facebook Fan of Six Revisions. Advertise - Contact - RSS Feed 2008-2013 Six Revisions. Six Revisions mobile version by Mobify.
The Secret to Building Large Websites: Website Architecture 13/06/2013
http://feeds2.feedburner.com/SixRevisionshttp://mobify.me/http://m.sixrevisions.com/http://feeds2.feedburner.com/SixRevisionshttp://sixrevisions.com/contact/http://sixrevisions.com/advertising/http://www.facebook.com/sixrevisionshttp://sixrevisions.com/project-management/website-architecture/feed/