Process

Your website is a critical part of your brand. High performance, tight security, and wide discoverability of your website are paramount to maintaining success. Over fifteen years in business, Notebleu has developed rigorous processes to ensure the sites we support meet the highest possible standard. We continually re-assess and improve our approach as technology and the marketplace evolve.

Design

Discovery

Each design process at Notebleu begins with structured conversations that we call discovery. The intention of discovery meetings is for Notebleu’s team to learn the facets of your organization that may not be obvious to us as outside observers.

During the discovery meetings, we’ll lead your stakeholders through questionnaires targeted at drawing out information that will be important throughout the design process. We have three main goals in mind going into discovery. First, we use the meetings to create a clear outline of the full scope of the project requirements. Second, we seek your perspective on the tangible the rest of our process.

Discovery is the first step in writing the Project Charter, a document that details all facets of the project, including Design and Marketing Goals, Brand Identity, Content, Administrative Systems, Third Party Integrations, Personas, User Stories, and Tests. These meetings reveal the areas of further inquiry necessary to develop a complete understanding of the project tasks and success criteria.

Research & Planning

Notebleu follows discovery meetings with a research and planning phase. Here we develop a complete and nuanced understanding of the space that your organization occupies.

We begin by assembling and analyzing any data that is available through analytics profiles, user survey results, and other data aggregators. Where there are gaps in data, we suggest improvements in data collection that can fill them. We prepare a report based on our research that centralizes the key performance indicators that we will use to assess our success in the design project to come.

With an understanding in hand of the analytical performance of your existing digital assets (website, social media, online marketing), we conduct a thorough market analysis. During our market analysis, we assess your digital assets and those of the competitors/collaborators/inspirers that you identify. We create a report that details the similarities and divergences in identity, aesthetic, messaging, and marketing among this group. What emerges from this process is a rich depiction of your brand in situ. From this point, we can proceed with confidence in determining what elements of your current approach are working and what features need reimagining.

With our research complete, we build Personas. Personas are three to five profiles that describe a user type we want to target in the design process. Personas help us focus our creative work in the design phase.

Content Strategy

Content Strategy matches the marketing and communication goals for the website with design principles proven to accomplish those objectives. Content Strategy builds upon Information Architecture to establish an overall approach to content on the site, including navigation, search, traffic direction, page layout, and even visual design.

Thoughtful development of site navigation is among the most critical tasks. Great care is necessary to design a navigation system that is intuitive and simple but also comprehensive. Navigation development is also an area where Accessibility must be front-of-mind. Well designed navigation appears prescient to the end-user by anticipating what they are looking for and making it easy to find.

Search operates with the same principle. Search results should surface the most relevant content first, and users expect this because of modern search engines. Yet many popular content management platforms perform simple keyword-based searches with no relevance ranking.

We work with search analytics data and content strategy goals to develop a better search experience for the sites we design, basing results on content weight, facets, and tagging, not simple keyword matches. We also make content development suggestions that we believe will help to improve site search.

Information Architecture & Content Mapping

The effectiveness of a design is reliant on the audience for that design. Information Architecture establishes a set of rules for content layout and organization that specifically serve the project Personas. Once we have established these rules, we use them as a blueprint to implement content in the new design.

An essential part of creating the Information Architecture is scoping content migration and new content generation for the new website. We call this a Content Map. The Content Map is essentially a sitemap or list of all pages that also includes suggestions for the components that we will use in each page template. Along the left column of the Content Map (the “Key”) is a listing of all layout components available to content creators. The body of the Content Map contains small visual representations of each page and its components.

The Content Map may also be visualized as a simple spreadsheet and used by content creators as a checklist while organizing and completing their work. We are happy to demonstrate our Content Map system (which is a proprietary tool) upon request.

Design Framework

Notebleu approaches website design with a framework oriented approach. Layouts are the synthesis of components, each of which we design to work flawlessly either together with, or independent of, other elements.

This approach allows content managers great freedom in creating new content for the site, while also ensuring that page designs always uphold the intended aesthetic and structural qualities.

