Search Kanopi

Category: Design

Kanopi at Design 4 Drupal’s 10 Year Anniversary in Boston

Posted on by Denise

Nestled right off Main Street in Cambridge, Massachusetts lies the Ray and Maria Stata Center on the campus of the Massachusetts Institute of Technology (MIT).  This abstract building designed by Pritzker Prize-winning architect Frank Gehry was the perfect venue to house the longest running, front-end focused Drupal conference in the US, Design 4 Drupal.  It demonstrates that the modern and abstract design Cambridge and MIT has seen can work perfectly with the structure needed within.

Image of sculpture at MIT that spells out "MIT" in metal, from the at Design 4 Drupal conference.

The Design 4 Drupal conference highlights training sessions and seminars focusing on designing for, and building the “front-end” of websites, or what gets seen and used by end users.  This area of focus encompasses graphic design, user experience, accessibility, performance, tooling, and much more.

Like a lot of our Higher-Ed clients, MIT is a user of Drupal, and is proud to offer this space to the Drupal community to learn and share knowledge.  I was pleased to be asked to present two sessions at the conference, and even more pleased with the knowledge I was able to take away from attending the event.

Meta and Schema: Defining the Content about your Content

The first session I presented focuses on designing and implementing a metadata strategy for your website.  Metadata is the content that describes your content. It is very important in how web pages are found in search engines, and how they are displayed on social network sites.

Image of Jim Birch's presentation in a large classroom with a projector screen at Design 4 Drupal

The presentation is a deep dive into the different specifications for meta tags and Schema.org schemas, how to decide what to markup, and then how to text and validate that you’ve done it correctly.

This session was not recorded due to technical difficulties, but the slides are available at jimbir.ch/meta-schema-drupal

Building a Better Page Builder with Bootstrap Paragraphs

The second session presented reviews the Bootstrap Paragraphs module for Drupal 8 that I developed and how it combines the power of the world’s most popular front end framework, Bootstrap, with Drupal Paragraphs, the powerful module that allows content creators to build layouts and structured pages using content components.

I have been working on this module since I first presented it at the BADCamp 2016 Front-end Summit.  The module installs a suite of components that allow content creators to quickly build out pages.

I love giving this presentation because I always get great feedback from people who use the module; who are going to use the module; or who are going to use my methodology to create their own version that fits their specific needs.  The module currently has over 25,000 downloads, and has had users from all around the world.

You can watch a recording of the session here.

Need help designing your website? Contact us and we can help. 

The Keynotes

The Building Blocks Of The Indie Web – Jeremy Keith

The conference featured not one, but two great keynotes.  On the first day author and developer Jeremy Keith, who was also in town for An Event Apart Boston, presented a session in which he encouraged a return from social media publishing to independent publishing.  It was a great reminder that the web was ham radio before it was cable, and can still be so.

Exploring the New Drupal Front-end with JavaScript – Dries Buytaert

The second keynote was given by founder and project lead of Drupal, Dries Buytaert.  Dries was the keynote at the very first Design 4 Drupal, so it was a special treat have have him back for the tenth anniversary.  His presentation reviewed the history of JavaScript on the web, API-first vs. API-only approaches and gave behind-the-scenes insights into Drupal’s JavaScript modernization initiative.

Design 4 Drupal Sessions

Thanks to Kevin Thull, and the organizers of Design 4 Drupal,  most of the presentations were recorded and are available to anyone at Design 4 Drupal’s YouTube channel.  There was a broad mix of different types of sessions that covered developers, designers, User Experience (UX), Accessibility (A11Y), and Tools.  Below are some highlights of the sessions I went to.

Web Accessibility Tips and Tools – Abby Kingman

Abby gave a session that was near and dear to my heart.  We are always learning about how to make our websites more accessible, and Abby’s presentation covered where to find current guidelines and specifications, and then when onto to review tools for testing.  There are lots of great links to follow from this one.

This session validated the approach we take at Kanopi to accessibility in design and development.  A lot of the tools and testing techniques were all part of our processes, and I look forward to exploring the ones I didn’t know about!

Webform Accessibility – Jacob Rockowitz

Jacob is the current maintainer and a prolific blogger and thought leader in the Drupal-sphere.  We penned an article in advance of this presentation where he reviewed his thought process, and recorded his presentation.  My favorite takeaway from this presentation was:

“Learning about accessibility can be overwhelming. We don’t have to be accessibility experts. We just need to care about accessibility.”

