Defining Your New Website Project Flow

June 22, 2018

Ian Philip Thompson

Ian is the founder of Arias & Thompson Digital, an Estonian eResident, and a frontend developer.

Whether you are setting out on a mythical quest to find the only open White Castle or embarking on a new web design project, the most efficient way forward is to use a consistent plan and approach. This allows for expectations to be clearly defined, timelines firmly established, and projects to be finished on time.

Unfortunately this approach leaves little to the imagination and would make for a terrible movie. We say the less cinematic drama the better when it comes to digital project management and website builds but hey, we work in a judgement free zone.

The Arias & Thompson Approach to Web Design Projects

We follow the same process with all of our clients working on web design projects and only make amendments when absolutely necessary to accommodate additional processes.

Kickoff

Contract Signing, Conversion Goal Mapping

The kickoff or initial phase is the getting to know each other time. Although most particulars will have been sorted in the web design proposal and contract signing, it is best to spend 1-3 days going over each other’s internal processes and expectations to avoid any obstacles later on.

During this phase we like to help our clients define what they want from their website. Sometimes this is obvious in terms of e-commerce where conversion is the purchase of a product. Sometimes it is less clear such as reputational builds for small businesses where conversion is achieved offline, but the website functions as a reference piece. The point here is to line up a client’s conversion goals with their larger sales or corporate strategies so they are set up for success and can maximize their return on investment.

Site Outline

Site Outline – spreadsheet, Site Map – user flow

Moving straight on we begin with outlining the website’s architecture. This will take some back and forth between us and the client to generate a relatively accurate map and structure. This phase really sets the stage for the rest of the project as it will dictate how the entire website will hold together.

Wireframing / Architecture

PSD wireframes

Wireframing helps to visualize how a site’s layout will direct a user through the flow to conversion. By using repeatable, standardized forms for images, text boxes, buttons, and navigation, the designer can iterate quickly through a number of scenarios to find the most useful layout and functionality to best engage with the user and achieve the conversion goals set out in the first phase.

Visual Design

Template Design, UI Design

Finally, the fun part. Once your wireframes are ready to go and the client has approved them, it’s time to move on to implementing the visual design. This will be well informed by the wireframes and additional research regarding the industry, geographical location amongst other factors.

During this phase we also take the time to outline our approach to the user interface so that we can save time during development by creating repeated patterns of elements that can be applied to multiple features.

Content Development

Copywriting

We list this here but it goes side by side with the design phase. Content can take a long time to develop given its scope and importance. If the client is developing their own content, we encourage them to get started almost immediately after kick off. For larger corporations or entities, achieving sign off on content can take weeks. Better to start early.

Front End Development

HTML, CSS, JavaScript – Chrome, Feature development

Turning the design into a coded reality has to be one of the most fulfilling feelings in any creative’s daily grind. This is when we build the website in its most ideal state. One browser, no CMS. It allows us to focus on achieving the best optimization and most efficient code as possible. Load speed and efficiency are the prime goals here.

Speed is of the essence for all websites looking to compete in search engine results. Not sure what that means? Get in touch today and we’ll give you a hand.

This time also allows us to fully explore different features and how we are going to achieve them. For many, the aesthetic is achieved during this phase with the functional to occur only in the next phase.

CMS Development

Integration into desired CMS -Chrome only

We work regularly with both Drupal and WordPress as these two open source platforms are flexible and user-friendly. Really, you can do anything with a Drupal site, as long as you are willing to maintain it and update it (hint, it’s not that easy).

This phase is all about how the site will be updated and building the back end into a user friendly editing experience. The lengths to which we go to facilitate the user’s administrative experience depends on who is going to be managing the website. If it’s self managed by the client, that means almost zero code in the editing process. If it’s us or another developer, we have more flexibility.

Cross Browser and Device Testing

Firefox, Edge, IE 11, and Safari, Code verification

The most frustrating experience but a necessary evil, cross browser and cross device testing is where we iron out all the kinks in different browsers. Although this is easier to achieve between browsers than when we started ten years ago, differences crop up sometimes in the most bizarre locations.

Public libraries can be great places to test on different browsers as they often either have older versions of Windows or older browsers installed on their PC’s, or, if you are a PC person, a Mac to try out.

The main complicating issues now are more centred on device testing. Emulators for different browsers and devices are good starting points, but nothing is better than the real thing.

User Testing

Test of user journeys

We base our user testing in Agile methodology to apply user stories that have been generated from previous research or align well with conversion goals set in the initial phase. Here we want to make sure that the user experience is seamless and identify any kinks in the armour.

It is best to use external testers to the project at this phase. Given that the project team has likely been looking at the website for the past few months you will not be in the best position and will bring bias for existing features that may not be deployed as efficiently as you think. Time to swallow the ego and hand over the reigns.

Launch

Go Live

Launch, go live, press start, whatever you want to call it. The day where you actually turn the damn thing on! This day is often met with revelry and it should be, the work has been done and it’s time to celebrate. Just remember, there are many pitfalls and traps you can fall into so make sure your preflight checklist is all ticked off before flipping your DNS settings or you might end up with a few surprises.

Followups

Search Engine submission, Analytics Reporting, Debrief Meeting/Communication

Regardless of who is going to be managing your site, we take the time to address some of the outstanding items that can only be done after the site is live. This includes registering the site with relevant search engines or updating sitemaps and settings within existing accounts, setting up analytics reports and tests and other trade secrets (our clients already know what I am talking about).

We also take the time to have a debrief meeting with our clients to learn from the experience and to improve our internal processes. We are committed to a life-long learning cycle and want to provide the best experience for our clients.

Looking for help with your next web design or website project? Reach out to us through our contact form and let us know how we can help.