During the Wireframe and Visual Design phases, we include individual components in the context of page layouts to assist with the review. In reality, these components operate independently of each other, and content creators may build pages with great flexibility. Our goal in combining components in specific ways during the Design phase is to provide excellent examples of layouts that meet the Information Architecture and Content Strategy goals of the project.

Wireframes

Wireframes are structural web designs. They do not include visual design elements but instead provide a blueprint for the website. Developing wireframes is a vital part of conceiving a user interface that will best serve the content of the website.

We create wireframes in three versions for each template or template part in the project. The work in the Research phase informs each of the versions, but ultimately only one version is chosen and then refined.

Wireframing is a highly collaborative process, with several milestones aimed at ensuring that all stakeholders agree on the structural direction of the designs. We maintain forward momentum with weekly meetings to review and refine wireframes. Weekly meetings also serve to keep stakeholders involved in the forward progress of the project.

Where relevant, we make wireframes into clickable prototypes to demonstrate user interface and interaction. We use InVision for prototyping and to collect feedback on designs throughout the Design Process.

Visual Design

The visual design phase is the final step in the creative process. During this phase, Notebleu synthesizes the creative process into a bold, responsive, engaging website design.

Like the Wireframing phase, frequent collaboration and review are vital throughout this process. We use InVision to provide design prototypes with clickable examples of template designs that give an immediate sense of the website in action. Prototyping allows us to quickly assemble a simulation of full functionality during the design phase to improve the efficiency of communication and demonstration.

At the end of the design phase, Notebleu will have a full series of template designs that represent all page types and elements on the site at large, medium, and small sizes. These templates include documentation of interactive features and notes for development. As we finalize designs, meetings with the development team occur more frequently, ensuring a smooth handoff of materials for building into interactive web pages on a dynamic, intuitive content management system. Development begins while some components of the website are still in design. For this reason, it is crucial to incorporate design feedback opportunities early and often throughout the process.

Illustration, Photography, & Graphic Design

Notebleu has deep experience and talent in the area of graphic design and illustration. Our chief of design, Courtney Barnebey, has shown his versatility on many projects with diverse visual needs.

Courtney is comfortable working within an existing illustrative style. He is also highly creative when the need to evolve an aesthetic is required.

We create illustrations in vector format and port them to SVG, JPG, PNG, and other necessary formats depending on the context of their use.

Courtney is also a capable animator and can generate animated GIFs, and other web animations to add personality and motion to websites, emails, and other online marketing materials.

The photography needs of a web project are essential, but often under-appreciated. It is critical to document the requirements for photography throughout the many pages of the project. We compare the needs of the design with existing repositories of imagery, stock photography resources, and in some cases, new photographic expeditions.

Notebleu will work closely with your content stakeholders to understand the photography and graphical resources that already exist and to clearly outline the needs that will require supplementation with stock images and new photographs.

On key landing pages, images are hand chosen and adjusted by design to meet the aesthetic goals of the content. For other pages, we provide guidelines that recommend the approach to image selection and maintenance.

User Testing

We generally conduct user testing at two critical stages in the process. The first round of user testing occurs during the Visual Design phase. At this point, the interface is mature enough to build into a working prototype, but not so advanced that changes based on testing are unreasonably time-consuming or difficult. We build prototypes of the parts of the interface that need the closest scrutiny, especially navigation and conversion paths, and then invite community members to participate in structured tests that we oversee. We attempt to engage testers who fit well with the personas that were developed in the Research phase. This is generally possible in Seattle, which has a diverse population and a plethora of industries. We offer prepaid credit cards as incentives for participation. Tests generally last 30 minutes to an hour and are conducted using laptop and mobile devices owned by Notebleu. We test with eight individuals, each one intended to represent a different Persona. If major issues are uncovered in the first User Tests, we generally suggest that a second Design phase User Test occur after iteration.

