Constructive Group Created with Sketch.

How Collaboration Makes us Better Designers

The concept of the solitary creative genius is a myth. When I first began as a designer, I felt like my designs had to be complete before I could show them to anyone. I think this vulnerability stems from a feeling that we as designers have to think through every element before we can call a design complete. As a result, it can be tempting to withdraw—to fully embrace the solitary designer stereotype—and assume the problems we’re facing are uniquely our own. But here’s the thing: usually another person on your team has dealt with similar challenges.

It can be nerve-wracking, vulnerable, and challenging at times, but getting out of our own heads and incorporating collaboration into our design processes can make us all better designers. Over the years, I’ve come to learn that designing collaboratively means putting your egos aside to make something that transcends the sum of its creators.

 

Here are six ways you can be more collaborative based on our process at Constructive:

 

1. Start a Conversation

I spend most of my days independently thinking through interaction concepts and visual executions with prototypes, wires, sketches (lots of sketches), and of course .jpgs, .pdfs and some .sketch files. When I get to a place where I feel comfortable that most chips have landed in approximately the right places, I usually first reach out to my fellow designers to get quick initial reactions, advice on how to elevate the work, and general tips on what’s working and what’s not. The computer can be the worst tool for problem-solving, so it’s critical to step away from your screen and talk through the work with another person to make sure your design intention is coming through and the system is intuitive enough for another person to use.


2. Embrace Internal Reviews

We always review internally before presenting designs to a client. This gives other designers on our team the chance to comment on the work. Talking through a design system with another person can be like a sieve for your own ideas. What’s working? What’s an outlier? What are ways we can extend the system? Usually after we talk through a problem, I get reassurance of how to go forward because I know how other people have interacted with the prototype. It’s easy to justify a system’s flaws in your head when you’re the only person who’s seen the design, so it’s critical to get a second or third or fifth opinion on design so we can make certain the system works and is helpful for everyone.

internal design collaboration review
Live shot from one of our internal reviews.

It’s also good practice to test your ideas in presentation mode before having a formal client presentation. What sort of language am I using to describe the design? Is it intuitive enough or do I have to explain my rational in order for someone to understand the intention? If the latter is true, it’s a good indication that I might need to work through the design to get it to a place where it can exist without me explaining how the user should interact with it.


3. Incorporate Prototype Testing

A prototype can be anything. It can be a piece of paper, an interactive InVision board, a card sorting sitemap, or a general experience that’s used to test how a typical user engages with a product. When I’m uncertain about an assumption I have about a design, it helps to do some informal user testing with the design team and other colleagues. Testing with members of your team is a good exercise for thinking through basic user experience patterns because everyone brings a unique understanding of web accessibility standards and how to improve usability. I did several rounds of user-testing on colleagues early on in the process of developing the UX for Air Quality Life Index before doing a round with target audience members to streamline controls and make sure there was a base understanding of how it functioned.


4. Schedule Weekly Design Huddles

We also have a weekly design huddles that allow us to get aligned on what everyone is working on and give us the chance to have a focused conversation on trends, processes, and inspiration. It’s important to come together as a group like this because it creates a forum for bringing up issues and opportunities that we’re experiencing as individual designers.

design team huddle
A Constructive design huddle in action!

 


5. Share Inspiration

Browsing the internet is primarily an individualized activity—unless of course you’re forcing everyone around you to watch videos of thirsty pets. We try to share and keep an organized record of all the things we see online that inspire us. We do this by using slack channels and Dropmark to categorize links to sites we like. This is an important practice because it makes browsing the internet a more collaborative activity. It allows us to understand each other’s reference points. And since we’re continuously learning from new experiences, it’s important to share what speaks to us in creative, professional or personal ways. It’s also a good way to gauge what your competitors are doing and what techniques or trends are shifting the industry to new and exciting places. By keeping an inspiration library, we can easily reference industry-specific sites in project strategic briefs. It also helps us align as a design practice through having a shared knowledge base about our creative inspiration and aspirations.

Screenshot of Dropmark - collaboration web service we use to organize sites we dig.
A screenshot of Dropmark – the web service we use to organize websites we dig.

6. Collaborate on Larger Projects

Larger projects demand even more collaboration between designers. Some of our recent team projects have been re-launching our own site and designing the Communication Network’s journal Change Agent. These projects have allowed us to put our egos aside and engage in meaningful conversations about what’s best for the overall project. It has been challenging to give constructive criticism on a colleague’s work, but when something is bothering one person, it’s usually bothering more too. Giving each other feedback forces us to have tough conversations about what we’re trying to convey with our designs and understand if something isn’t as inclusive or accessible as it could be.

Working toward one unified idea also allows us to learn collective processes and knowledge. I didn’t know that much about production work before redoing the Constructive site. So I racked my brains for several months figuring out how to optimize images for the web (see future insight). It was only when the other designers started helping with production that we learned from each other to create a process that worked based off all our shared knowledge. Methodology and process solidifies when they happen many times with different people over time.


Final Thoughts

Why am I telling you this? The obvious answer is that any team needs to collaborate to work successfully. That holds a nugget of truth, but the real answer goes much further. No matter your discipline—design, development, content, or strategy—I believe we get better each day as individuals by engaging in challenging conversations with each other. This in turn creates a much stronger, more powerful team.

So if you take anything from this, it’s that:

  • We all strive to create excellent work that conveys truth and value.
  • Our differences make us stronger together.
  • We’ll never recommend using Helvetica as your brand typeface. (Okay, we didn’t explicitly say that here but it’s still true!)

Incorporating Concept Boards into Our Design Process: What We’ve Learned

Designers often talk about “design intent”, or the overall visual structure of what we want to design based on our intentions at the beginning of the project. But communicating design intent to clients can sometimes be tough—it’s often abstract and relies on a few creative leaps to understand. This is especially true when partnering with clients who have varying degrees of experience with design teams. We realized that to more clearly communicate with clients, we’d have to build better methods of showcasing our visual and interactive ideas before jumping right into design comps, full layouts, or refined brand elements. That’s where concept boards come in.

Why We Started Using Concept Boards

We started using concept boards about a year ago as a way to clarify our thinking to clients. Each board is organized around a specific theme. Those themes relate to the strategic goals of the organization. For example, an organization may be trying to tell a story about health care in the developing world. The two concept boards may then be called Clean Initiatives, and Bright Future. The visual ideas on each board would be based on that two or three-word theme or title.