Kanopi has a long history of both building new and retrofitting existing sites to be WCAG compliant.  This presentation showed me that our approach, ongoing learning and iteration have us on the right track.

Variable Fonts and Our New Typography – Jason Pamental

I’m a big fan of Jason’s body of work, from his book, Responsive Typography: Using Type Well on the Web, to his blog, and frequent appearances on the Talking Drupal Podcast.

Jason’s deep knowledge of typography truly shows in this presentation that gives a brief history of type, how it moved from paper to the screen, and how the future of digital typography will be with variable fonts.

I look forward to exploring more about variable fonts with the designers at Kanopi.  The design possibilities, and the performance gains make these new tools very attractive.

Building a Living Style Guide with Herman – in Your Sass! – Chris Wells

In this technical presentation, Chris Wells, CTO of Redfin Solutions gave a nice overview of Herman, which uses SassDoc to reads comments in your stylesheets to build a static website  that is your style guide. It is not as extensive as a full blown style guide like Pattern Lab, but can be very useful for smaller teams.

This presentation has me researching simple style guide solutions.  Not every project has the budget or need for a solution like Pattern Lab, but since I already try to comment style sheets and templates, it makes sense to do it in a way that something like Herman or KSS Node can parse.

Thanks Design 4 Drupal!

Thanks to all of the volunteer organizers, especially Leslie Glynn, who was my point of contact before, during, and after the event, and in true New England fashion, made sure I took home some famous Boston cannolis for my mother.  Kanopians help organize a few different conferences across the states including BADcamp and MIDcamp, and we know putting on these conferences is a labor of love, so thank you!

The Creative Chemistry of Atomic Design

Posted on by ricky

What is Atomic Design?

Designing for the web has evolved. And with good reason. Creating strong, consistent and flexible designs for responsive sites comes with unique challenges. How do we craft a responsive site with tons of different content needs and keep it unified? Enter atomic design.

Pattern-based design systems (or pattern libraries) aren’t a new idea. But atomic design gives this old concept a new framework. It helps us think about how to build from the bottom up to create a final web site.

Atomic Design is the brainchild of Brad Frost. His initial article on the subject is a great place to get an overview of this mental model. His analogy relates a smart design system to principles of chemistry.

See a video overview here.

Atoms

Atoms are the fundamental elements of your design. It doesn’t get smaller than this! They are the tiniest components of a site. These patterns establish the ground rules that everything else builds on. Atoms are a combination of the concrete and the abstract. Atoms are basic HTML elements like headers, paragraphs, and form fields. Alternatively, they are visual elements of your brand guidelines, like colors and fonts.

Molecules

Molecules are simple combinations of our design atoms. Just a few of them. Again, the emphasis is on incremental complexity. Some good examples are a photo and its caption, an article teaser block, or a search form.

Organisms

This is when things get interesting. With molecules in our toolbox, we can start to create organisms which represent larger sections of a site. Headers, footers, and grids of articles are examples of organisms.

For our clients, the site design starts to come to life with organisms. The larger layout components are a complete thought on their own, and we mix and match them to create templates.

Templates

The chemistry analogy falls away at this point, but not the benefits of the approach. Templates aggregate organisms into layouts that contain placeholder content. They establish whole layout patterns that we can apply to different types of content on the site.

Pages

Pages let us stress-test our templates by adding real content to the layouts. We create several pages that use the same template but different content. Pages help us see if our molecules don’t work in the real world and need adjusting. This feedback cycle helps create a tight, flexible site design that responds to the true needs of our clients.

Need help designing your site? Contact us. 

Benefits of Pattern-based Design

Kanopi specializes in Drupal and WordPress CMS development. In this context, pattern-based design methodologies really shine. Content management systems like Drupal and WordPress are inherently component driven. They use and re-use “building blocks” in different contexts throughout the system. An atomic approach enables us to reconfigure and repurpose molecules. It creates a consistent but flexible site architecture. This in turn is an efficient and scalable way to build a CMS-driven site experience. These patterns makes your site consistent. They give you the tools you need to evolve your site as the needs of your organization change.

Atomic Design at Kanopi

Kanopi takes two different approaches to pattern libraries based on the needs of our clients. Both follow the atomic design philosophy. One is an interactive design approach using clickable wireframes and modern design tools. The other is a living, breathing design that is purely code-based, using the Pattern Lab tool.

Interactive design

Strong designs start with strong strategic and UX thinking. Wireframing is a key step early in this process. Wireframes are the “bones” of your site. They give an idea of information hierarchy for your templates. They can also help understand what user interaction with the site will feel like. We create interactive, clickable wireframes. Using this tool, stakeholders and users interact with key features of the site interface early on. This way we catch usability issues before we ever get into visual design.