Our second User Test occurs near the end of the Development Process. This test is used to verify that we have satisfactorily resolved any issues discovered in the Design phase User Testing and to point out any remaining items that require addressing. We also conduct User Testing throughout the process with Notebleu staff and client stakeholders. With frequent opportunities for feedback, the final User Testing generally serves as a formal verification that the design is working as intended. In some cases, late-stage User Testing results in further design iteration, which has the positive outcome of making the user interface the best that it can be.

Development

We believe that it is crucial to take a comprehensive approach to website development. Since 2009 we have developed solutions for our clients that put them on the cutting edge of web technology in the critical areas of performance, stability, security, accessibility, search engine optimization, and usability.

Notebleu thrives in this role due to our focus on rigorous quality control and forward-thinking development.

Accessibility

Building for accessibility requires a ground-up approach, attention throughout the design and development processes, and rigorous testing. More than anything, we believe that accessibility must be a forethought, not an afterthought. We also believe that embracing best practices in accessibility leads to better-designed websites and much better SEO.

Accessibility at Notebleu first enters into the process early in the Wireframe Design phase. When complex interfaces are considered, such as multi-level navigation, search, and web forms, we also think through the experience on mouse-less or assistive devices.

During the Visual Design phase, we are careful to test color combinations, key images and graphics, video/animations, and other visual elements against known issues for the colorblind and those with other visual or cognitive impairments.

While we have already considered many accessibility issues before we have even written the first line of code, the development process is the most critical for ensuring accessibility. We start with strict adherence to semantic HTML standards. HTML is a markup language, meaning that it gives special significance to the text, images, and other content that it surrounds. Semantic HTML is the concept that the HTML structure that underlies a webpage should communicate as much about the content on the page as the design does. Modern web design often obscures the essential structures that underly an HTML document. As a result, it is attractive to some developers to ignore fundamental semantic HTML best practices in favor of expedient alternatives. It is possible to build any design using semantic HTML core-concepts, and doing so is the first step to ensure a website will be accessible for all users.

We are careful to implement images and other visual elements with text alternatives and to make those text alternatives editable in the CMS. Where design uses video, we help content administrators to embed text alternatives and/or closed-captioning. We implement forms with predictable tab behavior and mouse-less capability. When building complex interfaces such as galleries, carousels, accordions, etc. we consult with best practice guidelines from experts in the field.

Our code review process includes a particular focus on accessibility. We also use specialized third-party software to verify our work. These approaches help us to quickly pick out issues and remediate them throughout the development process.

Stability & Performance

Notebleu’s approach to performance considers every factor in the delivery chain from the server to the browser. We begin at the low level, tuning Apache, PHP, MySQL, and other performance impacting services in the chain based on the CPUs and memory available on the servers themselves. We start by benchmarking the servers in their default configuration. We then tune the servers based on our knowledge of how the content management system uses resources. We then load test again, comparing the before and after benchmarks and looking for additional tuning opportunities. We repeat the process until we are confident that we have configured the servers for maximum performance under load. We conduct load testing using Apache Benchmark against the staging environment for the site (which mirrors production). We temporarily disable the WAF during testing to allow bursts of traffic from a single IP address.

Most content management systems rely heavily on the database connections that feed content into their templates. The web server carries out hundreds, and often thousands of small transactions with the database every time it builds a page for transmission to the browser. Although each database transaction takes only a fraction of a second, the cumulative impact can be significant. Further, traffic spikes can exhaust system resources and cause server health issues. We circumvent build-time problems by implementing static page caching at the server level. The result is that the server can deliver pages to the browser in a hundredth of the time and with minimal use of server resources.

Network latency is another common cause of low performance on websites. Every request to the server is routed over a complex network sending signals between the browser and the server, sometimes over a great distance. We avoid this by utilizing a Content Delivery Network (CDN) for all static resources such as CSS, Javascript, images, and, when possible, the HTML pages themselves. CDNs cache static assets on servers throughout the world and route assets to users based on the server that is closest to their location. CDNs reduce the number of server hops and distance that the information must travel to get to the user’s computer. CDN servers are specialized to send static assets as quickly as possible, and avoid latency creating factors like cookie inclusion. The result is often an eight-fold improvement in the speed of delivery.