climate change concept boards

Doing it this way helps us to make some strong differentiating choices early on, so the client has a real sense of which visual direction they can go. It might be something clean and minimal, or something warm and lively. Those choices are ones we explore with our clients, using the concept boards as the focus of those discussions. We found that having two of them provided enough of a differentiator that clients could make some clear choices about which one felt ‘right’ for their digital brand. For larger brand initiatives, we might use more concept boards as a way to focus our client’s attention on a wider set of choices.

What We Learned

After using concept boards for the better part of a year, we’ve come to a few key conclusions.

First, it is critically important to explain how the concept board process will benefit clients.

As part of our initial conversations with a new client, we go over how the boards work and why we find them useful. Where necessary, we include them in our scope of work as a separate deliverable. When speaking with a client about our design process and methodology, we can pair these concept boards with finished products in case studies, to show how our approach works. For organizations that may have a tighter budget or time constraints, we pitch concept boards as a very effective way to communicate design without a longer investigative process.

Second, you need to dedicate time to selecting and editing images that relate to your client’s brand and area of expertise.

We start with quick investigations into interface and typography and pair them with images and other visual artifacts. Those elements, combined with the organization’s brand colors, logo, or key photos, can help tell a much more effective story. Essentially, what we show and what we don’t show can really make or break the conversation.

Third, how you deliver the concept boards matters.

Many of our clients are not in New York or would struggle to schedule office visits, so we need to do a lot of things virtually. Our first attempt at concept boards used large jpegs or PDFs that were difficult to view over screen share or on laptops. Those weren’t really effective. The format wasn’t one that a lot of clients were comfortable navigating, and the files got really large. For our subsequent attempts, we started to look at digital tools which could help facilitate that delivery. Pinterest was one we looked at briefly, mostly because of their in-browser sharing tools. We also looked at InVision Boards and decided to keep using it. Their tools worked with a lot of our other design workflows,  and features like public link sharing and commenting made the client communication bit much easier.

concept boards example

When reviewing concept boards in client meetings we found it helpful to do a few things to set up the conversation. First, we need to explain what concept boards are (and what they aren’t). We tell clients that these visual design conversations are directional, and not completed designs. Creating a false sense of a solution before we had actually started design would hurt us later on as we explored ideas in more detail.

Clients often like to mix and match elements they find in each concept board. That might mean those clear choices we defined early on got slightly muted. Ultimately, however, it means our clients get more involved early in the design process, and we get feedback on what is (and isn’t) going to work for their brand and their project.

education concept boards

 

To Conclude…

Concept boards clarify our design intent in a number of ways. Starting with client conversations to explain our process, we clarify concept boards as a design and communications tool. While creating the boards, we focus attention on our client’s needs and their overall brand goals by selecting appropriate images, patterns, and sample user interface concepts. When presenting the concept boards, we clearly explain how they’re used and what feedback we are looking for from the client.

Since everyone needs time to digest and think about these more visual presentations, we use InVision or other digital platforms to share the concept boards with the client. This way, they can look at them independently and speak privately with their team. Overall, concept boards are a very effective way for us to communicate our design intent, and we are very happy with the results!

Decoding the Website Design Process for Non-Designers

For many organizations working in the nonprofit or social change space, working with a design agency can be unfamiliar territory. To make matters worse, there’s a lot of jargon thrown around within design agencies that can be a barrier for clients who are unfamiliar with the design process.

As a project manager who made the switch from the nonprofit sector to Constructive, I sympathize with our clients who find the design world rather intimidating. That’s why I’m here, to break down the typical process for a website redesign and make it as approachable as possible!

There are two main phases of the website design process that non-designers should be aware of: information architecture and visual design.

Information Architecture

Once we’ve done our research and clearly defined a digital strategy for a client’s new website, we move into what is called the “information architecture” phase of a project. In layman’s terms, this simply means that we are working to organize a site’s content in a way that is user-friendly and aligns with the organization’s goals for engaging its audiences. During this phase, a designer or UX designer (user experience designer) will be working on two main deliverables: a sitemap and wireframes.

  • sitemap is a diagram that lays out a website’s structure and defines the relationships between content and various pages on the site. From a sitemap, you should be able to discern how a user would navigate through your site. For example, if you want to find where a news article “lives”, you’d follow the flow-chart like diagram from Home, to News & Events, and then arrive at your desired destination, a single news article. It provides you with a birds-eye view of your entire website and lays the foundation for what is to come next in the information architecture process. Here’s what they typically look like:

design process sitemap example

 

  • Building on the sitemap, wireframes dig a little deeper and flesh out how content and other elements will be organized on a page by page basis. At Constructive, we start with rough wireframes and incorporate more detail as we receive feedback from clients. You can think of wireframes as being like blueprints for a house一they show you how everything will be laid out, but leave out design details. For example, you’ll see black, white and grey boxes that suggest what content will display where, but you won’t see designed elements just yet (that will come in the next phase)! Before finalizing the wireframes, we’ll also make notes about functionality to remove any ambiguity about how certain features or elements will behave once translated from static comps to the dynamic site. Here’s an example:

design process wireframe example

Visual Design

During this phase, you’ll get to see all our ideas on how to improve content strategy and user experience come to life. A designer will be working on two main deliverables: a concept board and several iterations of a design comp.

  • Concept boards are a collection of visual elements that convey an overall look and feel to help define a clear direction before jumping into the design of individual pages. We’ll typically provide our clients with two design directions, and work with them to select a direction that feels most fitting for their audience. Here’s an idea of what you can expect:

design process concept board example

  • Once a direction has been confirmed, we’ll move into designing individual pages of the site, looking at things like color, type, and image treatment (these are called design comps). Designers might throw some unfamiliar words into the mix, so here’s a list of common elements that are found on most of the sites we work on:
    • Hero image: The image in the header of a page.
    • Hub page: A page that serves to organize related content. Hub pages are typically found in the navigation and contain unique content, but also group associated content. For instance, the “About Hub” might contain important information about an organization, and then link to a staff and careers page.
    • CTA: short for “call to action.” This could be a donate button, or newsletter sign-up.
    • Hamburger menu: a common menu style with three lines in a circle emulating a hamburger.
    • Kicker: small text above content that serves to reinforce what a user is looking at. For example, a site might display several kinds of research in a research archive, and a kicker would specify if it’s a report, article, book, etc.
    • Lorem ipsum: placeholder text used to fill design comps to emphasize design elements over content.
    • Hover state: the interaction when a user hovers over a button or linked text to indicate that clicking the element will take you off the current page.