Kanopi’s experienced design team takes the wireframes and layers on the look and feel. They define patterns, or symbols, using web-centric design tools like Sketch. These symbols build upon one another in a way that maps beautifully to the atomic design process. These are static files, but they are built with a developer’s eye. How? Our web designers are front-end developers! As a result our designs start with the fundamental elements of HTML and grow and evolve from there.

In-browser design with Pattern Lab

In-browser design can feel strange and unfamiliar at first. But embracing it means faster design iterations. It gives a better real world picture of the site. And it serves as a foundation we can leverage in theme development to make the rest of the project go faster.

Pattern Lab is an open-source tool created to help designers architect efficient atomic design systems. It is our preferred tool for creating pattern libraries for our clients. Wireframing starts in this interface, in simple grey and white. This ensures we have identified all the patterns needed for the functionality and features of the site.

We take the established “bones” and flesh them out with established colors, typography, and visual elements. At the end, we can see templates that respond to your browser. Interacting with Pattern Lab feels like pages in a finished site. It eliminates the guesswork and misalignment that come from static, traditional mockups. The final experience gives you a link that you can share with stakeholders. They see what they need to see, on their device of preference.

To see a Pattern Lab design system in action, check out the demo on the Pattern Lab website.

Website Musts: How to Define Everything That Your Website Needs to Do

Posted on by will
Woman enjoying a website on her computer

Every good, juicy story is built from three basic elements: a compelling beginning to draw the reader in,  action throughout the plot to keep people engaged, and a strong ending that wraps up the story elements in a satisfying way.

Like a good story, your website needs to draw your desired audience in, keep the user engaged, and offer a means for them to take the desired actions to complete their journey, whether that means making a donation, purchasing a product, or applying for a job.

In this post, we explore how to write that story. Or in other words, how to define everything it needs to do to create a proper customer journey on a website. Utilize this no-fail approach to outlining the needs and requirements of your organization and audience to ensure that everyone gets the results they’re looking for.

Chapter 1: Defining your Audience

All websites must start by defining an audience. If you don’t know who you are writing, designing, or developing your website for, your story will read like a complicated mystery that doesn’t end well for your brand.

Start with two incredibly valuable and fairly simple exploration activities that will help you 1) uncover your user segments and 2) craft value statements for them.

You can uncover your user segments by working through these simple five questions:

  • Who is this website / mobile app for?
  • Why will they use it?
  • When will they use it?
  • How will they use it?
  • Why will they keep using it?

As an example, we’ll use a Community Garden nonprofit organization looking to build a site to promote their events and information on healthy food choices.

Their target audience would likely be: Families and individuals looking for a way to eat healthy on a low income

Next, we’ll craft value statements, using a simple xyz formula:

For [target audience X]

that [cares about topic Y]

[your organization]

is a [your solution/product/service]

that [provides benefits Z]

The community garden would write a statement something like this: For families who are looking for a way to eat fresh and healthy food, Our Community Garden is an organization that provides opportunities for people to help grow, harvest and enjoy locally-grown produce.

Chapter 2: User Personas

User personas represent the different types of people who will interact with your website or product. These fictional characters can be based on real users or the types of users you’d like to attract to your site. Creating personas can help  identify the features and functionality that will needed on your website to support user needs. HubSpot provides a great set of questions that can can be the basis for your user personas. In addition, we have a few tips for creating effective user personas below.

  • Represent a user group for your website – Include existing clients or buyers. It can also be helpful to  consider users of competitor websites.
  • Write your personas as if they were real people with backgrounds, goals, and values. Include the four pillars:
    • Geographical – country, city, population, density
    • Demographics – age, gender, family size, occupation, income, education
    • Psychographic – lifestyle, personal values, activities, interests, opinions
    • Behavioral – occasions, usage, readiness
  • Express and focus on the major needs and expectations of your most important user groups and don’t be afraid to prioritize them.
  • Describe user’s expectations and how they’re likely to use the site
  • Express common concerns and objections

Chapter 3: Tactics to Create User Personas