Notebleu also approaches every build with performance in mind. Decisions made in the front-end development process can have a significant impact on the performance of a website. Our build process concatenates and minifies CSS and Javascript assets to reduce server calls and file size. We optimize images by using SVG assets when possible and Guetzli compression for all JPEG images (which results in a 30-50% reduction of image file size without loss of fidelity). We also configured browser caching headers to ensure that browsers cache static assets locally for as long as practical.

The result of thoughtful performance implementation is that users experience stellar load times, and servers are kept healthy even during times of high traffic.

Hosting

For WordPress powered websites, we recommend WPEngine for hosting. WPEngine offers a suite of WordPress specific security and performance utilities that increase the value of hosting significantly. WPEngine prices are competitive with other managed hosting platforms, but we have found their services to be significantly more advanced than similar hosts.

Wordpress Page Builders

WordPress and its plugin ecosystem have undergone significant evolution in recent versions. Chief among these is the introduction and advancement of drag-and-drop page building solutions. These tools provide an intuitive interface that allows non-technical content administrators to accomplish complex, responsive layouts and functionality.

The enormous flexibility that page builders provide to content managers must be balanced with the design vision for the site. We offer a rigorous design process to develop standards that your organization can use to efficiently and consistently implement new content in-keeping with your brand.

Security

Securing a web server and web application requires thorough preparation and frequent maintenance. Talented developers maintain the content management system, which is continuously tested by a broad community of developers and users. CMS developers release security patches promptly when they discover vulnerabilities, and installation of updates can be conducted quickly and effectively with the proper testing procedures in place to ensure quality.

Notebleu approaches server security at a low level. Servers require thousands of individual software components to operate, and each of those components is a potential security risk. We connect to host servers using certificate authentication, rather than passwords, during deployment and maintenance.

We configure file permissions throughout the server and application to security best practices. We develop server-side validation for all user input to ensure that malicious content submitted through the forms is properly sanitized, or rejected outright. When user uploads are accepted, we write server-side validation that disallows executable file types, which can open back doors and install malware on servers. We also implement honey potting and captcha based mechanisms to prevent automated submission of forms (commonly known as spamming).

We disable email services on the server and route all emails generated by the application through a third-party service called SendGrid. SendGrid allows us to monitor email health carefully and also prevents the abuse or hijacking of server-side email systems.

For the client-server interaction, we configure SSL and HSTS to enforce encrypted connections with the server. We configure the server to manage encryption with SHA256 hashing and require TLS 1.1 or higher for client connections. We eliminate the “Server” and “X-Powered-By” headers (often sent by default by the server) to obfuscate the systems that are responsible for powering the website. We configure security-related cookies, such as session information, to be stored with the “HTTP Only” and “Secure” flags set to disable common XSS attack vectors.

At the perimeter of the network, we configure a web application firewall to catch, discard, and report on malicious requests to the network.

Near the end of the development process, we test the network and the application for vulnerabilities. During testing, we attempt common (and uncommon) exploits against the application in its staging environment (which mirrors production). We attempt to gain access to the application and the network that it runs on as outsiders. If we are successful, we patch any discovered vulnerabilities and repeat our tests. The process usually does not require repetition, but we repeat it until the network and application are considered secure to a high standard.

Bill of Materials

A Bill of Materials lists all of the software components that go into running the website. We list component with its most recent service date and risk analysis.

When new components, such as plugins, are considered for addition to the site, we evaluate them with a risk analysis that combines the likelihood of compromise and the maximum severity of an incident to produce a risk score. We search vulnerability disclosure databases and bug bounty forums for past vulnerabilities and weigh them in deciding whether to implement the new component. We also evaluate the history and frequency of maintenance to ensure we only include well-supported software in the framework.

We use the Bill of Materials to guide website maintenance. When new component versions become, we update, verify, and release those updates promptly to support the stability and security of the website.

Privacy

