So why the house analogy? 

The analogy of a house is great when discussing a website because it is not only relatable, but also supports the foundational idea that there are certain steps that must be completed in order to construct a well-built product. To design a site and ensure that we maintain the utmost quality with our build, we break the process into 6 different steps: Discover, Define, Design, Develop, Deliver, and Deploy. For each of these steps, there are milestones or inspections built in to keep the project moving forward on time and within scope. Let’s dive into the steps a little further and build our dream home together.

Discover

This first step of the build process is the most important. Like building a house, we must start by asking “Why?” This is a crucial question to ask because it holds the power of motivation and direction behind it. As each project starts with a different foundation, it is essential to make sure that we have a clear understanding of our mission in order to fully understand the “why.” 

By asking this simple question, we start to explore the goals of this build and establish a starting point. We can then start to sketch out the plans for the build which will allow us to create the most ideal path to completion. 

Each step consists of sub-steps that break down into tasks or milestones. 

(Sub-steps vary per project depending on scope, budget and "Why.")

Sub-step Examples:

• Stakeholder Interviews and Exploration
• In this sub-step, we meet with the client to discuss the product goals and outline any upfront restrictions that may hinder this process (time, budget, etc).
• Internal Analysis/Audit
• We analyze any existing content, writing style, visual design, and interface design to make sure we understand everything there is to know.
• Competitive Analysis/Audit
• We look outward and see what your competitors are doing so we can elevate the bar and make our clients stand out.

Define

With the discovery phase complete, we move into the second step where we put on our architect hats and outline the build by creating blueprints. For a build, we need to make sure that we understand the lay of the land and how all of the pieces are going to come together. For a new build, this is where we start clearing the trees and laying stakes in the ground. There are also many types of people involved in the following steps of the process, and they all must come together as one. 

Sub-step Examples:

• Project Roadmap or Creative Brief
• With an established understanding of time, budget, and scope, we can define the milestones that we wish to accomplish and assign the team needed to complete the project successfully. 
• End User Definition/Personas
• In this sub-step, we define “Who,” or the end-user, that we are building for. They are ones that are going to live in this space so we need to understand how they are going to use it.
• Information Architecture / Content Strategy 
• We start with the blueprints for the new site to outline what areas are going to be built down to the individual components this new build will have. This is not design, but a high-level overview.

Design

We understand the “Who, What, and Why” for this project and now it is time to start building the foundation and studs. This step can be the most exciting for us and our clients because the build starts to take a physical shape and design. This is an iterative process where we work closely with stakeholders to make sure that we capture their vision and even “wow” them with our own style.

Sub-step Examples:

• Wireframes
• These are low-fidelity drawings that help define user flow to create the most ideal user experience based on best practices. We will start with the homepage because it tends to have the most complex page structure and importance.
• Interaction Design
• Once we agree on a layout direction based on the wireframes, we can start to build out the other pages and work through the overall visual experience.
• Visual Design
• The walls have been built, the drywall hung, and now we apply paint and color to bring the space to life. In some cases a new visual language (colors, typography, etc.) is part of the project, we will define the rules in a full brand library and/or style guide. 

Tools used in this step:

• Ideation: Pen & Paper (The best ideas occur when not at a computer)
• Wireframing: Axure, UXPin, Figma, Sketch, Adobe XD
• Visual Design: Sketch
• Photo Layout/Modification: Photoshop
• Icon & Illustration Creation: Illustrator
• Design Library to Development: Zeplin, InVision

Develop

This step is a little different because it does not wait after the completion of the previous step in order to start. Like a team in a relay race, we don’t stop and pass the baton. Instead, we run together during that handoff so we don’t lose our momentum. There has to be a tremendous amount of overlap between design and development because they rely so heavily on each other. 

Development is in charge of running the wires, putting up the walls and drywall, and installing the fancy new wine fridge. In other words, they are the construction team that will build the entire framework for the design to live and grow. Each product relies on different criteria, which is why we work hard to master a wide variety of development languages, techniques, and best practices.

Sub-step Examples:

• Codebase/Platform Creation
• The new product needs a new place to live. This is where we create the best foundation based on product specifications. 
• Component Creation & Content Migration
• This is where we combine the code and content to create the components needed for the site.
• QA Testing
• We run cross-browser and device testing to make sure that everything works everywhere.

Deliver

We have built a beautiful new product or rehabbed a fixer-upper, and now it is time to inspect it all before handing over the keys. It is important to check everything thoroughly and do a final walkthrough. This is the best time to make any necessary changes and validate that each step was completed to fulfill the original project goal or “Why.” The product is not live to the end-users, but all of the pieces are in place. 

Sub-step Examples:

User Testing

• It is good practice to have select users to review the site in a test environment. We will walk through scenarios and validate our overall experience. Try to break the site, we dare you. 
• QA Testing
• We test and test again ensure that we deliver the highest quality product possible.
• Launch Plan & Release
• Everything is in place and ready to go, but it is important to determine the best process for release and post release. 

Deploy

Pop the bubbly, invite some friends, and celebrate. The project is live and we hand over the keys. As the celebration commences, we continue to stay behind the scenes to make sure that the lights stay on and the transition is seamless. 

Even after the project ends, we, at Quoin, remain a partner and friend to make sure that the investment is supported and continues to run smoothly. Whether it’s our dream home or yours, we are equally proud of it.