Here are some basic questions that can help to define your user personas.

  • Define your priority initiative. What triggered the user to visit and browse your site?” Example: A flyer sent home from your child’s school about your weekend gardening program
  • Identify the factors that will define success and what this will look like. What is the result or outcome they are expecting from visiting your site and what might prevent them from achieving this result? This could be easily finding information about dates and locations of weekend gardening programs.
  • Frame out all the potential barriers (and don’t be afraid to be honest). Barriers could include a poorly designed homepage where events are difficult to find.
  • Agree on your decision criteria. What criteria would the visitor use during their evaluation of your offerings? For example, ease of finding event locations and times.
  • Map your conversion path.What is the key factor that will trigger the decision to act? What resources will they trust in helping them make a decision to move forward? For example, knowing that their child’s’ school is sponsoring a gardening day through the community gardening program may motivate the parents to participate.

Don’t forget to review your current data – it will speak volumes. Look at your site’s analytics for at least the past 6 months, focusing heavily on the “Audience Reports” within Google Analytics. This information can feed directly into your user demographics.

Additional approaches to acquire data include:

Interview your internal sales, customer service or support teams. Their interactions with your clients can provide a wealth of first-hand insight.

Administer a survey to your users. Set up a simple survey on your website through a third party program or webform like SurveyMonkey. Send the survey out to your email list to expand your reach and results.

Interview your audience. Establish a set of basic questions, then reach out to your users or clients to schedule an in-person, phone or online interview. Consider offering an incentive like a discount or coupon or small gift to make it easier to secure interviewees and to show your appreciation for their time.

The bottom line: any research is better than no research. It doesn’t have to be complicated or costly to be effective, so don’t skip this crucial step!

Chapter 4: User Stories

Start by establishing your organization’s objective (the action you want the user to complete on your site). Next, extract the objectives, needs, and desires of your users as defined in your user personas.

Then, fill out the following template:

As a [type of site visitor] I need a way to [do something] so that I can [benefit somehow]

Don’t forget to let your value statements be your guide to ensuring that user stories map to high-level user goals.

Chapter 5: Defining Features

What are the actions your users need to take on your website? These should correlate to features, which can include everything from downloading a program schedule, to contacting you for more information, to  registering for a class online.

For example:

Action: Families need to be able to see a list of nearby gardening events that are appropriate for their children.

Corresponding website feature: An event content type that can be sorted by date, age range, and geographic location.

Happy ending

Using the information from your user personas, map each user’s tasks to create a feature and functionality document for your website. Through this process it’s common for the highest value features to be consistent across multiple personas and rise to the top. These become your site’s core features. Any additional features become your subset features. Depending on your budget and timeline, you can start by developing your site’s core features and save your subset for subsequent releases or when additional budget is available.

Finding the sweet spot between your organization’s needs, your user’s needs and your technical needs will ensure strong results and a happy ending for your website project.

If you or your organization needs assistance with creating a customer journey on a website, contact us today! We can work with you on any aspect of this process, from developing personas to crafting user stories to defining feature requirements.

If it ain’t broke …

Posted on by kendall
Designers mapping out a website.

So your site isn’t working the way you want it to. Maybe it’s sluggish, or you’re not seeing the conversions you want, or customers are complaining. Before you drop a huge chunk of your budget on a complete rebuild, consider that there might be a simpler (and more affordable) solution to your website woes.

We see a lot of Drupal 7 and WordPress websites here at Kanopi Studios, and we often discover that it’s more cost-effective for our clients to simply update their sites rather than rebuilding them. Making targeted updates can allow you to focus on addressing a few key issues, while still leveraging the investment of time, energy and funds that went into your site’s foundation.

Here are three key topics to consider:

1. How do you know when it’s time for a change?
2. Is your website optimally organized and designed to be user-friendly?
3. How strong is your technical foundation?

How do I know it’s time for a change?

Do any of these problems sound familiar?

  • Low conversion rates
  • Site pages take more than 3 seconds to load
  • Site doesn’t work well on mobile or other devices
  • Updating content is a difficult and frustrating process
  • Users struggle to find what they need on the site or have shared negative feedback
  • Site crashes when updating
  • Too many bugs
  • Building new features is difficult or may not even be possible
  • Site is not loading on https and triggers security warnings

If your answer to any of these is yes, it’s time to take action.

But first … is it really that important for me to address these issues?

Yes! A website that isn’t working optimally can dramatically affect your bottom line. An out-of-date or poorly designed website can:

  • Damage your credibility. If your website loads slowly, is crowded with clutter or is just plain not working, you are sending the message that your company is unprofessional.
  • Make you appear out of touch. A dated website tells your customers you are behind the technological times, or worse – you don’t care enough to stay up-to-date.
  • Cost you customers. Every customer who leaves your site in frustration due to broken links, complex forms, slow pages or confusing navigation is a customer you won’t get back. If your competitors offer similar services and have a stronger website experience, your loss will be their gain.