The opportunity for a reasonable expectation of privacy should be a right in the modern digital age. We have seen an increase in the visibility of privacy tools since the introduction of GDPR. A closer look, however, reveals that few are embracing the spirit of the regulation. We’ve found time and time again that websites which appear to give us a choice about tracking, cookies, and other privacy features, actually ignore our requests. Such approaches give the appearance of privacy, but not the reality of it.

Implementing privacy is not always easy. Tracking companies such as Google Analytics and Facebook make it rather challenging to honor users’ privacy requests and Do Not Track headers. Challenge or no, we take it upon ourselves to honor the user’s data rights, relying instead on good design and content to drive conversions.

Privacy starts by giving the user a real choice when it comes to privacy. We encourage our clients to honor the Do Not Track header that some browsers pass with their requests to the website. If the Do Not Track header is present, we can engineer the server’s response to exclude tracking scripts, cookies, and tracking pixels/images. If a website requires a notice to users about the use of cookies and allows users to opt-out of tracking manually, we honor that input. In this situation, we do not set tracking cookies, scripts, or images until the user has made their choice. It is not necessary in all cases to provide this choice, so we encourage our clients to use legal counsel to define their privacy policies.

We encourage our clients to disclose the third parties with whom they share user-provided information. Moreover, we encourage our clients to include these third party storage systems (such as CRMs, Mailing Lists, etc.) in their right to disclosure of personal data and right to erasure procedures.

We help our clients define the technical implementation of their right to disclosure of personal data and right to erasure procedures. We also encourage our clients to use legal counsel to define these policies.

Search Engine Optimization

Search Engine Optimization is the synthesis of many essential elements in the underlying structure and content of the site. SEO starts with content. Excellent website content will generate search engine favorability by increasing link backs, which prove value.

Notebleu embraces semantic HTML to underpin content with logical markup and structure that helps search engines understand the purpose behind the words and design.

We use Schema.org markup to define data types for search engine consumption. Proper use of schema can lead not only to search engine favorability, but also more exciting and informative Search Engine Result Page listings, including search engine result snippets.

We also implement additional metadata, such as OpenGraph and Twitter Cards, so that sharing on social media and other platforms will meet brand guidelines.

Robots.txt is used to indicate what content search engines should and should not index. We use XML sitemaps to help search engines understand site structure without having to crawl links.

What’s helpful for search engines is also useful for accessibility. Notebleu encourages content creators to include valuable metadata in non-text media (such as alt tags for images). Metadata helps search engines understand context, but also assists screen readers and other technologies for users with special needs.

Notebleu works with a foundational understanding of structural approaches to SEO and follows up with an automated tool called SEMRush to ensure that website content and structure meet with the broad guidelines for search engine optimization.

Quality Assurance

Notebleu places prime importance on delivering a high-quality product tested from many angles, and coded with industry best practices and creative moxie.

Notebleu follows test-driven-development best practices. We develop tests for each project requirements (often numbering in the hundreds) and use them as a rubric for testing throughout the project. We conduct tests internally and also shared them with your stakeholders as a guide for User Acceptance Testing during the development review periods.

Notebleu uses PHPUnit to write unit tests (often multiple) for each class and function we write. We run unit tests before each commit to verify that all custom code remains in working order and that changes to one part of the codebase do not adversely affect other parts.

We perform a peer code review of every custom line of code throughout the project. Notebleu conducts code review using BitBucket, a tool by Atlassian that integrates with our other internal project management and communication software.

We conduct browser/device testing using BrowserStack. BrowserStack allows us to create screenshots across multiple browsers, operating systems, and devices for side-by-side comparison. This approach enables us to identify issues, correct them, and then re-test quickly.

The set of browsers that we test in varies by the needs of the project, but our most common testing platforms are:

• Microsoft Edge (1280px by 1024px)
• Chrome for MacOS (1600px by 1200px)
• Firefox for MacOS 10 (1600px by 1200px)
• Safari for MacOS (1600px by 1200px)
• iPad Air (portrait)
• iPad Mini (portrait)
• iPhone (portrait)
• Google Pixel (portrait)

