process
As an interdisciplinary agency, we are able to execute all design and development aspects of a project. Starting from understanding user needs and then translating those needs into interactions, all the way to making sure the final design is reflective of the brand’s purpose.
Working on every step of a project gives us complete visibility of the whole process, and it allows us to develop a deeper connection with users and clients. The results are incredibly positive, as it makes us better able to deliver cohesive and well-thought out design solutions.
the process
The process below is presented in a linear format, however design explorations may sometimes affect steps of the process that came before. It’s common for us to go over cycles of explorations, revisit previous steps, and reiterate goals and functionality based on client feedback and user testing. Design for us is as much a learning experience as an execution.
strategy
The strategy is the first part of the process, and perhaps the most important. All further exploration will be rooted in the concepts established in this phase. The strategy is comprised of and created by the six steps presented below:
Content inventory is a common deliverable on website redesigns. It lets us know exactly what we’re working with, and allows us to map out how content can best be organized and connected on the website or app.
content inventory
define project goals
At this point, we have enough information to work with the client and determine project goals. It’s common for clients to come into the project with outlined goals, but the discovery conducted in the previous steps helps us establish what the real goals are, from their perspective and from the user’s perspective.
define the problem
With a clear view of the brand and user needs, it’s helpful to articulate the problem or challenge. Crafting a concise question to be answered and breaking it into the right steps is critical to determining the next steps and the overall project goals.
We start with a series of interviews and conversations with the client/users, as we try to gather an understanding of user needs and client goals. That process can start even before the project is under contract. We like to have a clear idea of the project scope while crafting a proposal.
discovery and background
Understanding the company, brand and/or product. At this point, we want to determine the core brand values, and understand how they translate to a cohesive execution.
define the brand
At this step, we work with clients to determine our core audience. Who is going to visit the website or use the application? It’s also critical to determine who is going to be managing the website or application, as functionality is only functional if it’s able to be operated.
define the user
scope
We use various methods to gather user information. Based on well-defined user and audience profiles and an established strategy, we often start by building personas and followed by detailed user journeys:
Personas are fictional characters that outline the needs, goals, emotions and potential behavior of users. They can be based on actual users or on a combination of research, client input and educated assumptions. Personas better allow me to establish a user journey, the next step of the process.
User journeys are detailed steps that the user/site visitor is expected to follow while using the application or website. We try to establish as many scenarios as possible at this stage, so we have enough basis to craft functionality that can best serve a variety of different users.
conduct user discovery
We now move into creating the scope of the project. This step of the process establishes a framework for the design and development portions of the project.
outline functionality
The process of outlining functionality starts from the initial ideation phase of the project and continues with every step. At this point, all gathered functionality is documented and put into a format where it can be sorted and prioritized. New functionality will continue to be added to this document during the following steps in the process.
One of most critical parts of the design process is to establish the constraints will the guide explorations. Requirements are specifications that need to be considered and implemented throughout the creation process. They can be based on technical specifications, brand guidelines and user needs. During this process, we collaborate with stakeholders to outline a detailed document that can be referenced throughout each step of the development process.
determine requirements
structure
At this stage, we are ready to start building the structure of the app or website.
We often start the structural phase of the project working on simple workflows that determine the steps in one initial user journey. We like to involve the client and users as much as possible in these exercises, as workflows allows for quicker and more constructive explorations. A large project may have dozens of flows, each focusing on the detailed interactions within distinct journeys.
workflows
Sitemaps are commonly used when designing websites. They are great tools for content organization. We often work on large website with complex navigation, and sitemaps are an invaluable tool for helping to determine what should be a website’s structure. It also makes structural specs easier to diagram for clients.
sitemaps
The content model diagrams the structure of the database and how data is connected. We often develop content models to help myself and other teams understand how content types can work together, be expanded or scaled down. Ultimately, the content model is the perfect way to document the database structure for the development team.
content models
layout
In the layout portion of the process, we take a much more in depth look at content and user interaction. The majority of these interactions will be detailed in wireframes and prototypes.
Wireframes are the easiest way to test layout ideas. They can start as rough sketches or even more detailed drawings. They can also be represented as low fidelity interactions or incredibly high fidelity experiences. During this phase, the main goal is to try and develop screens that reflect the best user experience. My approach to wireframes can vary from project to project, and I often experiment and add branded elements to the layout, as I regularly end up working on the final interface design.
wireframes
Determine content hierarchy: When designing content heavy websites, wireframes are great tools to establish content hierarchy. It’s also an invaluable exercise for mobile apps where there is limited screen real estate. The goal here is to guide the user through the layout and content.
Specify call to actions: Call to actions are critical parts of user interaction. Establishing clear paths for users to follow is the main goal here. I often reference user journeys developed during previous steps in the process to guide these explorations. The goal is to move the user from point A to B requiring no effort from the user’s side.
prototyping
Prototyping is a critical part of the process. It’s the best way to present and test functionality. Our team is constantly prototyping, starting with low fidelity wireframes and design to test very specific interactions. We then move to prototyping high fidelity wireframes and design. Ultimately, we create an end-to-end prototype, allowing clients to have a clear view of how their website or app is going to work.
Prototypes are a great way to test functionality and interface before going through the effort of actually building the app. Our team uses Invision as my main prototyping tool, but we are constantly trying to find new ways and new tools that can better convey complex design ideas.
visual design
Visual design is the most engaging part of the process for clients. At this point in the process, we have made hundreds of interaction decisions, and it’s now time to make sure that we create an interface that can really bring them to life.
Most of the interaction design has been figured out in the layout portion of the process, but the interface design elevates the experience. Our focus is on designing interfaces that clearly reflect aspects of the brand, but do not get in the way of the user experience. Design choices must be thoughtful and should only add to the overall experience.
interface design
Making sure design reflects brand guidelines and personality is a key factor during the visual design process. The use of color, typography and design elements are the most effective ways of connecting the experience with the brand. However branding can also show through in messaging, transitions and even language used in error messages.
branding
development
The work relationship an interactive designer has with a development team is critical for any project to be successful. Ultimately, developers are the ones who are going to build the app or website, therefore it’s the designer's job to make sure they have a clear understanding of the goals and details of the project. We work closely with our development team to make sure the vision outlined during the design process can come to life and surpass user and clients expectations.
Backend development starts once the content model is developed. The backend developer starts by creating the database structure, followed by content management screens. It’s common to have a fully built backend structure before the design process is complete.
backend development
Every project has a dedicated frontend developer. Here are some of the tasks performed in this phase of the project: layout build, transitions & animations and complex Interactions.
frontend development
frontend and backend integration
Once the frontend is built, it can be integrated with the backend. Throughout this process, we conduct tests to make sure that the planned functionality meets the design specifications. It’s common for me and my team to make adjustments to some functionality in this phase, with client agreement.
quality assurance
Quality assurance is an essential part of the process. All projects that I develop go through a very strict quality assurance process. That’s when we determine that all design specifications have been met, and the application does not contain bugs or issues.
design philosophy
We practice user-centric design, always putting the person who actually has to use the application or website first. Once user needs are established, we look for ways to align business goals with user goals, because if any piece serves one but not the other, it fails to deliver on its purpose.
Furthermore, we focus on creating a complete solution where technology never gets in the user or client’s way, allowing them to focus on what they do best.
Aesthetically, we tend to focus on minimalist interfaces, strong typography and innovative uses of the grid. We always look for ways to create interfaces that reflect the personality of a brand by exploring unique uses of imagery and color palettes.
Ultimately, we are constantly searching for distinct ways to create strong and lasting connections between users and user interfaces, along with the brands they serve.