Article

Our Design Process at a Glance

An overview of the customizable structure that we use for digital design projects

Share

For a long time, I’ve been interested in the routines of creative people. What habits and rhythms do painters, composers, writers, and designers get into that allow them to do their best work? While I’ve found that these routines, unsurprisingly, vary dramatically from person to person, it seems that most people still settle into a process or cadence that works well for them. And even though the specific activities of a day might change, there is still a clear structure that undergirds everything — some form of regularity that creates the opportunity for creative output.

At Foster Made, we’ve found a process that works for us and for our clients. Some elements are interchangeable — there’s plenty of room to tailor our process to fit client needs — but having a basic structure in place lays the groundwork for success. If you aren’t already familiar with our design process, we’d love to give you a quick overview of what you can expect when you work with us!

The Basic Structure

Research & Discovery 

We’re confident that we do our best when our work is rooted in research and understanding. Every engagement begins with some form of Discovery. This is when we get to know you — we hear about your organization from your team and from your audiences, dive into analytics, look at the competitive landscape, and begin to pinpoint the core challenges and desired outcomes. During this phase of work, we incorporate an assortment of activities that help us best understand the problem space and project opportunities.

Discovery activities include:

  • Stakeholder Interviews: one-on-one conversations with people who have a vested interest in the success of the project and can offer their knowledge and insight. 

  • Analytics Review: a high-level review of website traffic, device usage, user demographics and behavior that uncovers meaningful patterns to inform data-driven design.

  • Discovery Workshop: an intensive, highly collaborative, activity-oriented session used to deepen discovery, generate ideas, solve specific problems, and create alignment.

  • Content Audit: the process of taking inventory and evaluating the depth, quality, hierarchy, and effectiveness of content across some parts or all of a website. This review not only accounts for content itself, but also clarity and effectiveness of design.

  • Comparative & Competitive Review: a review of competitor and non-competitor sites in order to become familiar with the market landscape, industry norms, and opportunities for innovation. 

  • Exploratory User Research: research that focuses on understanding user behaviors, needs, and motivations, accomplished through primary research methods like user interviews and email surveys.

  • Proto-Personas: fictional characters created to represent specific audience segments and are intended to encourage empathetic, user-oriented thinking, especially relating to their engagement with a given product. 

  • Journey Mapping: a visual representation of the process a person goes through in order to accomplish a specific goal.

UX Strategy & Design 

When we’ve completed the formal discovery period, we get to work on user experience strategy and design. With a deep understanding of the problem space, project opportunities, and user and business goals, this is when we consider where to best focus our efforts. We might consider shifts to the information architecture or sitemap, start prioritizing content to make pages work harder and the experience more intuitive, and start wireframing, all while testing along the way. Informed by discovery and validated in testing, this work is the foundation for visual design. 

UX Strategy and Design activities include:

  • Design Principles: a set of characteristics, attributes, and considerations that form the basis of a good product and define how it should be experienced by users. 

  • Card Sorting: a method that helps to design or evaluate the information architecture of a site by gauging the ways users would organize or categorize information.

  • Tree Testing: a method for evaluating findability on a website that uncovers how easily people can find information, and exactly where people get lost.

  • Information Architecture & Sitemapping: the structural design of shared information environments (e.g. websites, software, etc.) to support usability and findability. 

  • Process & Task Diagrams: models for how users will interact with a system step-by-step, and how the system will adapt or respond based on what the user does.

  • Content Priority: part content modeling, part low-fidelity wireframing, content priority work identifies all of the content elements within a unique page and sorts the elements by hierarchy from top to bottom, without establishing layout specifications. 

  • Wireframes: a bare bones, grayscale visual representation of an interface that focuses on layout, components, functionality, and intended behavior without addressing specific design styling.

  • Usability Testing: a method to evaluate and assess the ease of use of a product by testing it with representative users to uncover problems in the design and discover opportunities for improvement. 

  • Accessibility Evaluation: a review during wireframing that measures the structural elements of page design against best practices that ensure access and ease of use to users with disabilities.

UI Design 

At this point, the foundation has been laid. We have a clear sense of structure, strategy, and have already started talking about functionality. This is the stage where the interface starts to come to life. We build design systems, consider interactions, and harness brand experience to elevate interface design. Color, imagery, type, scale, and spacing come together, transforming wireframes into robust, tangible digital products.

UI Design activities include:

  • UI Design: the design of the visible, interactive elements of an interface to create an intuitive, delightful, and visually pleasing experience that maximizes usability. 

  • Usability Testing: a method to evaluate and assess the ease of use of a product by testing it with representative users to uncover problems in the design and discover opportunities for improvement.

  • Accessibility Evaluation: a review during design that measures both structural and visual design elements against best practices that ensure access and ease of use to users with disabilities. 

  • Style & Pattern Guides: documentation of design elements and guidelines for their use to ensure consistency in application. 

Development

Our design and dev teams collaborate throughout the course of a project, but when UI designs are ready for code, our developers take the lead. With development underway, we work together to ensure that the designs are translated properly, finessing micro-interactions and animations to bring polish to the final product. 

Design activities during development include:

  • Design Specifications: detailed documentation that provides information about interface elements, flows, behaviors, and functionality.

  • CMS User Guide: a guide that includes a style sheet and instructions on how to perform basic tasks in the content management system.

  • Design QA: a thorough review of the coded version of the interface to ensure that everything looks and behaves as intended, and making a plan for fixes as needed.

  • Design Refinements: application of finishing touches, interactive details, and animations to the final product.

The Whole is Greater Than the Sum of its Parts

We believe that we deliver the most value to our clients when we engage each part of the process. Committing to the process allows us to be confident in the decisions we make along the way and creates the structure to support informed creative exploration. 

While we strongly advocate for utilizing our whole process, we recognize that no two projects are the same and clients will come to us with different needs, budgets, and priorities. Our process and services are inherently flexible, and our team can help gauge where to find the most value in what we offer. 

If you’re in need of design services, let us know. We’d love to partner with you!


Great things start with a conversation

Want to stay in the loop? Sign-up for our quarterly newsletter and we’ll send you updates with a mix of our latest content.