After the website launches, Notebleu uses the same tests developed at the beginning of the project to validate and verify the functionality of the website at each update point, and on a regular cadence. It is uncommon for well-tested software to fail spontaneously, but from time to time, edge cases, browser updates, and other factors can cause issues. Our verification process ensures that flaws are caught early and dealt with proactively.

Deliverables

Notebleu delivers products that uphold the full standards of quality and professionalism described in this proposal.

Throughout the project, Notebleu will maintain and deliver frequent design and content updates to keep the process of review and iteration moving forward smoothly.

Upon conclusion of significant projects, Notebleu will provide gold master release candidates for the site along with an archive of all site files and a snapshot of the website’s database at the time of launch.

Throughout the project, Notebleu will share all code documentation and documentation on unit tests, integration tests, third-party integrations, and any other materials fabricated to support the project throughout its execution.

We consider the Content Management System to be among the most critical deliverables in the project. A usable, useful content management interface is essential to the long term viability of the website. We deliver content management platforms that will allow your team to manage all of the content on the site without a steep learning curve or burdensome technical requirements.

Training

Towards the end of the project, we provide training over screen share for all client-serviceable components of the website. Training sessions allow trainees to follow along in real-time and ask questions throughout the process.

We follow training by producing short screencasts that summarize content management features and approaches. You may use these screencasts to train future content managers or as refreshers.

We have found screencasts to be a useful training tool because they capture processes in real-world scenarios, with visual images that match what the user sees in the interface. Screencasts are scripted and edited to make efficient use of the trainee’s time.

Project Management

Above all else, we value a warm, collaborative environment at Notebleu. We achieve this through consistent, open communication.

Notebleu’s internal project management philosophy is a combination of long-term planning, weekly organization, and daily facilitation.

Throughout the project, we keep careful track of actual progress against scheduled progress and immediately communicate when obstacles are likely to delay the schedule.

We use weekly sprint planning to keep our teams on track, and daily stand-ups to ensure that we can quickly unblock each other when individuals encounter obstacles.

Notebleu will use online meeting software to facilitate weekly meetings. We conduct meetings in an orderly fashion with a clear agenda and a follow-up plan of action.

Staffing

Notebleu is a small team of dedicated individuals. The small size of our team means that we often supplement projects with additional talent. When staffing needs exceed our internal capacity, we work with Robert Half Staffing to place highly competent, local individuals in essential roles.

Will started Notebleu in 2009 and has been working since then to hone his craft and approach. When Will comes across problems he hasn’t solved before, he approaches them with a combination of creativity, experience, and a willingness to learn.

Will oversees the project schedule, Notebleu staff coordination, QA and User Testing, facilitating weekly meetings, communication, and any other necessary planning activities throughout a project.

Will also executes primary development tasks, bringing skill, experience, and thoughtfulness to his work.

Courtney has worked in design for thirty years and at Notebleu since 2015. His background ranges from design for small non-profits to international corporations. Courtney combines skill and experience in UX design with exceptional artistic ability.

Courtney is responsible for research and design tasks including user research, traffic analysis, content strategy, information architecture, design and prototyping.

Ongoing Work & Billing

Notebleu bills every two weeks for work completed in the previous fortnight. Our current billing rate is $180/hour for all design, development, and consulting tasks. We offer a reduced rate of $149/hour to our nonprofit clients, calculated each year based on our break-even rate for operations.

After we launch the website, Notebleu will play an active roll in support. We ask for a retainer to maintain the web application and hosting. This includes timely service (installing software patches and updates) and monitoring verification criteria such as performance, accessibility, and integrations.

We frequently engage in new feature development and ongoing development for our clients. All new feature development is estimated individually and goes through an approval process.

We also provide direct support for urgent requests, especially as they relate to service interruptions. Notebleu does not have staff on duty 24 hours a day, but we do have a robust notification system in place for urgent after-hours requests, and we work hard to provide fast and exceptional support to clients who retain our services.