To Conclude

Demystifying the web design process and defining some of the jargon can make the experience a lot more approachable and ultimately more collaborative. Once you cut through the unfamiliar territory and have an understanding of what to expect during a website redesign, you’re ready to confidently take on the exciting and important task of improving your organization’s digital presence.

Conquering the Content Entry Process

So, your organization decided to redesign its website to ensure  your digital presence more accurately represents the impactful work you do. Great! You’ve officially made it through the discovery phase, where new ideas were brought to the table and a cohesive strategy was developed to guide the website redesign. During the information architecture phase, you narrowed in on your site’s overall structure and gained a firm grasp on how users will navigate through your new site.

Everyone is excited to finally enter the design phase of the project, but to keep things on track, you can’t forget the importance of your new website’s content! It’s really easy (and very common) for our clients to overlook this step in the redesign process and assume that the content on their old site will fit seamlessly into the new one. In reality, developing the content and sourcing images for your new site can be quite the undertaking.

Don’t worry—there are some key steps you can take to make this process run more smoothly. We’ve developed a brief guide based on our experience that’ll help you manage a successful content development and image selection process:

Step #1: Establish a Plan

Developing an organized and thoughtful plan for tackling your site’s content needs is critical to ensuring a smooth experience overall. So start this step early! It’s best to begin organizing and writing website content as soon as your site’s information architecture (a website’s content blueprint) is finalized. That way, you can start drafting content for the different pages of your site in advance, using the wireframes as a guide, and finalizing content once the design has been fully fleshed out.

Organize your content:

  • Decide what content, if any, you will be carrying over from your old site. This might be less content than you initially expected一when the design of a site changes drastically, so too do the content needs. Once you’ve identified what will be carried over, determine what new content you’ll need to fill in the gaps. We recommend using a content matrix to identify and keep track of all the content you’ll need to enter into your content management system (CMS)一from headers to introduction text, body copy and even button text. A content matrix is basically just a fancy word for a spreadsheet that tracks and organizes the new content your site needs. And don’t worry, we put together a content matrix template that you can download here!

Organize your images:

  • Don’t forget about images一they’re content too! The image selection process can take time, and some images might need to be cropped and treated. You can use the wireframes to identify where on the site you’ll need images, and come up with a plan to source them. Does your organization have a big library of photos? Will you need to source new images? There are many resources for free photos online (for example, Unsplash) and purchasing stock images is also an option. Again, we recommend using an image matrix to stay organized. You can download our image matrix template here.

Pick your people.

  • You’ll need to determine who will be writing your content, who will be editing and reviewing your content, and who will be responsible for entering it into the CMS. Don’t underestimate the time it takes to develop engaging content and enter it into the CMS. Make sure you have plenty of people on the job!

Step #2: Start Executing

Once you have a solid plan laid out, it’s time to start actuallydeveloping, editing, and reviewing your content. Which, we know, can be a lot easier said than done. We recommend determining when your project is scheduled to begin Quality Assurance (QA)一the phase of the project when you’ll begin testing the site to get it ready for a successful launch一and then working backwards to create a content development schedule that hits this deadline.

Begin Writing

  • One of the most common reasons for delayed launches for our clients is that final content is not ready. Consider scheduling a weekly or bi-weekly meeting to assess how your content is developing and to stay on track.

Get Your Content Reviewed

  • Don’t let stakeholder review creep up on you! Make sure whoever at your organization needs to approve your website content has ample time to review and make changes. This is why we suggest picking your people in Step #1一if everyone’s up to speed on who’s doing what and why, the review process can run a lot smoother.

Step #3: Enter Your Content & Images

Congratulations! You finally have your content drafted, approved, and ready to be entered into your new site’s CMS. At Constructive, we provide our clients with a full CMS training to help orient their team to the backend of their new site, and instruct them on how to add their new copy and images. If you don’t have access to training, or still need some support, here are a few tips to keep in mind:

  • Use a text editor to strip content of formatting if you are copy/pasting from another source, such as your content matrix or a word document.
  • While most content management systems like WordPress allow you to crop images within them, we generally find it’s more effective to crop images using tools like Sketch or Photoshop first, and then uploading the images into the CMS.

Conclusion

The website redesign process can be an exciting, yet somewhat intimidating time for organizations一especially if they’ve forgotten to prioritize their new site’s content! But by starting early and coming up with an organized plan to tackle your site’s content needs, the big task of developing content and entering it into the CMS can be much less daunting!

Project Design 101: How to Avoid the Headaches

The Headache

You’re on a tight project deadline, when you receive feedback from your client. They like the design direction you’re going in, but believe if you “just change X,Y, and Z” the project will feel more complete. You’re already approaching design revision 2,999,999 and BAM—just like that you’re back at square one.

How to Design Strategies for Success

At Constructive, we’ve learned that the trick to avoid these design headaches is to set up strategies for success at the start of each project. While our clients are incredibly intelligent and capable in their given fields, design is often new and unfamiliar territory. In recognizing that the design process can feel daunting and subjective, we have developed a few strategies to help us lay a strong foundation for success.

1. Ask Questions

A great way to ensure a project fails is to come in with assumptions about what your client wants. Designers may be eager to dive into designing great work, but if you don’t understand the problem your client is trying to solve how can you design a solution? To avoid potential miscommunication and design errors, start by checking your assumptions at the door. Spend the first few meetings asking questions and conducting research on your client, the problem(s) they are trying to solve, and the questions that need to be answered. Designers who take more time to understand their clients’ needs will make more informed choices throughout the process. This will increase decision-making efficiency and build a strong sense of trust and mutual understanding with your client. During this stage of project design, here are some questions we try to answer:

Do we understand the big idea?

This helps us clarify the problem our client is trying to solve, as well as the goals they hope this project will accomplish.

  • Example Questions: What is the challenge that our client is trying to tackle? How does this problem relate to their overall mission? Why is this problem significant? What is the purpose of the project? Will this design project solve the problem? Who are our client’s audiences and what are their needs? How will the project help them?

