We believe our client experience is the most important interaction that we have on a daily basis. When developing websites and applications, MTC continually strives for a remarkable client experience. We're fortunate enough to have had such successful interactions that one of our clients eventually transitioned into an equally successful employee (Justin, one of our lead developers).

Being that he has had the opportunity to have the unique perspective of both an MTC client and employee, we asked him to detail the process of what it is like to be a client of ours.

Having worked for and with Massachusetts Technology Corporation for over five years (I hired MTC back in 2010 when I was running a startup), I have had the unique perspective of working on both sides of nearly every project phase. Now a lead developer at MTC, I am involved in scoping, wireframing, mockup design, development, and testing on many projects, and have come to appreciate the importance of contractor-client communication throughout each phase.

This is a seemingly complex set of tasks, so we at MTC felt that outlining the main structure of our process would be beneficial for our readers.

SCOPING

During the scoping phase, the desired result for both us and the client is to understand the full breadth of the project. Often, a client will have a prospectus and outline that covers everything the website or application should include or do. During an initial scoping meeting, we may suggest ways to trim down or consolidate content. Both we and the client also try to understand all of the user types that may be using or visiting this site or app. It is important to understand every browser and/or device this site or app will be required to work on, and to begin thinking of the best User Interfaces for an initial launch.

At the end of the scoping phase, we will ultimately come up with an agreement with the client over what will actually be developed, how long it will take, and how much it will cost.

WIREFRAMING

When talking to friends about my job, I often compare it to architecture (after all, I am building something every day – I’m just using code instead of bricks and mortar). During the wireframing phase of a project, I like to compare the actual wireframe to an architectural blueprint. For developers, the wireframe may show actual pixel dimensions for a content area, the pixel size for images, and offer an overall layout of the site.

For the client, a wireframe acts as a visual outline for all of the content and functions discussed in the scoping phase. It is also the first visual representation of the site or application – so the client can see how pages are organized through navigation menus, where content is located, and how certain forms are laid out.

The back and forth between us and client is key during this phase. When building a web app, for example, it is important for us to nail down the work flow and layout of certain forms (it’s much easier to add a form item during this phase, using a wireframing tool, than it is to add it to a database table AND an SQL statement AND a server-side language AND the front-end AND client-side validation . . . you get the picture, later on in the development process).  

HIGH-FIDELITY MOCKUPS OR PROTOTYPES

From my experience, mockup design is the most exciting phase up to this point of a project.

This is when the client actually gets to see their website or app take shape through fonts, colors, buttons, images, and icons. We are constantly communicating with the client during this phase, as the client starts to visualize how their potential users will interact with the site. Just like in the wireframing phase, it is much easier to make visual changes to a site in Photoshop or Illustrator, than it is in HTML or CSS. A solid, nailed-down, mockup really helps us when organizing HTML and CSS stylesheets – even small changes after the fact can start to muddy things up.

If a client prefers to have the tagline here or an image moved there or a section slide out or fade in like this, it’s always easier to make these changes in a mockup.

DEVELOPMENT

Over the years, my role has shifted primarily towards development, so I have probably spent the most amount of time working in this project phase. One of the most important things I have learned (and this is something we always joke about) is the “90/10” rule. While slightly hyperbolic, it always seems like we complete 90% of a project in 10% of the time, and complete the last 10% in 90% of the time. In other words, we often hammer out all of the web pages of a marketing site, the forms of a web app, and the database tables and web services of a mobile app fairly quickly.

However, it is all the attention to detail we have to give to layout and how dynamic content looks on a web page, all of the validation that goes into complex forms, the testing on multiple browsers and devices, and all of the data types that can be sent to a database that takes the most time.

We often ask the client to play around with the website or app during this phase. While mockups do a great job of showing how a site will look  – it is during this phase when the client can actually click on buttons, go through forms, and have an overall interaction with parts of their site or app.

Often, this is when certain use-cases come up that haven’t been thought through yet, and it’s better that we get them addressed as early in the development phase as possible.

TESTING, QA & QC

Prior to launch, we always undergo extensive testing – going through every potential use-case, and testing functionality and website rendering on every browser discussed in the scoping phase.

However, client testing is also very important during this phase. Now that the client has their hands on a completed website or application, they can make sure everything looks and is working the way they intended it to. It is of utmost importance that the client separates bugs and issues from “nice-to-haves” and feature-adds. For example, someone testing for the client might notice a form where an auto-suggest or additional form item might streamline things better. If this was something that we talked about in scoping, and it’s not working, then it’s a bug. If it was something that was never discussed, then it needs to be added to a list of feature-adds for down the road.

With marketing websites, web applications, and native apps, testing can almost be endless as browsers and mobile operating systems update (what seems like) daily. However, thoroughly completing the testing phase is the key to making sure everything works correctly for every potential user and the key to a successful launch.

PUTTING IT ALL TOGETHER

For our team the most exciting part is the unveiling of the final product to the customer. While it's important the customer feels they received value and the website or app works well for their business, we put a lot of energy and man-power into making sure that every aspect of the product works seamlessly.

In many ways the path to developing a successful app or website is a journey. There are speedbumps, detours and ulterior routes along the way, but once the final destination has been reached and a client is happy with the end result, the journey feels complete.​