From Strategy to Design
Today, almost every start-up has its own website or landing page. When building a website, we always expect it to please both the users and us, and, most importantly, build customer loyalty and generate income. But is that often the case? No! Most such sites don’t solve business problems; neither do they meet customer needs.
The truth is that to create a smart website, you need to pass through five important stages. And the design is the last of them (how often do companies start with it!). We are going to discuss these five key stages in this article. We’ll ask you some important questions. Try to answer them for yourself.
Why divide the process into stages?
In his book “The Elements of User Experience,” Jesse Garrett describes five stages of user interface design:
- Strategy
- Scope
- Structure
- Skeleton
- Surface.
The design process starts with the most abstract expressions about the project strategy and ends with very concrete models of the site.
Figure 1. Jesse Garrett’s view of the web development process. Work starts at the lowest stage (strategy) and ends at the surface.
The first thing to do is to categorize your project into one of two groups:
- Software interface (online stores and service sites);
- Information space (blogs and news portals).
The questions that we’ll ask at each stage will depend on this categorization.
The development process needs to be divided into stages to clearly distinguish between the responsibilities of different specialists. A UX designer is engaged in the project at the second or third stage, while the company’s head formulates the strategy at the first stage – before the team starts developing the site features.
You can’t start working on a set of features (feedback forms, calculators, shopping cart, comments section, etc.) without first defining the need for them in the strategic planning stage. It’s not possible to develop navigational items, implement module layout on a page, or develop contextual navigation without ready information architecture and an understanding of what content will be posted on the website.
If you’re interested in more, read Don’t Make Me Think. Rules of a User-Friendly Interface
Maslow’s hierarchy and Garrett’s scheme
In his 2012 book “Designing for Emotion,” which was warmly received by professionals, Aarron Walter uses the famous Maslow’s hierarchy to show how to properly set priorities when creating a website design. Maslow’s hierarchy is a simplified visualization of the hierarchy of needs, developed by American psychologist Abraham Maslow in 1943.
Figure 2. Maslow’s classical hierarchy.
Figure 3. How Aarron Walter sees the use of Maslow’s hierarchy of needs for web design.
Despite the fact that Garrett deals with the entire development process, while Walter is solely focused on design, we can see similarities between both approaches in their quest to segment user needs and website objectives.
If you test Garrett’s scheme (Figure 1) on Walter’s hierarchy (Figure 3), it turns out that strategy is the cornerstone of the whole development process – without strategy you can’t start. Here, design is the apex of the hierarchy, which is a logical extension and embodiment of the goals to be achieved by the team in previous stages. Besides, one can’t deny that a well-grounded strategy and the right content requirements are much more important than choosing button colours and font styles.
As you can see, design is just the tip of the iceberg, visible and very important, but it can’t exist without dozens of tons of ice, hidden under a layer of water. Work on the surface level is the very last thing to do because it is subject to results achieved in the previous stages.
If you’re interested in more, read Icons in Design: Nonsense, Necessity, or Decoration?
Stage 1: Strategy
In the first development stage, we need to answer two key questions:
- What do we want to get out of our site?
- What do users want to get out of the site?
It is essential here to pay due attention to the formulation of strategies because Garrett’s entire methodology assumes a ripple effect if there is a need for change. This means that wrong decisions at this stage will automatically make all the decisions taken at subsequent stages wrong or disputable.
Figure 4. Ripple effect of making a wrong decision.
Always REMEMBER that the approved objectives of the website should reflect the essence of the company’s business processes. User needs are easier to identify using user persona methodology and target audience segmentation.
What do you want to get out of your site? What do users want to get out of your site? When answers to these two questions are formulated accurately and clearly, then we can move to the next development stage – scope (features and functions of the site).
Stage 2: Scope
If you consider your site as a software interface, then at this stage, you’ll formulate and describe the features and functions, and prepare terms of reference for programmers. If your site is an information portal, then content requirements move to the forefront.
In determining the content requirements, it is necessary to find out the following:
- What will be the site content: text, video, audio or image?
- Why does the user need this content?
- How often will the content be updated?
- Who will be responsible for hosting, creation and editing?
Here is a good example of poor work on the scoping stage: thousands of business card websites that have a “news” section, but don’t have any useful information to publish or the news section isn’t updated.
This is because the customer just said, “We need a news page,” but didn’t think about what would be posted there, how often, and who would be in charge of it. So that’s why you end up getting sites with empty and useless news pages.
Figure 5. The website of a construction company has on its news page only 4 news items for 3 years.
In describing the functional specifications of a website, the following needs to be clarified:
- Why should a particular feature be on the site?
- How will users interact with it?
It’s all so simple: if in the first stage, you’ve found out that users will be visiting your site to watch videos, then it’s time to talk about what kind of videos those will be and who will create them.
If you’re interested in more, read
Part 1. Responsive Web Design Using Breakpoints
Part 2. Responsive Web Design. Mobile Devices
Stage 3: Structure
At the previous stage, we determined what content will be posted on the site, and which features will be offered to users. At the structure development stage, we’ll determine which particular pages will host the content and features.
SEO experts, marketers and editors are fully involved in the structure development stage. Before developing the navigation system, which is the most important part of the site, the number of pages, their type and relative location all need to be defined.
Experts classify information architecture arrangement into four types:
- Hierarchical structure. Most online stores serve as a classic example. For example, when selecting specific men’s winter boots from a product catalogue, we normally navigate the following pages/categories: “men,” then “shoes,” “winter,” and then we choose a specific model.
Figure 6. Hierarchical structure.
- Matrix structure. This lets you navigate through multiple axes. A good example is a blog where each post can belong to more than one category at once. For example, a post entitled “Cheap vacation in Bruges” can be posted in such sections as “Belgium,” “Cost saving,” and “New.” Thus, such a post will be seen by several target groups: people who want to know more about Belgium, people who are looking for cheap vacation packages, and people who regularly follow new posts.
Figure 7. Matrix structure.
- Organic structure, This type has a very narrow range of application. This architecture can be used in entertainment sites or sites where the user is given the freedom to study materials just like when you visit a museum. This structure is suitable when there is no need to guide the visitor through the web pages, and the visitor doesn’t really care what section he is currently in.
Figure 8. Organic structure.
- Linear structure. This is characteristic for landing pages. Landing pages are created with the involvement of marketing specialists and schemes such as PMHS (Pain, More pain, Hope, Solution) and AIDA (Attention, Interest, Desire, Action), gradually leading the customer to make a purchase or to another target action.
Figure 9. Linear structure.
An example of poor work at the structure stage is the eventual appearance of additional sections on a site, which was originally designed to be a landing site. This means that developers envisaged user behaviour incorrectly, or they don’t know how and what information needs to be placed on the site.
The structure can be designed via two possible approaches:
- Top-down;
- Bottom-up.
The top-down approach implies that the objectives of the site and user needs form the basis for selection of a structure, for example, starting from general categories of the online store and ending with pages of specific goods.
The bottom-up approach is based on content analysis and its requirements. First, we look at what kind of content we have available and what we can create in the near future, then we group it and get categories and sections of the site.
Stage 4: Skeleton
The skeleton stage is very similar to the previous stage, where the structure was considered. Here, it’s also all about placement of features and content – not on the site generally, but within a particular page. Once we have compiled a list of elements and text blocks for each page, it’s time to think about how these blocks will be placed.
It is not enough to tell the designer to make the homepage of your site contain a logo, global and local navigation, breadcrumbs, search, banner ads, and text. We also need to inform the designer how these elements should be arranged relative to each other.
Figure 10. Working on the skeleton stage – page prototype.
Navigation is the main aspect of work at this stage. When arranging elements, it is important to pay attention to how the user will navigate the page.
The main rule: the navigation system must allow the user to easily navigate the site, and it must reflect the interrelationship between pages and interrelationship between a page and the navigation system itself. Simply put, navigation should answer the following user questions:
- Where am I now?
- How do I get to where I want?
Prototypes can have different levels of detail, depending on the complexity of the project. A page prototype gathers all layout solutions into a single document, which serves as a bridge between the earlier stages and the visual design of the site.
If you’re interested in more, read How To Create Masonry And CSS Hybrid Grid Layout
Stage 5: Surface (Design)
Now it’s time to figure out what is design and how it depends on the other previous web development stages. All the work carried out at the previous stages (strategy, scope, structure, and skeleton) consists of a formulation of constraints that will be transferred to the designer in the form of input data, requirements and wishes.
These constraints are precisely what allows the designer to do his job efficiently. It enables your website design to meet its objectives. Experienced designers, with one voice, say: “A good design is born only from constraints.”
Experts say that the best design samples emerge from stringent requirements and constraints. A designer who is given a specific field for creativity will create a really nice design, while a designer who is asked to do “something very nice” without constraints will end up doing something that is not effective, even for a huge fee.
You can create the best design for the website of an online store (e.g. selling woollen socks) featuring a shopping cart, blog, material and colour filters, and weekly updated foot-care articles, made in corporate colours. The design can show your company’s logo as effectively as possible. But you can’t create or even imagine the best website design without stringent requirements. After all, these constraints will at the same time serve as evaluation criteria.
It is for the sake of gathering requirements and constraints before rendering the layout that the web development process should be divided into five stages.
Let’s summarize
If you decide to use this web development technique, you must remember that you can’t move on to the next stage until the previous one has been completed. Each development stage – from strategy to skeleton – formulates constraints and input data for a web designer at the surface stage.
Such an approach allows a team leader to narrow down and articulate tasks for each specialist involved in the development process, and secure a result that brings the company closer to having a well-functioning site. If a single web designer is developing the site, this approach would enable him to create a fully-fledged site on his own, giving adequate consideration not only to the layout but also to customer needs.
So, design is simply a visualization of solutions within the framework of elements of user experience (adopted during the development process) in the first four stages. If the strategic objective of your site is to generate profit, if the user needs to buy woollen socks, then a good design should help you sell a lot of socks at a price favorable to you and reasonable for customers.