How well do we know our client?

This helps develop a deeper understanding of who you are working with and what matters to them.

  • Example Questions: Who are they? What do they do? Why do they exist? What is their mission? What are their values? Is our client trying to retain their image, or reshape it? What are their short and long-term organizational goals? What are the backgrounds of the team members you will be working with? Has our client worked on design projects before? Does our client understand the design process?

What is our client’s competitor landscape?

Our goal here is to make our client stand out and be seen as a trusted and valuable source. By understanding our client’s competitor landscape, we are able to better differentiate and position them.

  • Example Questions: Who are our clients competitors? Who are our client’s partners? What platforms and modes of social communication does the competitor use to stand out? What does the competitor’s messaging and position look like? Who has the competitor collaborated with on their projects? What differentiates our client from the competitor?

2. Communicate Project Expectations

By documenting project goals, strategies for achieving them, and a plan of action, project teams and clients can create a shared understanding and point of reference for all subsequent choices. Establishing expectations provides the goalposts that everyone can work towards to determine if the project is successful, and it allows everyone to know their role in achieving that success.

Develop or Edit the Design Brief

Create a clear and concise project brief that outlines client problems, big ideas, objectives, goals, and competition. The questions asked in the research phase should allow designers, strategists, and other team members to develop a strategic brief that will guide all subsequent phases of the project and can be referenced by other team members to make decisions and justify choices. This brief should be communicated and discussed across all parties, agreed upon, and understood by your client and your design team.

Delegate Internal and External Team Roles

Within the design team or agency, make sure to establish roles, priorities, and goals for each member of the team. These roles should be communicated to your client, and your client should understand their role in the process as well. It sounds simple, but this step is often overlooked or assumed. By keeping your team’s tasks organized, you ensure that everyone knows who is responsible for what.

Create Realistic & Transparent Timelines

Set clear project deadlines and milestones from the start that allows room for flexibility and inevitable setbacks. Still, you should remain firm to the deadlines that require hard turnarounds or project development. Project managers should be responsible for reminding both clients and designers about approaching deadlines and deliverables.

3. Create a Roadmap for Collaborative Feedback

“Should we make this box red or blue?” is a conversation most designers try to avoid with their clients. Depending on what stage you are in the design process, designers often look to understand if a concept or design is resonating based on the strategic priorities of a project. When this type of feedback is needed, back and forth conversations on minute design details hinders the workflow and delays the process. To make the most of design feedback sessions, designers should help frame how their client reviews designs. In return, the client should trust their designer’s process to find the right solutions.

Educate Your Client on Your Designer Toolkit

Ask your client which design tools and programs they are currently familiar with, and any tools they are not. Educate your client (where appropriate) on the tools they will be expected to use and become more familiar with (e.g., Basecamp, InVision, Adobe InDesign, Google Docs).

Ensure that your clients are familiar with the design language that is relevant for critiquing design, but leave out any unnecessary design jargon from the conversation. Taking time to educate your client on the basics of design feedback and lingo will increase the fluency and ease of communication between designer and client.

Educate Your Client on Design Feedback

Take time to educate your client on your design process. We suggest presenting your client with a list of questions and expectations before meetings, as well as suggesting the types of feedback that will be helpful moving forward. While questions don’t have to be provided upfront, centering the conversation around how the design relates to strategy, communication, usability, etc. is essential to achieving actionable results.

Feedback sessions should feel more like a conversation than a lecture or show-and-tell. Designers should ask questions or prompt their client to give their opinion on layouts and design, and clients should feel free to ask questions of their own. The goal of a design feedback session is to identity what’s working, what’s not working, what can be improved upon or added, and what things remain unclear in relation to the project goals.

Concept Testing

In the beginning stages of the design process, establishing a solid visual direction is crucial. At this stage, the designer should start visual research and turn what they learned from earlier stages into visual assets and directions. In our design process, we often use mood boards to show our clients how these visual examples (e.g., color, type, concept) relate to their brand, messaging, problem, and solution. Creating a word bank or using your client’s language from their strategic brief in meetings is another great way to show your client that you are meeting and listening to their needs.

Your client should have an active voice in selecting a design direction for the project, but once your client picks a direction, the designer and project manager should hold their client accountable to their choice. Changing visual directions once the design assets are created delays the whole process—and increases the budget and scope of the project. To avoid this, budget enough time in your project to establish a solid visual direction that everyone is behind. If communication ever seems unclear, return back to the signed off agreements and briefs that prompted these decisions.

Summing Up

A successful project design starts at the beginning of the process. By knowing a few key strategies and tools upfront, both client and designer can focus on the greater task at hand – creating beautiful and effective work!

What Do Web Developers Actually Do?

Web Developers: You’ve heard of them. You’ve seen them in movies and tv shows.  You’ve probably even observed one while checking out at the grocery store. Perhaps you think of us as elusive, sunshine-starved individuals who keep the internet alive and overflowing with cat videos. While you’re not wrong, in reality, we’re actually pretty normal.  We’re not magicians or mad keyboard scientists; we just know how to tweak code.

A Quick History Lesson

A little more than 40 years ago, computer coding wasn’t an actual job; it was a skill you picked up as part of your career. In the early days of the modern computing revolution, a scientist might be required to learn how to code a program to complete their research tasks. It wasn’t the computer part that was important, but the task at hand that defined the job. I look at web development today in the same way. I’m in the business of creating solutions for an organization and their audience on the web. Coding is merely the means I use to accomplish the task.

Open Source Coding

Obviously, a lot has changed, and much of the “development revolution” has come from collective efforts of thousands of developers, working on open source projects through bug reports, suggestions, code pull requests and evangelism. Thanks to endless hours of hard work by developers across the globe, on softwares such as JavascriptNode.jsnpmwebpackgitWordPressDrupal (and countless other softwares), I am able to deploy code to a live website, through a controlled process, within seconds. From there, I’m working on top of what others have already figured out.

Community efforts almost always lead to exponential leaps in coding performance and reliability. Take the PHP language for instance—today it’s used to power a significant portion of the web, but it wasn’t always well-suited for enterprise solutions.  Then Facebook came along. It ran on PHP and worked around much of PHP’s flaws. Part of that focus brought about great change for PHP and further legitimized its reputation on the web. Much of the work was open source and available to the community.