Decision time. If you want to avoid the damage that a dated website can cause, you’ll need to either rebuild your site or update it. If you’re ready to take action, we can help you find the best and most cost-effective approach.

There are two primary things to consider when maximizing your site’s ROI: your user’s needs and the technology that drives your site. If you can identify and fix problems in both of these categories, you can most likely avoid a costly rebuild.

Venn diagram showing optimum website health at the intersection of smart user experience and strong tech foundation.

Next, we’ll dive a bit deeper into tips to help you level up your user experience and update your website technology without starting over from scratch. Consider it the non-surgical, diagnostic approach to improving your website experience right where it needs it the most. 

How’s your user experience?

Posted on by kendall

Now that you’ve decided that it’s time to take action to improve your website, it’s time to see if any user experience upgrades could help. Take a look through our list of issues below, and the tips to help resolve them.

Having a hard time converting leads or getting sales?

If you’re not sure why you’re not generating business from your website, it’s time to get serious about strategy and subsequent user experience upgrades. Here’s how:

  • Add a survey to your website using tools like Jotform’s Survey Maker to understand what users are looking for
  • Take a look at your analytics to understand where you are losing your users. If you don’t have analytics installed, get either Google Analytics or Tag Manager set up on your site.
  • Try an online user testing platform like Hotjar to help you go beyond standard analytics with heatmaps, visitor recordings, conversion funnels and more.
    Complete a User Experience & Conversion Optimization Audit with Kanopi Studios. We can make a whole range of insightful recommendations within your budget. Contact us to learn more.

Does your site take forever to load?

If it takes longer than three seconds, you have a problem.

  • Use Google PageSpeed or Pingdom to test your site’s speed, understand what might be slowing it down and take action to resolve any issues.
  • Make sure you have a reliable hosting company backing your site at the right level for the amount of traffic you receive.

Does your site work on mobile? Is it accessible?

It’s vital to make sure your site is accessible to everyone, no matter what device or screen size they are using. Here’s how to check:

  • Try using your site on a phone or a tablet. If you have to pinch or zoom to interact with the content, it’s time for a responsive design.
  • Make sure you can tab through all navigation and content on your site using only your keyboard, that all images have alt tags, and that you are able to use a voice browser to “read” your pages out loud. If not, you are missing key elements of accessibility.
  • Contact Kanopi Studios about an accessibility audit. We can help you identify the issues and build a plan for how to resolve them.

Is it frustrating – or impossible – to update content on your site?

If it’s a major undertaking to change even the simplest thing, something needs to happen.

  • Define your ideal workflow, then ask an expert to take a look and see how you can optimize the backend.
  • Consider the types of content that your site needs to support. Do you have templates in place that meet your needs? If not, it may be time to consider a bit of design and development time to build additional page types on your site.

Getting negative user feedback?

If the people visiting your site are taking the time to complain, chances are they might also take the time to help you make things better. Here’s how:

  • Collect feedback by sending out a survey, or document your customer service calls.
  • Always thank people for taking the time to help you improve.
  • Look for trends in the information you are receiving from users and build a plan to address any issues to help meet their needs

If none of the issues above apply, congratulations! Your user experience is likely more solid than many of the websites out there! But there are still more things to consider before committing to rebuilding your site. In our next post, we will walk you through a number of common technical issues and some helpful fixes for them.

How to “humanize” the web development process to effectively share your story & connect with your audience

Posted on by anne

While “looking at the numbers” is a quantitative way to determine how well you’ve succeeded at meeting your business goals, your audience is not a troop of robots that generate traffic numbers and donation statistics. They are living, breathing, thinking, analytical people.

Not only are they people, but most likely, they’re people with very little time in their day. In an age of constant connectivity and ubiquitous multitasking, it’s important to make an immediate impact and a clear call to action when they choose to spend their precious moments with you.

How do you make the greatest impact when you have only a few seconds of someone’s attention? Here are some tips to use during the web development process to help you to make their visit as impactful as possible.

Provide Relevant Content

The key word here is relevant. You need to dig deeply into what will be relevant for your audience. Think about the frame of mind they are in when they reach your site. For example, if most site visitors are coming to your site through a Facebook advertisement, then the page they land on should pick up the messaging and push them towards the conversion action set in that Facebook advertisement. We do not want to interrupt or divert their path, we want to extend it.

