When the analysis phase has finished and the scope has been defined, we can start on the concept phase. This phase develops all the key ideas for the solution. The concept therefore describes how the various requirements can be met in a coherent way while achieving the agreed objectives.

Vill du att vi ska ringa upp dig?

Thank you We’ll call shortly.

Design guidelines

We create design guidelines to reflect the brand in the user experience. These are high-level design decisions that narrow down the options during concept development. We also start to look at the graphical appearance. We create style tiles – a kind of detailed mood board focusing on color choices, fonts and images. This defines the look and feel and gives an early impression of the detailed design.

Conceptualization of ideas

We take the best ideas from the ideas workshop and turn them into more concrete proposals. The result needs to be visually attractive and cover important parts of the concept. The proposals are used at a high level to present the ideas, and are easy to communicate within your company.

Structure

Content requirements and functional requirements used to be presented as simple lists, but now they are grouped logically. We base the groups on how we think the visitors can most easily access the information. We make sure the groups have meaningful names. The groups and the names make up the navigation structure of the web site. We create a site map that we test on users and submit for your approval.

Interaction design

The functions directed at site visitors are placed in the structure. If a function contains more than one step, each step is clearly defined and we describe how the steps relate to each other. The result is a logical interaction design much like a flowchart. This shows you the steps to be implemented.

Wireframes

We work up the interface and decide what it will look like in different display resolutions. The sketches are simple so we can jointly investigate various options. We usually start by sketching the frame, in other words the page header, page footer and all important navigation elements. We do the smallest screen size first (mobiles) before moving on to the larger screens. We decide on the page elements to appear on the most prominent page types. The wireframe sketches include explanatory notes and references to the corresponding backlog requirements.

Navigation design

The navigation also requires a great deal of thought because it usually contains many different versions that must be defined and designed. The navigation design is developed to match the selected screen sizes and the functions provided by the solution.

Information design and tone of voice

When we create the interface design for the functions provided by the solution, we need text to describe form fields, buttons, captions and help. Certain functions therefore also need some information design/copy. We can start to pin down the content solution in this phase by creating sample content with the right tone of voice, formatted so it is easy to read in the proposed page types. The information design also takes account of aspects of SEO, for example, which depend on the layout and the way keywords are used.

Testing and approval

Before the concept is finalized, testing takes place to ensure everything works properly for real users. One way of testing the groups in the structure is to invent a scenario for human subjects. The subjects are asked which menu option they would choose to look at. Wireframes, too, can be tested on real users as a way of identifying shortcomings at an early stage. Before concluding the concept phase and starting the design phase we run a consultation process to obtain design approval for all the sketches produced.

Vill du att vi ska ringa upp dig?

Thank you We’ll call shortly.

Back to top