We Come in All Shapes and Sizes

The term “web developer” is an umbrella term that describes professionals with very different backgrounds, who work on very different kinds of projects. Some web developers have experience in design, support, and other technical coding work, while others come from different professions completely. I have experience in IT support, sysadmin, and a bit of design.  Before that, I took a shot at a music career and wanted to be a comic book penciler in high school.

The polymath is the exactly the type of person that gets into web development and makes a living from it. And for that reason, I don’t think you’ll be surprised to discover there are many ways to be a web developer.

Frontend Some developers are experts in frontend development and style what you see on a website and how it works. Honing in on the right visual feel and experience is their bread and butter. This work takes a creative eye, and consequently, many frontend developers tend to have some sort of arts background.

Backend Developers that work on the backend like to handle data, connect the dots, and automate testing for bug free code, the latter of which clients and other developers depend upon. This skillset is easy for developers from other computing languages and sectors to pick up. These folks are the backbone of the web.

Site Builders Some developers are equal parts designer, dabbling in web technology and able to take a WordPress site from start to finish with out-of-the-box tools (and a little know-how when needed). Many freelancers fit this bill. They typically have varying levels of coding and scripting experience.

Sysadmins A “sysadmin” is a technologist experienced in different systems needed to host and serve web technologies.This skillset isn’t necessarily a standard focus for most web developers,  but it’s incredibly important in the web and internet as a whole when it comes to complex deployments.

Et al The above skills are the most commonly applied in web, and certainly not an exhaustive list. There are also those that cover testing, spoken language, compliance, data science and many others.

We Work Well With Others

Many people imagine web developers sit in rooms or cubicles by themselves, coding away in a vacuum. But in reality, most websites require considerable collaboration and a multi-disciplinary approach. As a website developer who works at a creative agency, I work closely with designers, project managers, and other developers. When I’m solving problems, I’m usually doing it with the help of these fine people.

Designers Here’s an oversimplified explanation of how we work together: The designers make designs and then hand them off to the developers. That’s how some teams do it, via a linear production line. While it may work for some, this method doesn’t make sense for a tight production team.  Instead, we share ideas. We think about the possibilities. We equally divvy up success and failure. Without Visual and UX Design, developers are missing key points of focus.

Project Managers I couldn’t do my job without talented project managers (PM). They keep me sane and schedule time for the many mishaps that come with web development. I’ve worked with the good and the bad, always making sure to let PMs know I appreciate what they do. I like to think of my PM as a good football coach that keeps all the teams within the team working together to win the day.

Other Developers Sharing code, helping another developer solve a tough problem, or simply offering kind words when it feels like there’s no end in sight — Developers helping other developers is what makes the fight worth fighting.

The Cat is Out of the Bag

Web development isn’t a mysterious or complicated profession.  The coding can be, but our ultimate goal is simple:  We work with the rest of our team to build a product that [hopefully] satisfies the client’s vision. Often times, it takes different types of developers to successfully see a project through, but we’re all working towards the same objective, just doing so from behind the computer screen.

Total Cost of Building A Website: Looking Beyond the Price Tag

My last article on this subject focused generally on website cost and technology, but from conversations with colleagues and clients, it’s become clear that there’s a need to shift the thinking around the total cost of technology. This article is the first of four where I’ll discuss which specific drivers impact cost.  In future articles, I will provide framework, tools, and processes to accompany this expanded view.

Total Cost: An Overview

We need to alter the way we think about the total cost of technology and what drives it. As I said at my 17NTC session on the same subject, the total cost of technology is comprised of financial, time & human capital, opportunity, and brand impact.  Let’s pick this statement apart and examine these aspects of total cost.

Financial

Money and budgets are what people generally refer to when they think  about the cost of technology. What are my capital expenditures here? What up front (financial) costs do I need to take on to get my project done, or to support initiatives? What will it cost to host and maintain my website?

Time and Human Capital

It’s not enough to think exclusively about a flat project expenditure. Instead, how many people (and for how long) does it take to get something done? How hard are the tasks? What’s the impact on the schedule? Do we have the right people to do this? What are we paying them? What work is being diverted or ignored by involving our staff in this project? Do we need outside help? Is the technology we’re using the right technology to support or hinder our people?

Opportunity

It’s important to keep in mind opportunity cost when planning the execution of your website. Is it worth expending the time and resources to develop a new website? What will we be giving up in order to do this? Will the outcome be worth the reallocation of assets, resources, and results? Content is a great example. Often times flashy website features, while exciting and enticing, don’t outweigh the cost of construction. (For a comprehensive explanation, check out this article by one of our web developers!)

Brand Impact

Successful execution vs. poor execution, both technically and organizationally, can impact your brand and its goals. It can make a difference whether or not people trust or mistrust your brand. Additionally, this has cost implications not only financially, but also in your ability to accomplish your mission effectively.

Drivers to Total Cost

Broadening the way you think about the total cost of technology, along with understanding what drives cost, will help you to better plan and advocate for your needs in order to accomplish your goals.

Open Source vs. Paid

While open source software is free, you can opt to pay for software services in the form of managed services, subscriptions, support and training. That being said, commercial products don’t always equate to higher quality or usability. As your needs evolve, you need to make sure the tech you choose evolves with you.

Think about what kind of development will be needed for an open source vs. a commercial proprietary platform. Proprietary systems require specialized skills and development costs can be higher because of this. What about customizations to a platform to ensure it meets your functional goals? Are they easily accomplished or will they become an entity requiring hacking around limitations? (Generally, hacks are not sustainable over time and cost more in the long run.)

Even when choosing open source over something commercial, there may be a difference in development costs based on the system. For example, Drupal development tends to be higher cost (in time & money) than WordPress because of the nature of its underlying CMS architecture. But don’t let that discourage you from choosing Drupal if it’s the right fit for your organization’s goals, especially if you have complex enterprise integrations or functional needs.

Lastly, while not an immediate cost, what if in the future you need to migrate infrastructure from one commercial platform to another or to an open source platform? Getting your data out of a proprietary system and migrated might not be an easy lift or even possible.

