What Is Interactive?

By Shabnam Gideon

interactive (adj.) allowing a two-way flow of information between a computer and a computer user; responding to a user's input

What Is Interactive Header

The goal of this post is to demystify the term “interactive” in the context of Focus Lab. Whether you’re a potential client, a subscriber to our digest, or just a curious surfer, this post is for you.

At its simplest in this context , “interactive” can be interpreted as an interface with which a user engages. But that goes only so far in telling what we do to create one.

When we say “interactive,” we’re including the activities and technologies required to create a digital experience with which end users can interact. As you can see, the term encompasses activities, technologies, types of digital experiences, a variety of users, and various means of interaction. Therefore, “interactive” is far more than just a single offering; it’s a suite of exercises and outcomes. It’s no wonder the term can be confusing! At Focus Lab, we specialize in marketing websites and web and mobile apps, and cover both informational and transactional forms of user experience.

It’s important also to differentiate interactive from branding. Branding is the multilayered process of creating a comprehensive brand experience, plus systematic guidelines for implementing and preserving it across a variety of mediums. Interactive is a process for creating a specific user experience and one vehicle through which a brand system can be expressed. Ideally, we have the benefit of a completed brand system in hand at the beginning of an interactive project so that we are both informed by the system and can preserve the integrity of it in our finished project.

interactive (adj.) interacting with a human user, often in a conversational way, to obtain data or commands and to give immediate results or updated information

Back to our suite of interactive services: to produce these projects, we can break that suite down into the service level offerings that are a part of almost all of our interactive projects:

  • Project Management
  • Content Strategy
  • User Experience
  • User Interface
  • Photo and Motion
  • Front-end Development
  • Backend Development

Project Management (PM)

We maintain that project management is no less important than any of the other, often more flashy, elements. In the same way we apply design principles to our UX work, so too do we apply design thinking to our project process and to our relationships with our clients. At a high level, PM is responsible for managing timeline, scope, tasks, and week-by-week updates and meetings. This role is the primary face of a project, keeping everything on schedule and shepherding its players and processes from start to finish.

Content Strategy (CS)

Sometimes lumped into the UX umbrella, content strategy is where we take brand elements like positioning, verbal identity, and messaging, and begin to marry them with business, messaging, and user experience goals. Content strategy considers how your site content is structured (information architecture), the story you need to tell (positioning, messaging, personas), the way in which you should tell the story (verbal identity, brand visuals, personas), how content will be structured (sitemaps, storytelling, wireframes),  how the content will be created (subject matter experts, copywriting), and how the content will be managed and maintained (data modeling, production and maintenance guidelines). Ultimately, CS leaves us with strategy to be adhered to throughout the remaining phases, and sets the foundation for the user’s experience.

User Experience (UX)

Intertwined with content strategy, user experience design looks at your users’ motivations, goals, and needs. We seek  to create ease for the user in locating the answers or information they’re looking for using visual constructs and models. Using the foundation laid by CS, UX seeks to understand how to assist each of your audience groups, and then map their expected and potential paths when visiting your site. Flow diagrams and user journey outlines are frequent outcomes of this process. At Focus Lab, UX also produces high fidelity wireframes, which are the visual culmination of page-level storytelling from CS and our understanding of the users’ journey and path to content acquisition. Put more simply, this is where we start to lay out pages structurally to accommodate the story through visuals and copy.

User Interface (UI)

User interface is the the phase where things start to get pretty, and you begin to get a sense of what your site will really look like. We always do a mood board, which is a sort of collage of images, colors, patterns, and other visuals and strategy pieces to confirm with you that we’re capturing the essence your site should convey. And then we start to apply brand elements to the wireframes in order to create complete page designs. At this point, we are already so aligned and focused from the CS and UX work, that UI tends to be pretty straightforward. This phase also uncovers specific requirements for supporting visuals, copy, or other content, which we can then begin to produce.

Photography and Motion

CS determined the “what” of the story you’re telling, UX and UI determined the “how,” and now it’s time to produce those various pieces of content. “Content” includes any material that communicates part of your story, so in addition to copy and other elements that may be created during design (illustration, iconography, patterns, etc.), photography and motion work are integral to the content of your site. Based on strategy and taking cues from the interface design, we can source stock material or create entirely custom photo, video, and other motion pieces as your content needs require.

Front-end Development

In the most non-technical terms possible, front-end developers takes your flat design files and write code that makes those designs display and work in a browser. If they didn’t, when someone looked at your design in a browser there would be no movement or animations, no hover styles, no link styles, no responsive views (when you look at it in a smaller viewport or on your phone), nothing; it would look and act just like the design file did. In slightly more technical terms, we write HTML (fundamental code for the web), CSS (code to style text and layout and create motion), and Javascript (code that adds interactivity) to make the page usable online. At the end of front-end development, you’ve got a workable static version of your site that you can view in a browser.

Backend Development

While front-end development makes your site look complete (presentation) when viewed in a browser, backend development is the piece that makes it really work (function). Backend dev can include a whole host of functions, technologies, and outcomes. But the primary thing to understand is that it has less to do with how your site is presented (that’s front-end) and everything to do with how it operates and makes use of various pieces of technology. It’s the backend developers who will set up your production server, build your CMS or your eCommerce system, architect a database and pull your data out of it, integrate with third-party apps using APIs, and many more behind-the-scenes operations.

Interactive is a process for creating a specific user experience and one vehicle through which a brand system can be expressed.

So! ALL of these comprise the suite of services we call “interactive” here at Focus Lab, and how we piece them together. Again, interactive is complementary to but differentiated from branding, and is key to our service as a full-service digital agency.

I hope this made what Focus Lab does in interactive easier to comprehend. If it hasn’t, let us know your questions, and we’ll be glad to answer.