Analytics and site feedback from your users also give you big clues as to what content and activities resonate most with your audience. Optimize your site for those items. Your site needs to live, breathe, and adjust to the ever-changing needs and interests of your site visitors.

  • Kanopi Tip: Have a strategy for ongoing site maintenance to make it easy to continually optimize your site. Kanopi’s strong support team works with your organization to identify and implement optimizations. We are an extension of your team and are always there when you need us!
  • Kanopi Tip: Providing more relevant content might mean more targeted, expert content development for your site. Showcasing your expertise will lead to your audience seeing you as a trusted resource (and will help with your SEO for findability!)

Provide a Reason to Care

Your mission is important. But do your visitors realize how important it really is? Giving them a big fat “Donate” button in the header and expecting them to click it doesn’t acknowledge the whole picture. The button is only part of the work. Giving them ways to donate or join the conversation in spots they can always access helps, but you must provide this content in the context of a story. Your story. As passive visitors to a site, we want to be sold on why we should do something — not just told what to do.

  • Kanopi Tip: Compel your users to take action by involving them in your story. Don’t just tell them about your mission. Evoke emotion and connect with them. Promote pathways for conversions and donations in logical, progressive ways. Kanopi works to determine conversion points within the experience that make sense. For example, if you are talking about stories involving the individuals you help, share those individuals’ perspectives, images, or testimonials. Invite the user to engage with others or to share their story with you. This type of conversion can lead to donations, certainly. But more importantly it can lead to advocacy, inspiring your visitors to become advocates for your mission and spreading the word to others.

Don’t Trust Your Gut

While it is critical to humanize the experience, you do need those numbers to back up decisions as to what the humans on your site actually want and need. Making a subjective decision based on internal demands and objectives will only please the internal teams — not your users. Make your audience your focus during the web development process. Put benchmarks into place, and ask users for feedback. Getting information directly from your audience and their online behavior is the best way to be sure you address their needs within your site.

Make Interaction Easy

We mentioned the idea of “content in context” — integrating logical conversion points throughout your site experience in spots your users can always easily access, as well as within the context of your larger story. But we also need to optimize for a user’s environment. Mobile is now the dominant form of internet browsing. Our users are on the go. Don’t expect your audience to be settled in with a cup of coffee and a dedicated block of time to wander through your site on their desktop. Mobile is critical to the web development process.

  • Kanopi Tip: A responsive site should be thought of as “mobile-first”. At Kanopi, we strategize starting with the smallest screen sizes and work our way up from there. How do people interact with elements that you want to be omnipresent if they’re in a mobile context? Should the donation button, usually in the main header on desktop, be pinned to the bottom of the phone’s viewport for easy access? Should the phone number be more prominent on a mobile device?
  • Kanopi Tip: When designing for mobile, also think about the ergonomic position in which someone holds a phone — usually one handed, making their thumb the easiest way to navigate. Should that primary call to action go right next to where their thumb naturally lies for even easier access? And how big does it need to be to ensure an easy click target for touch?

Make Interaction Fast

Statistical data shows that the average page load time in the US for most sites is 5-7 seconds. Those same statistics show that abandonment rates take an exponential rise if your page takes longer than three seconds to load, and Google prefers that you have it under two seconds.

Given that in the US, ~71% of digital minutes spent are on mobile devices, and it’s ~62% in Canada, one thing is clear — speed matters in getting your message out. When it comes to web pages, bigger isn’t always better.

  • Kanopi Tip: Consider implementing Accelerated Mobile Pages (AMP) for your site. AMP is an open source project backed by Google that is focused on building a faster, simpler, and more performant web that is optimized for mobile devices. And As a bonus, you’ll get an SEO boost from the use of this approach.
  • Kanopi Tip: The biggest culprit in slow page load time on most pages is the number and file size of image assets. Kanopi recommends being very choosy in your use of imagery. Well designed vector imagery, use of color, and beautiful typography can have just as big a visual impact with a much smaller page footprint. And always leverage an image compression tool when you’re managing image files on your site.
  • Kanopi Tip: Only load what a user needs. At Kanopi, we take a progressively enhanced approach to web development. By starting mobile-first, we will load only the assets the mobile experience needs to render, keeping it as fast as possible. And we’ll add features and functionality as we scale. We are also not afraid to ask the hard questions — if a mobile user doesn’t need that feature… does anyone? Users leveraging external readers and “reading views” on web pages are becoming more and more prominent. They don’t want your eye candy. They want your content.

There is no “Build it and they will come.”