And if you feel overwhelmed reading this and you have no idea how to choose a platform, rest assured—we’ll discuss how to get answers and make decisions  in series 2-4!

Integrations

Integrations can be one of the most significant drivers of cost. What systems does your website need to integrate with?

Externally, not all systems’ interfaces (APIs) are created equally. This rings particularly true with CRM (Customer Relationship Management) systems. Zoho integration is not the same as Salesforce. They require different levels of effort to ensure they play nice with your website. Leaving your website and clicking out to an external CRM (a ‘Click Here to Donate’ button that brings you to an entirely new website) is “cheaper” from a budget, time, and effort perspective, but is it what you want experientially for your users? Are you choosing the right CRM for your organization’s needs? Is it overkill operationally? Financially?

Internally, you can think of integrations as the relationship between content within your website. How are you relating internal content and how do you surface those relationships? Is your site search simple or complex? Are related items to a piece of content manually curated, dynamically surfaced, or both? The lift in implementing these relationships and features can drive cost, especially if you choose a CMS that isn’t specifically friendly to complex relationships.

Timing

Timing can be a big driver to cost. Website launches that are tied to event-driven initiatives are a good example. Website redesigns demand significant attention from internal staff, do you have the organizational capacity and schedule availability to meet the event deadline? If you’re not planning with enough lead time, costs can and often escalate: late nights, premium costs for rush development from agencies etc. What happens if you miss the deadline? What does that cost you?

Hosting

Hosting a website might be obvious (it has to live somewhere!), but you need to understand the impact to cost. How “managed” is the hosting—are updates to servers handled by the hosting company or are you on the hook to do them? If you’re using internal IT, what kind of timing and costs are associated?

You also need to think about the costs outside the web server. What about network management, i.e database servers, backups, and maintenance? Are you using a Content Delivery Network, and if so, what are the bandwidth costs? Similarly, what about your website availability and failover needs? If you’re asking for high uptime, availability, and full disaster recovery capabilities, be prepared for the price tag to go up.

Operations

It’s not often thought of or budgeted for when planning your website, but there are operational costs once it’s up and running. Content needs to be produced and managed. Have you planned for that? What resources and what amount of time is going to be needed? Is it easy to manage your content or is the back-end of your website causing additional overhead and stress for staff?

The website also needs to be maintained from a technical perspective. Who’s going to do that? And what about the administrative overhead in coordinating your website operations?

Going Forward

There’s a lot to think about once you’ve expanded your view on the total cost of technology and what drives it. Thinking about total cost in this manner might give you a headache initially, but it will also give you a clearer sense of what you’re realistically getting into, where your gaps in knowledge around costs are, and help you be better prepared to advocate for more budget, time, and resources to accomplish your organization’s mission.

In part 2/4 of this series, I will build upon this thinking, providing a framework and tools for evaluating and estimating total cost, as well as a practical process for implementation.

Project Recap: Designing Transmedia Experiences for Change Agent

When The Communications Network contacted Constructive to design the most recent addition of its biannual print publication, Change Agent, we were flattered. We’re a proud member of ComNet and have always appreciated its ability to elevate important issues at the intersection of strategic communications and social change. The opportunity to help push thinking and connect readers to fresh ideas naturally appealed to us. That we’d be given creative license to redesign the issue from the ground up was icing on the cake.

All good design exercises begin with discovery, and our engagement with The Communications Network was no different. We discussed collaboration—the idea that even with both of our teams on the project being relatively small, a partnership built on trust would enable us to accomplish some truly ambitious goals. We discussed the concept behind Change Agent—that it’s not just a series of one-off publications, but something that’s continuously evolving. We discussed the content—deep, inspiring narratives from leaders across the field, stories that deserve telling and retelling so that audiences can apply vital insights to their own work. And of course, we discussed design—the notion that to be effective, design must be purposeful, and it must meet the audience where they are, in whatever medium they prefer.

We can’t emphasize the importance of this last point enough. According to a 2016 study by Nielsen, we now spend almost 11 hours consuming digital media each day. Tablets, smartphones, and PCs are leading this growth, with 63 percent, 60 percent, and 21 percent year over year increases, respectively. So, from the very start of this engagement, it was obvious to all that for Change Agent to be effective as a design solution, it had to honor its name and change significantly—from a printed artifact into a transmedia experience that reaches audiences wherever they are.

Putting printed matter online isn’t a particularly innovative idea. The problem thus far with conventional approaches is that they aren’t actually designed for the web. This may seem obvious, but we believe the implications are deeper than many may realize. Most attempts to bring print content online involve posting a low-resolution PDF on a website or embedding it in an online PDF viewer such as Issuu. While we may all get a kick out of those skeuomorphic page transitions, there are serious limitations to this approach—namely, that the content is still locked up in a PDF! That translates to a poor content consumption experience for smartphones and tablets, with none of the baseline benefits that web-native content offers, such as navigability, shareability, and analytics.

Figure 1: Average Time Spent per Adult per Day Based on the Total U.S. Population

Figure showing Average Time Spent per Adult per Day Based on the Total U.S. Population featured in the bi-annual Change Agent publication

Source: Nielsen Q1 2016 Audience Report, accessed 11.07.16 online at Adweek

 

Thus came our dilemma with designing Change Agent; authors contributed some amazing, engaging content, and it would have been a crime to lock it up in a PDF where no one would find it. The content deserved to be appealing, interactive, and accessible; it deserved to be print-native and web-native at the same time; it deserved to be transmedia.

The key to creating an effective transmedia experience is to start with a medium-agnostic, content-centric process. Rather than designing a print product and attempt to retrofit that to the web, or vice versa, we focused on developing a core design system, with type, colors, content structures, design patterns, and media that could be adapted to both print and web.

Of course, it’s impossible to create a universal design system that is 100 percent consistent across print and web; each medium offers different strengths and weaknesses. Print is suited to long-form narratives, with high-resolution media, sophisticated layouts, and a linear, horizontal reading experience. Digital products, on the other hand, lend themselves toward shorter, more digestible narratives; with interactive media, simpler layouts for smaller screens, and a non-linear, vertical reading experience. So creating a cohesive design across media required first drawing on our collective experience across each medium to establish the common core of a design system, and then leveraging each medium-specific design system to its fullest expression.

Figure 2 Transmedia Production Process

