Your new website design looks great. It really “pops” off the screen, and everyone who sees it overflows with enthusiasm and praise.
Fast forward several months, and somehow the unthinkable has happened. You’re now the unhappy owner of a project that’s gone well over budget, with late nights spent brooding over a growing backlog of frustrated and confused customers.
You keep asking yourself: What happened? How did things go so wrong? Could the situation have been avoided? How am I going to fix this mess? What will be the ultimate cost of this?
The financial impact on your business of a poorly designed website is staggering. According to Baynard Institute, average shopping cart abandonment rates across the eCommerce sector alone are close to 70%.
Their studies found that through improved customer experience design, conversion rates increased on average 35%. With an annual turnover in the order of $3.5 trillion, even a modest 10% improvement would be worth $350 billion to the digital commerce sector.
That paints a clear picture, doesn’t it? There is no doubt that design is an investment that can have measurable impacts on success. A good design is a powerful asset to your business, a poor design is a danger to it.
What are the key elements of an optimal web design workflow that will empower you with the essential information when deciding on your next design partner?
Table of Contents
Objectives Of This Guide
This article will help you understand:
- Why it’s important to have an objective design workflow – the risks of proceeding without a plan and the rewards of a well-executed process
- Common elements of the various design methodologies – the general processes you would expect to see when discussing your designer’s workflow
- Activities each phase of a design workflow may contain – how a design methodology functions in “the trenches”.
Understanding these basic principles arms you with the knowledge you need to:
- More objectively assess the risk and return on investment (ROI) for your design projects
- Plan realistic resource schedules geared for optimum productivity
- Set appropriate expectations, for yourself and your team, around roles, inputs, and outputs at each step of the process
- Communicate more effectively with designers so that your vision and strategy is captured and represented in the final product.
What Problems Are We Solving?
The value of UX is not wasting time and money developing the wrong solution.
– Jeff Humble, lead UX designer, CareerFoundry
There is no way to sugar coat it. Developing a website is a significant investment and getting it wrong is expensive. A website that doesn’t work for your customer at every step will reduce productivity, damage sales, and could even downgrade the reputation of your business.
As a business owner or an executive who is looking to engage web design services, there are critical issues you need to consider:
- As shown in the Baynard figures above, far too many websites are underperforming and not reaching their goals effectively, largely due to designs that don’t meet their objectives.
- Poor design has a significant impact on the marketability of a website. Features that don’t accurately convey the correct business model reduce or even eliminate the ability to gather accurate, relevant, and meaningful data on visitor behaviours.
- In building a site, developers do a significate amount of work to program the templates and source code needed to turn designs into reality. Remediating poor design choices after launching your website means throwing away some of that work. As budgets run short, it may also lead to quick workarounds that almost always make the site more difficult to maintain in the long term.
- While a well-designed website can become a framework you can build upon for many years, poorly designed websites often soon become riddled with so many workarounds that a complete rebuild becomes the only feasible option.
- Sacrificing time and money from digital marketing budgets to remediate design issues means fewer resources available to focus on marketing your products and services, which has a direct negative impact on sales and lead generation.
It is many times more cost-effective to remediate design issues before the website has been built, preventing problems in the first place through a well-defined process.
A well-structured process reduces both your risk and your expenses when building your new website. It will also provide you with incredible opportunities to update, optimise, and streamline areas that may have been affecting productivity without you even knowing it. You will be well-placed to capture new audiences, improve sales performance, and provide a foundation that supports your business into the future.
What Is A “Bad Design” Anyway?
A bad design is almost always caused by a breakdown in communication within the process, but what does “bad” really mean? When we talk about a design being “bad” we are talking about whether it is fit for purpose. Is it doing what you need it to do? If not, it isn’t good.
At best, a “bad” design might have a lower conversion rate than expected, or it may not rank as well as desired in search engines. A good design process takes these possibilities into account, increasing the likelihood of a successful outcome, and providing a structured approach to measuring and continually improving these results over time.
Where the impact of a bad design hits hardest is when requirements are either missed or poorly communicated. This usually happens when designers are not properly briefed or are unable to follow a structured workflow. These issues are expensive to fix, embarrassing, and time-consuming to deal with. An efficient and effective early design discovery phase stops these issues from happening. Successful web design outcomes hinge on clear communication and understanding of the true, and often hidden, objectives of a project from the get-go. The key, as always, is quality over quantity.
What’s The Solution?
Communication. Or to be more precise, effective communication via a well-formulated workflow. At its core, a solid design workflow bridges the gap between subjective and objective disciplines. A Rosetta stone to translate business requirements into design concepts, if you will.
So, what does a good web design workflow look like?
Fundamental Phases In A Web Design Workflow
Theories about design workflows come in many shapes and sizes, but in general, look for processes that include the following phases:
- Phase 1. Discovery
- Phase 2. Definition
- Phase 3. Design
- Phase 4. Prototyping
- Phase 5. User testing
Each of these phases includes a series of activities, the results of which provide a platform for the next phase in the process. These are detailed below.
Web Design Phase Activities
Phase 1. Discovery
Activities in the discovery phase help you and the developer understand the wider context of the project, discover any hidden business requirements, identify users’ demographics and expectations, and give shape to the success criteria for the design. Discovery activities include:
- Workshops: To identify the main players in the project and walk them through a range of practical and guided activities. Workshops uncover the broader of business requirements and target demographics. They can bring big results because they nail down exactly what your requirements are, who the website serves, and what those people will need from your design.
- Stakeholder engagement: Critical to the success of this phase is knowing who the key stakeholders are. Stakeholders from different areas of your business may not always agree, and some will have a greater degree of authority on what is included in the scope. This is just a fancy name for figuring out who are the real decision-makers on the project.
- Market research: Surveys, research, and analysis of results to identify opportunities and risks in addressing business requirements.
- User interviews: One-on-one interviews with potential end-users of the new website, your soon-to-be customers, to get insights into what the users themselves want and expect from the new design. Be wary of any guesswork being done by your design team – professionals ask questions.
- Competitor analysis: This is a review of your competitors’ digital services to identify risks and opportunities to ensure the new design is competitive in the broader market.
The knowledge gained in this step is the foundation on which successful designs are built. Its relevance generally outlives the website build and can apply to future projects. In a nutshell, this information can be reused so you really are getting bang for your buck.
The outcomes of this phase include:
- Business requirements statements to outline what the project needs to achieve. This will protect you from ‘scope creep’ or getting off track.
- Personas and user stories to identify who will use your product, and give a thorough understanding of them as human beings. When you understand your user, you understand how to interact with them in meaningful ways. The more your user feels understood, the more value they will find in using your product.
- Opportunities and risk register to outline design opportunities including any risks involved and mitigation options. It provides transparency within the project.
- High-level design guidelines including the technical nitty-gritty of how the project will run. As a business owner or CEO, you don’t need to understand the technicalities, but it is in your best interest that this information is visible to you.
Phase 2. Definition
Activities in the definition phase focus on aligning user experience (UX) and customer experience (CX) interactions with the business requirements, constraints, risks, and opportunities that were identified during discovery.
This phase defines the types of information the design should present to users as well as the logical and navigational relationships between this information. Definition activities include:
- User journey mapping: Workflow diagrams that map the interactive steps each persona takes to most effectively fulfill their purpose on the website. The user journey gives insight into your users and how they experience your product. It steps-up your understanding of who is using your product and what they need to gain from it. This is important because only when you understand them can you design for them.
- Service design: This maps the interactions between user journeys, staff activities, and other systems and services. It helps organisational change management and validates user journeys against organisational capabilities.
- Information architecture design: Identifying and grouping the types of information users will create, view, and interact with will inform website navigation, content hierarchy, and future data model implementation requirements. Here is your chance to empower your users through your design by providing them with a service that they can navigate with ease and confidence.
- Content hierarchy definition: Arranging the flow of information by priority to ensure that the highest priority information takes precedence in the navigation and layout of the wireframes. Here is where you make sure that your users see, almost automatically, the most relevant information first.
- Mobile-responsive wireframing: Each major step of the user journey is sketched out in low fidelity (limited design), with key information presented based on the content hierarchy and information architecture. It is important to prioritise layouts for each major device family, such as mobile, tablet, and desktop, as the needs of users and available screen real estate vary greatly between each case. This is your opportunity to take a walk-through of your design so you can see exactly how it works as a product before the bells and whistles of colour and imagery is added.
With mobile taking up nearly 40% share of all device usage in Australia, failing to design your website for this platform can be extremely costly to your business.
These activities build the framework that provides structure and purpose to the visual design activities that follow. Outcomes of this phase include:
- User journey diagrams clearly highlight the user journey from the simple to the complex. This is extremely important because this information helps with managing the scope of the project and the expectations of the product being developed.
- Service design diagrams, which are like blueprints for the service you will provide. They again, are a visual aid that highlights the relationships between services that the customer will interact with. The information gleaned from these will help your designers create a product that both works with your current business model and identifies potential improvements.
- Information architecture definition describes how the information in your design will be prioritised and organised.
- Content hierarchy definition tells you how the content within your site will be placed. The content hierarchy guarantees that the most relevant information is the most visible to the users, ensuring they are constantly connected to value within the design.
- Mobile-responsive wireframes support the designers throughout the build by helping them prioritise elements that will have to respond to smaller screens. Wireframes, by removing ambiguity, reduce the risk of having to re-work something after it has been built.
Phase 3. Design
This may be called user interface (UI) design, web design, digital design, and many other variations on the word “design”. It’s where the look and feel of your new website begins to take shape. It may involve the following activities:
- Ideation: Visual aesthetics are subjective, so it is important to get everyone’s expectations out in the open. Designers may use simple sketches, quick digital mock-ups, mood boards, and ideation to conceptualise the general look and feel of the design.
- Branding toolkit: Most businesses have existing branding guidelines to follow. Designers apply these to a framework of typography, iconography, colour schemes, logos, element dimensions, and layouts for consistent branding across all of the produced designs.
- Mobile-responsive design: Designs are produced for each major unique layout in the wireframes. Ideally, every step in the user journey will be represented, however for clients on a budget, it is sufficient to identify the unique components needed and then create a master design, which can be replicated.
- Design presentation and feedback workshops: You might have one or more feedback rounds, depending on deadlines and budgets. In these sessions, the designer will walk through their design and explain the principles and purpose of each design element. They collect feedback and incorporate it into the next design revision.
It is through this process that the artistic creativity and expertise of the designer gets to shine – within the constraints outlined in the discovery and definition phases of course!
This phase results in your web design, a set of non-interactive high-definition designs almost ready to go to the web development team to implement.
Phase 4. Prototyping
There is a huge difference between imagining how static images on a screen would translate to real-world functionality, and actually interacting with the designs in your hands.
Static prototypes allow stakeholders to visualise and explore simulated interactions with the designs on physical devices to provide another layer of design validation, before any development activities take place.
- Static prototyping: Screens from the design process are imported into a prototyping tool, such as InvisionApp, which features hotspots, or ‘clickable’ areas. This allows basic interactions with the designs, simulating actual user flows and giving stakeholders a chance to visualise and provide feedback.
- Feedback and revisions: Stakeholder feedback is collected and incorporated into the next design and prototype iteration, time and budget permitting. Thanks to prior discovery and definition exercises, at this stage, the updates are generally minor workflow or positioning adjustments.
Feedback during prototyping enables designs to be improved and for any outstanding requirements to be captured and incorporated into the next round of refinements.
This phase produces interactive prototypes for stakeholder validation that uncover any issues with user flow or layouts that need to be addressed. The designer updates the web design based on prototype feedback.
Phase 5. User Testing
User testing takes the finalised prototype to the streets, capturing vital feedback from potential end-users. Typical activities include:
- Test planning: Typical users follow test scripts, such as “try to buy a subscription” or “get help for this issue.”
- Testing workshops: People who align with the identified personas are recruited and organised into workshop sessions. During these short sessions, their interactions with the design prototypes are closely observed, with any inconveniences, confusion, or questions noted and used to improve the site
- Online user testing: A range of online user testing platforms record user interactions with prototypes. While this is easier to set up than in-person testing workshops, it reduces control over test participants and it is more difficult to directly observe behaviours
- Incorporate feedback: User behaviours, feedback, concerns, and observations are analysed to produce recommendations for user experience and web design improvements, which are to be selectively implemented into the finalised design.
This direct feedback from potential customers is extremely valuable in capturing any final requirements or flawed assumptions, producing the following outcomes:
- User testing feedback to help you understand how users might react to the final product, and whether or not the design is likely to be successful or if it needs to be reworked
- Final design recommendations that capture significant issues or improvements before expensive development taking place.
- Finalised web designs ready for development.
Benefits of a Design Workflow
A structured approach to web design increases the chance of a successful outcome, not just for the design aspect but for all phases of your project’s life cycle, from design through to support.
Some of the key benefits of an optimised web design workflow are:
- Following a structured design process builds objective understandings about user, business, and stakeholder needs and expectations. Design decisions are not just a wild stab in the dark
- A reduced risk of launching designs that don’t meet hidden requirements or encode incorrect assumptions around user behaviours.
- Improved design outcomes and understandings of business and user needs means your website is more likely to engage users and increase your overall return on investment
- Removing ambiguity from the development process reduces overall development costs, because developers are clearly informed on what is being built, with no last-minute surprises or late-stage additions to the project scope
- A well thought out website design framework means you will be able to more easily maintain and extend your website for the long term.
- Every design decision is backed by evidence, providing an extensive knowledge base that catalogues the underlying drivers, requirements, research, analysis, strategies, and planning decisions. This makes it easier to measure, compare alternatives, and identify new Digital Marketing opportunities in context with the built solution.
Where to Next?
The full range of phases and activities provides the most reliable chance of success. It can, however, seem daunting to consider all the groundwork that needs to be done to cover all angles.
The ideal workflow would include as many discovery, testing, and refinement steps as time and budget allows, although a good workflow will be flexible enough to scale.
Some things to think about before taking your next steps include:
- Start to engage with your internal stakeholders to begin the process of brainstorming, develop understandings, and document fundamental business processes and requirements. Identify short-, medium-, and long-term goals, target audiences, and significant competitor websites.
- Meet with your current or potential design partners to discuss their workflow to gauge what kind of process they follow. Ask for details on how each step helps achieve the best design outcome.
- Be wary of lackadaisical or ad-hoc approaches, if the process is not made clear or you’re simply asked to trust someone’s expertise, it could be a sign that there’s not enough emphasis placed on understanding your fundamental needs which could negatively impact project outcomes.
Ask for documentation that outlines the proposed design workflow. If estimates are provided, ensure that these estimates line up with tangible activities. If you’re unsure what something means, ask for it to be explained in plain English.
By this point, hopefully you understand the value of having an objective, well-structured design workflow in place for your next design project.
Your design workflow and methodology are the ‘make or break’ times of your project. When you are looking to engage a design company, make sure that their pitch includes evidence of:
- a design phase that clearly outlines discovery, definition, design, prototyping, and user testing
- a discovery phase that clearly outlines the discovery methodology that will be used
- transparency with regard to opportunities and risks involved in the project
- space for you to ask as many questions as you need, as often as you need to do so.
Be wary of assumptions and ‘guesswork’.
Remember, communication is where this game is won and lost, so get it right and play to win.
At Living Online, we’re extremely passionate about the value of a good process, and have used the above to create stunning websites built to convert. If you have any questions at all, we are always happy to have a chat on a call or over coffee, whether simply to clarify our approach or to tailor one based on your website design needs and budget.
In the meantime, see our blog on the Website Development Process, a detailed guide that provides a bird’s-eye view of the essential web development processes, focusing on the purpose and value of each step.