Building an audience-focused website with compelling stories will not cause an automagical spike in your site interactions or user donations. Understanding where your audience was before and after your site experience will give you a better understanding of how to market to them. Your site is one step in a multifaceted customer journey.

Where did their journey start? Were they at a third party platform that focuses on your subject matter? Can you partner with that platform to serve content about your organization?

Do they typically leave to visit a site rating your subject matter? Should you beef up your testimonials there to help them make a decision on interacting with you?

  • Kanopi Tip: Your site is one piece of your digital presence, and one piece of your audience’s user journey. Thinking of your site as the sole representation of your organization is not wise. People jump around and research with all the different resources available to them. Making conscious marketing choices can help make your presence, once they do land on your site, more valid, more recognizable and an authority for your cause.

Humanize the web development process!

Putting your users and their needs front and center helps both your audience and your organization and builds a relationship of trust and advocacy between them. It is the human element of our online experience that drives the numbers we use to justify our digital marketing activities to our stakeholders and makes the web development process more targeted and effective. If you try some of our tips, please contact us and let us know how they worked for you. And if you need assistance or have questions, reach out. We are always here for you.

About Kanopi

Kanopi is a women-run and family-owned business that is centered around beautiful design and strong architecture. Our data-driven approach fosters user-centricity and creates holistic web experiences based on user decisions. We believe that regular communication and support are the cornerstones of good development, and strive to give our clients a unique sense of ownership and investment in their work with Kanopi.

How to write a winning RFP

Posted on by will

Starting a new website project can feel overwhelming. Finding the right agency — one that truly understands your needs and can deliver effectively — is crucial. The best way to set yourself up for success? Ask the right questions from the start. But equally as important is providing as much clarity as possible in your Request for Proposal (RFP), ensuring that the responding agencies can offer accurate estimates and informed responses.

For large organizations with multiple decision-makers (we’re looking at you higher education and healthcare!) this process can be even more complex. Procurement requirements, departmental priorities, and differing opinions can make alignment challenging.

To simplify the process, we’ve created an RFP template to serve as a foundation for your next website project.

As you work through the template, consider the following so you can craft a final document that will end up with you having a new shiny website that suites your business needs:

  • Know your goals. Spend the time to work with your internal teams in advance of the RFP process to define (and align) your needs.
  • Think in terms of building a long-term relationship. A good partnership with your vendors is key and should be established from the beginning. Do you like them as people? Can you imagine being on hours of calls and going out to dinner together?
  • Don’t be adversarial or try to obscure your true needs. Being as transparent as possible will benefit everyone and allow vendors to provide you with stronger, more tailored responses.  
  • State your budget if you can, perhaps reserving some percentage for contingency. This allows everyone to understand what they are dealing with and can help save time and energy on all sides. 
  • Don’t be overly prescriptive. Good agencies are gifted at coming up with expert solutions to challenges that are stated in terms of problem statements or business objectives. Keeping an open mind will allow you to see (and compare) your prospective vendor’s recommendations and benefit from their expertise. 
  • Give yourself and your vendor enough time. Start the RFP process before your need is immediate to avoid extra pressure on both sides to meet an unnecessarily tight timeline. Allowing more time can also mean more considered and complete responses.
  • Talk to your potential vendors ahead of time. This allows you to establish the relationship and pre-select the ones you suspect will be a good fit. The right vendors can provide a lot of value early in the process, which may even help inform the scope or direction of the RFP.

And once you’ve written that RFP, it’s time to choose your vendor! We’ve also got advice on how to evaluate the RFP responses you receive.

Kanopi’s Allison Manley gave a presentation at the NTC Conference on how to write a winning RFP. Check out her presentation below to get more in-depth information.

A Decade of Data: UC Berkeley I School Case Study

Posted on by will

The Berkeley School of Information (UC Berkeley I School) contacted Kanopi Studios with a robust request: a redesign of their website, guidance on the modernization of development techniques, and a full migration of their site to the newest version of Drupal — which meant moving over 10 years of content.

This kind of request wasn’t unusual for us. Higher education clients are unique in that they are a lot of things to a lot of people. Audiences include academic peers, laypeople, current students, and prospective students. There are often competing goals and priorities, all of which need to be examined and addressed.

The answer to meeting the complex needs of higher education clients is always the same: start with research. With I School, our first stop was discovery. We had to figure out what we had to work with. That meant working closely with I School to determine content types, decide what information was still relevant, map the content to the new site, and gain clarity on the specific content that needed to be migrated during the development phase.