Figure showing the transmedia production process for Change Agent

 

In print, production is relatively straightforward; you design a document, print it, and distribute it. Online, production is far more challenging. To shorten our runway, we relied on Exposition™, a long-form publishing platform Constructive debuted in late 2016. Designed to support immersive, responsive experiences for long-form narratives, we felt this WordPress-based platform was ideally suited to meet the challenge of making Change Agent more accessible, engaging, and extensible.

To streamline the content development and population with our design systems, we devised a custom workflow integrating commonly available applications and processes. Google Apps served as our transmedia content management system: we used Spreadsheets to organize everything in a content matrix, Docs to collaborate and update various articles in real time, and Drive to share all of the media files. We then integrated these with the print application (Adobe InDesign) and web technology (Exposition / WordPress) in such a way that we could flow and reflow content dynamically—ensuring that print and web always matched. By integrating the content deployment in this way, our team could focus its attention where it added the greatest value: applying the core design to the print and digital systems and maximizing their native strengths.

We love working on projects that challenge us to innovate and not only design deliverables, but also design the processes that allow us to collaborate with multiple teams and work across mediums. Fortunately, ComNet trusted us enough to allow us to stretch our legs and run as far and as fast as we could. That, in turn, translated to a better outcome. We hope you agree that it shows.

Check out the digital version of Change Agent here to see the final result!

5 Things to Do Before Issuing an RFP: Advice From a Former Nonprofit Leader

In my former life (B.C., or “Before Constructive”), I ran a nonprofit in New Zealand that raised awareness and funds for cancer research. Like a lot of nonprofit leaders, I wore many hats and had a wide scope of responsibilities, including the organization’s communication strategy and a major overhaul of our website. I found the latter experience both fascinating and terrifying — and, believe me, the learning curve was steep. Despite my initial trepidation, however, I was gradually bewitched by the process — and the meeting of minds that was our partnership with the agency we eventually selected. It was magic: our mission and vision, their creativity and expertise, all of it leading to something that looked great and truly had the power to change lives.

On returning to the U.S., I made the leap to a brand strategy and design firm with the intention of participating in and experiencing that magic on a more frequent basis. These days, I’m often the first point of contact between Constructive and social sector organizations that reach out to us for assistance. I get to chat with many people like my former colleagues about their challenges and how we can help them better advance their missions.

With half a year under my belt here, I often find myself wishing I could do more to share the agency viewpoint with all the fantastic social change organizations out there. I daydream about time-traveling to tell my past self how to find an agency partner that would not only do a great job on my project, but also bring a perspective to the work that I didn’t know was missing and add value I didn’t know existed.

So, if you’re beginning a search for a branding or digital agency and are struggling to develop an effective RFP, here’s a little helpful guidance (I hope) from a former nonprofit leader who’s moved to the agency world and is deepening her understanding of both sides of the nonprofit-agency equation.

1. Clarify your goals (but don’t be prescriptive).

If you’re issuing an RFP for a website redesign or rebranding project, you’re already familiar with the pain points that brought you to this stage. Of course, the first thing you’ll want to do is to clarify the likely challenges and strategic goals for the project. But don’t get carried away!

As someone responsible for selecting a partner for an important project, it’s tempting to create an RFP that includes everything you might need in painstaking detail. If nothing else, you may tell yourself, it will make it easier to evaluate the proposals you receive in response to the RFP. But there’s a fine line between articulating your goals for a design/rebranding project and being prescriptive about how you expect to achieve those goals. And time you and your colleagues spend “designing” your ideal solution now is likely to be time, as the process unfolds, that’s not well spent.

According to business development expert Blair Enns, the vast amount of information easily accessible on the Internet has led to a dramatic rise in the number of organizations that approach agencies, of all kinds, with entrenched ideas about the solutions needed to solve their problems. And that often leads to unfortunate consequences. You don’t have to be a genius to appreciate Einstein’s observation that “it’s unlikely that [a] problem will be solved from within the context it was created.” While proactivity in a client is something every agency welcomes, it can be a problem when experts in a domain are not allowed to exercise that expertise. A good partner will be equally effective in combining the expertise of the client with its own unique expertise to create something greater than either could achieve on their own. And if there’s one thing agencies bring to the table that clients are unlikely to develop on their own, it’s an “outside” perspective and new thinking.

So, if you’re issuing an RFP, yes, absolutely, make sure you know what your goals for the engagement are. But before you spend valuable time adding painstaking detail to your RFP, remember that you want to leave room for good ideas that aren’t necessarily your own to flourish. Then go find a partner who is willing to ask challenging questions and can help shape, not simply implement your vision.

2. Know (and be willing to share) your budget.

Many social change organizations are hesitant to share their budget with potential design or branding partners. Believe me, I get it — I didn’t share my budget with firms that were looking to do business with us, and, at the time, I “had my reasons.” Despite the due diligence we had done, I wasn’t confident about what a design project “should” cost and was looking to firms to put a price on it. And, yes, I was also afraid that agencies in the hunt for our business would try to pull the wool over my eyes and raise their price to match the budget we had shared with them. But now that I’m on the other side, I see things differently.

Trying to estimate what your project “should” cost is time well-spent. Do you need a basic brochure website that can be built on SquareSpace, or do you have ambitious goals that require the skills of a partner with serious technical chops? How heavy is the lift? Unless you have carte blanche from your board and bottomless funds, establishing realistic budget expectations for a project is essential. And once those expectations have been established, you need to share them with potential partners.

I understand why people don’t like to discuss money up front. But open and honest conversations around budgets are critical if you hope to create a project plan that will achieve your goals. Budget is a design consideration, and good design firms should be able to work with you to prioritize and/or scale back features, identifying must-haves from nice-to-haves. Think of the design firm as a consultative partner advising you on how to get the biggest bang for your buck and offering a menu of options customized to your needs. If you refuse to share or discuss budget, you will be cheating yourself of the opportunity to have those kinds of conversations, and at the end of the day that’s lousy for everyone involved.

3. Have a realistic timeline.

Shifts in branding or digital strategy often are driven by changes in a strategic plan or other time-sensitive initiatives. And website redesigns have been a pain point for nonprofit leaders, well, forever. But in my experience, what often pushes an organization to commit to a website overhaul is something they see happening “down the road.” Unfortunately, the future almost always arrives much faster than you expect it to.

