Discovery

After building websites literally since the modern internet was invented, one thing is clear: anything involving programming is frustrating, prone to miscommunication, requires lots of QC and is just plain messy (because humans are messy). Since Myria requested a very custom and highly secure website we had to find the absolute best way to approach it. Custom means different things to different people, so the first order of business is to understand their specific needs and budget constraints.

The different degrees of custom websites are:

Templated websites that use predesigned templates to save money or time. Often they are built upon platforms like WordPress, Shopify, Magento, Drupal and Squarespace. There are literally millions of templates to choose from and many are as gorgeous as custom websites. But buyer beware, they need to be chosen carefully as meany are hastily built and poorly supported.

Customized websites that start with one of the above templates, usually a developer’s version of the template with special tools and are modified to match custom designs or additional functionality that the template does not have. The vast majority of “custom” websites are built this way. Since there are so many plugins and apps that work with these platforms, you can get very sophisticated functionality at a fraction of the price that a fully custom website would cost.

100% Custom built from scratch websites. This was what Myria needed. For custom, from scratch, websites and web apps, we’d normally suggest a starting budget of anywhere from $95,000 – $150,000+. This is because every single feature is custom tailored and built to our client’s needs.

But before we let that price stress them out, we let them know there is a way to potentially lower that price dramatically.

This is where we recommend a Discovery Session. This session includes 5-6 hours of conversation and research. There are literally millions of pre-built digital components, that offer many features that our client may be looking for and can cut out a ton of custom development time.

But the only way to know if we can use those pre-built components, and benefit from the existing code that others have written, is to do a formal interview about key features, how they work and sometimes even building a basic prototype.

Working with the team that was developing the Myria app we determined that we would need to code entirely from scratch to load quickly and integrate with the app in React Native and Node.js.

Homepage Design

We always start with the homepage. Many agencies do all the top level pages at the same time as they design the homepage, but since the homepage is the first point of contact people have with an organization we need to make it spectacular and prefer to spend all of our creative energy on that first. For a full custom website, we need to do mockups so that the programing team knows exactly what to code. For Myria we used Figma, a collaborative prototyping software, to create the mockups so that we could quickly iterate with the Myria team.

We began by creating five different homepage mockups ranging from conservative to a little bit “out there”. Conservative does not mean dull and boring though. In the kickoff meeting we discussed the things that Myria was looking for, a “blueprint” theme and to mirror the angles of the Myria logo. We made our recommendations and everyone left with some idea of what the homepage was going to look like. This was the conservative one. We do 100+ websites a year so we see what works and what doesn’t. So we also wanted to show Myria ideas that they hadn’t thought of. Not crazy or unusable ideas, but we like to push the envelope a little and show them something just a little past their comfort zone.

Alpha Work Period

Once the homepage design was finalized and approved to code by the Myria team, we matched the design pixel for pixel on our development server. We do this so that if our client has an existing website up and running, we can keep it functioning while we create their new website.

We code the homepage first because that creates the foundation of the whole website. The header, the footer, the colors, fonts and visual style. It also speeds up the process so that we don’t have to wait until the rest of the website pages are designed in order to start.

SubPage Design

Now we can work in parallel, designing the sub pages while our development team is coding the homepage and the foundation code for the entire website.

Next we picked 4 key pages to serve as templates for all the other pages on the website and did mockups for these pages. Simple websites may need less key pages and large complex websites may need more. But 4 or 5 is a good starting point.

Some client’s prefer wireframes, and we can do that too, but the cost is the same and we prefer mockups because our client sees exactly what they are going to get and our programers know exactly what to code pixel for pixel.

Mobile Mockups

If we use a platform like like Shopify or WordPress, the basic foundation is responsive, meaning the design adapts to mobile devices and tablets. New devices are being developed every day, so if our client wants something to look a specific way on mobile devices, the very best way is to also do mobile mock-ups. For fully custom websites they are even more important so the programmers know exactly what to code, eliminating unnecessary revisions and excessive QC.

Beta Work Period

Once the subpages and mobile mockups are approved, like with the homepage, we them on the development server too. The Beta Work Period is the longest. In addition to coding these pages and optimizing for mobile devices we also do an SEO Sweep and install the Analytics code.

SEO is an ongoing conversation. Competitors are working to improve their rankings and Google constantly adjusts their own algorithms. Because of this, our client’s website needs to be analyzed and adjusted all the time if they hope to rank high when people search for companies like theirs.

To get Myria off to a good start, we did a search console verification with Google and submitted their sitemap, tested their Robots.txt file, and a sweep of the entire website for proper SEO titles, meta tags, H1 and H2 tags.

If a client has the budget we can also optimize for speed and ADA accessibility compliance. These can get very expensive to do well, so we have plugins that offer a compromise solution.

It’s all about the data. So at this time we install Google Analytics and ff our client wants to take their data to the next level, “heatmap code” on their website. This can be nothing short of miraculous. Just as analytics tell us which pages are underperforming, heatmaps tell us what specific part of the page is underperforming.

Heatmap software shows us how visitors are interacting with our client’s website or app. It displays things like their mouse movements, where they click and how far down they scroll.

Heatmapping is very useful to discover what works on our client’s site or app and what doesn’t. It tallies up page views and shows us how many clicks a link or button gets. With this data, we can test out new layout options to increase the amount of engagement.

QC and Polish Pass

Mockups are created at 1400px for desktop, 768px for tablet and 360px for mobile devices. Once the website was coded, our team meticulously went page by page, using each of the most popular browsers, Chrome, FireFox and Safari to make sure everything was working properly at these formats. We also checked it on the major Apple and Android devices.

Once we got the final approval from the Myria team, the website was migrated from our development server to Myria’s live server.