Then we set out our deliverables:

  • Drupal migration
  • Redesign
  • Training
  • Development pipeline
  • Responsive theming

We used a persona-driven design process that started and ended with the user. We asked the questions, “Who are we trying to attract?” and  “What do they want to see?” We blended the classic elements of UC Berkeley with a modern look and feel that would attract prospective students, while at the same time making sure the design would maintain the same high quality across a variety of platforms and devices.

In order to modernize the development practices used for I School’s site, we reorganized the way code and files were structured and refactored some of the custom modules so we could take advantage of newer tools in Drupal 7, such as the Database API, Panels, and various caching methods.

We also provided I School with a full platform for continuous software delivery, with automated deployments to the development site and scripted deployments across all environments. The bottom line? Less downtime and a more responsive site.

“It was a great pleasure to work with Kanopi on our website redesign project. We faced a daunting challenge migrating our highly customized site from one version of Drupal to another, while simultaneously moving to a completely new responsive visual design. The Kanopi team’s expertise and enthusiasm were critical to the success of our project. We couldn’t have done it without them!”

– Kevin Heard, Senior Director of Information Technology, UC Berkeley School of Information

As they say, the proof is in the pudding. In the weeks since the new site launched, measurable improvements are already being noticed by site administrators and, most importantly, by the users! Here’s a snapshot of the improvements:

  • Sessions increased by 4.29%
  • Users increased by 3.11%
  • Page views increased by 22.30%
  • Pages/session increased by 17.26%
  • Average session duration increased by 11.33%
  • Bounce rate decreased by 1.42%

From research to organization to design to modernization, our decisions were driven by data every step of the way. Contact us today to discover how we can transform your site and help you meet your goals.

Stop Designing Like the World is Flat: Introducing Component Driven Design

Posted on by grace

One of the hottest topics in Drupal circles this past year is the concept of Component Driven Design to streamline front-end development and theming. While atomic design principles are not new to the design community, the introduction of twig in D8 provides those of us designing for Drupal an interesting set of tools, like PatternLab and KSS-Node, to help continue our march towards a world that’s free of the flat PSD. Awesome, right? Well… now what?

I think to see the real value, and why the community is so excited about the integration of these tools into our design and development processes, you must go back to what makes up a website in the first place. Patterns.

Patterns are all around us, and that is particularly true when it comes to the building blocks (or components) that make up modern websites. To define a pattern, you simply need to look for a couple of things: 1) Can it be given a name? 2) Does it solve a problem? 3) Is it repeatable? And 4) Can it be combined to make other more complex patterns?

Caryn Eaton Presenting at ADUG- Introducing Component Driven Design
Caryn Eaton talking about Component Driven Design at ADUG

Let’s think about an image. While this may feel very granular, when you look more deeply, it becomes clear that it meets all the criteria one needs to define it as a pattern. Image is the name of an element that solves the problem of helping your users to visualize something. This could be a product or service, an event, or even a feeling you want to elicit when users visit your site. We reuse images throughout the site with variations, as well as combine it with other small patterns (for example headings, dates and paragraphs) to create this slightly larger pattern.

Managing all of these patterns is where tools like PatternLab and KSS-node come into play. They help to organize all of our newly declared patterns into logical buckets and build a living style guide to use code to communicate the visual language of a new website. As a designer who is also a coder, I can illustrate to our clients exactly how the team envisions these components working — not just how they will look. And yes, before you point it out, there are other tools designers use that do this effectively, but, as far as I have seen, they rarely provide production-ready code that can be leveraged directly by the CMS to jumpstart development. This is the real beauty of the twig-based relationship between D8 and PatternLab.

Now, as I hand off the designs to the remainder of the development team, there is little ambiguity yet greater flexibility to implement the remainder of the templates/pages throughout the site. By using a module, aptly named components, developers can reach over into PatternLab and import the code, classes, and styles associated with a specific pattern anywhere it is needed. This assures consistency, and even a modularity, which is something every developer strives for during the development process.

So, is the PSD dead? As much as I would love to say yes, I highly doubt it. Designers will always have a need to benchmark certain aspects of a project in static format to gain buy-in on direction. In-browser design is yet another tool in our ever-deepening toolbox to help gain efficiencies during build projects, allow us to meet project timelines, and better set client expectations, ultimately leading to happier clients and teams alike.

If you would like to learn more about how D8 and PatternLab could be implemented on your next website build, please do not hesitate to reach out to us here at Kanopi Studios.

View Caryn’s ADUG Presentation