The majority of RFPs I see propose completion dates for projects based on egregiously optimistic “project kickoff” dates. Organizations habitually underestimate the time it takes to choose a partner and get started on a project: by the time key stakeholders have met with all the agencies under consideration, compared cost estimates, and come to a decision, they are already well into their timeline. Of course, this almost always creates panic and affects an organization’s ability to make smart decisions.

Given the strategic importance to an organization of branding and its website, you really don’t want to rush through the strategy, design, and implementation process. Because you’re investing valuable time and money, you want to do it right the first time, and cutting corners almost always will come back to haunt you. So do yourself a favor and avoid a lot of panic, stress, and regret by establishing a realistic timeline that includes a cushion for unforeseen contingencies.

4. Narrow the field.

After you’ve determined  your goals, requirements, and budget, it’s time to identify potential partners. Use Google and whatever tools you have at your disposal to find websites you like, and don’t be shy about reaching out to those organizations to ask who designed and built their site. Next, spend some time looking at various agencies’ work to determine whether it resonates with you, and check out rating resources like Clutch that speak with former clients and publish detailed agency ratings.

In my former life as a nonprofit leader, I tended to approach the RFP process in a “more the merrier” spirit. I mean, who knew, maybe a superstar firm would come out of the woodwork. But while it’s natural to want to have as many options as possible, studies have shown that having too many options can paralyze a decision-maker or group of decision-makers and can even lead to people making a decision that isn’t in their best interest. I experienced this firsthand and can say without hesitation that you are doing yourself, and the design firms you are thinking about working with, a disservice by not limiting your pool of candidates. Reading and assessing proposals submitted in response to a well-crafted RFP requires a significant amount of time — time that could be drastically reduced by engaging in candid conversations with potential partners that give you an opportunity to determine whether there is even the possibility of a good fit between the firm and your organization.

So once you’ve identified a handful of firms, reach out and try to meet or speak with them before issuing an RFP. Through these discussions, you should be able to narrow your list of potential partners to an exclusive, qualified few.

5. Decide whether you really need an RFP.

Lastly, before you issue an RFP, consider whether you really need to. Are you doing it because you’re bound to a procurement process? Is it because that’s how you think clients and agencies find one another? There’s increasing resistance out there to the RFP process from agencies and social change organizations alike who recognize it may not be the most efficient or effective way of identifying a partner.

Having been on both sides of the equation, I’m officially anti-RFP. (Stay tuned for a future rant…) Social organizations spend far too much time creating RFPs and feeling compelled to explain the entire background of the project and every lofty goal they hope to achieve. And, as I’ve noted, good agencies are likely to challenge your assumptions and want to dig deeper to develop their own understanding of the big picture. So is it really a good use of your time to develop a detailed list of needs and requirements, only to have your eventual partner put it aside?

Summing it up.

Regardless of your position vis-a-vis RFPs, be sure to focus on the quality of the conversations you have with potential design partners. Speak with them before you request a proposal — and after you receive it. Ask questions, invite questioning from the firms themselves, and try not to play your cards too close to your vest. After all, it’s the experts you end up working with and the process they bring with them that will determine the ultimate success of your project!

The Overlooked Value of Project Management

If you’ve never been a project manager, the world of project management may seem vague and maybe even unnecessary. Perhaps you think of project management as an endless stream of excel sheets and budget chatter. But in fact, project management is crucial to the success of a project and a good project manager can be the difference between a tumultuous project fraught with risk, and a project that runs like a well-oiled machine.

Let’s first break down what project management is and best practices of a qualified project manager. At its core, project management is really about risk mitigation. It’s about setting up a plan at the onset of a project for how it can run successfully, foreseeing any possible road blocks, and finding a way through or around them. Potential problems often arise in any complex project, be it a missed milestone that will impact the next phase of the timeline, a key stakeholder being unavailable for a crucial design review, or a minor request during the user experience phase that may impact technical requirements. Without a project manager’s careful eye every step of the way, these issues can easily derail the project’s timeline and budget and jeopardize its success.

Budget Watchdog

A good project manager constantly checks the health of a project and alerts the team when a maximum timeframe or budget allotted for each phase is nearing a close. Adept project managers will set up a detailed timeline at the onset of a project and will clearly outline the dependencies between milestones and risks associated with missing milestones. They will also make sure that the project is staffed appropriately, scheduling time for each strategist, designer, and developer to be available to work on the project when the time comes. Beyond availability, project managers need to carefully schedule team members with sufficient time to be onboarded to the project strategy, but not so much time that the budget becomes inflated. They are constantly balancing the demands of project success and project budget, ensuring both are met to a client and agency’s satisfaction.

Communicator Extraordinaire

In addition to tracking budget and timeline, successful project managers spend their time keeping clear lines of communication open throughout the project. Besides being the main point of contact, they are the glue that holds all information together and dispense it to the right people. In the case of a website project, distinct phases require different expertise and personnel, but the project manager is present at every step to communicate to the rest of the team. A digital goal or technical requirement may be mentioned at a kick-off meeting and the project manager will flag it and ensure the tech team is made aware. Perhaps a new template is introduced during user experience which will affect the design, it’s the project manager who ensures that adding this new template won’t affect the design timeline and budget. Without a proactive project manager, important communications can easily be overlooked, but first-rate PMs prevent any issues from falling through the cracks.

Choosing Wisely

Organizations should consider a firm’s approach to project management when choosing strategic and creative partners for an engagement. A lot can go wrong if a dedicated project manager isn’t present every step of the way to hold information, maintain timelines and perform budget health checks. Targets can be missed, key milestones may be sidestepped, and launch dates could be delayed. Without someone keeping a strong hold on budget, investment in the project can spiral unnecessarily. And most importantly, strategic goals can be forfeited.

Fearing such risks can naturally make a client wary to relinquish control of the process, but for a project to run smoothly, trust between a project manager and client is essential. Confidence must be built early on, and clients should feel they can comfortably pass the baton to a project manager whose process alleviates their concern and diminishes risks. When assessing potential partners, clients should seek agencies that emphasize the value of their approach to project management, in addition to their creative thinking and technical acumen—for each strength is essential to a successful project outcome.

Check
Copied to clipboard http://...