Customer Journey Mapping: Why It’s Essential for Product Design

By

The Ralph Waldo Emerson quote, “Life’s a journey, not a destination,” may be somewhat of a cliché, but it perfectly reflects the purpose behind customer journey mapping. Customer journey mapping (also known as customer experience mapping) is the strategic process of capturing and communicating complex customer interactions. User experience (UX) designers use it to illustrate the customer’s processes, needs, and perceptions across their interactions with our services, products, and organizations.

For example, when designing for Starbucks’ mobile ordering app, a journey mapping exercise would likely include a customer’s actions before they use the app, during their ordering experience, and after they’ve picked up their order and are headed back to the office. This UX design strategy is essential to understanding users and solving real design problems.

By focusing on a customer’s experiences throughout their journey with a product or service (e.g., clicks on a Facebook ad, signs up for a product mailing list, or Googles your company), rather than jumping ahead to the end solution (the present experience with the app or website), designers can deliver positive experiences and form a deeper understanding of their customers.

Customer journey mapping is an ongoing practice — a collaborative process that’s boundlessly more useful than a highly polished deliverable. Cross-functional teams who use it can include marketers, executives, engineers, customer support professionals, product owners, and more. By working together, they gain a shared understanding of how customers feel and think, and their relationship to the service. Engaging in a customer journey mapping session builds knowledge and consensus across the organization, and ultimately outlines the shared reality of customers’ experiences.

Customer Journey Mapping in Action: Case Study in Health Care

The key to understanding any customer journey is empathy. From anxieties and fears to joy and delight, the emotions tied to our products and services are what we’re looking to uncover. That’s how industrial designer Doug Dietz, the creator of the MR Adventure Discovery Series, was able to design a more successful MRI experience for children undergoing the scan.

Consider a typical MRI scanning experience, with its loud, strange noises, dark, confined tube, and cold, hard scanning bed. The apprehension, fear, and anxiety that patients, especially children, had surrounding this important medical ordeal was inhibiting results, requiring rescans and sometime sedation. By mapping the anxiety curve of the parent and child’s journey from home to the hospital, learning about their fears upon discovering a need for an MRI, and their reaction to the scanning room itself, Dietz learned why the machine experience had almost no chance of being pleasant.

From this newly realized understanding of what made the MRI a negative experience on their health-care journey, Dietz and his team were able to design a better solution. The outcome is a whole new sensory experience, a completely redesigned MRI room based on a pirate ship, submarine aquatic adventure, or outdoor camping trip complete with sights, sounds, and tasks all related to each adventure. A scary experience was turned into some children’s favorite part of the hospital.

Customer Journey Mapping at General Assembly

At General Assembly, students in our full-time User Experience Design Immersive course learn customer journey mapping as a way to validate their user research and apply a broader understanding of previously defined personas, another tool in the UX toolkit. In their class projects, both with real-world and fictional clients, students use the user data they collect to validate their team’s assumptions about a user’s journey and add new findings from their research. Students break the journey up into steps, indicating the touch points and emotions that users experience during those steps.

In addition to the user research, students sharpen their communication skills by running a team workshop that includes stakeholders from other disciplines, like marketers, developers, and customer support. Creating a customer journey map is a group activity and students learn the necessary skills to get non-design stakeholders, like project managers and executives, to participate in the process and arrive at a shared understanding of the customers. Students practice customer journey mapping in each of their team projects, so they can accurately identify a problem and uncover the needs of users.

Ask a Question About Our Marketing Programs

Meet Our Expert

Jared Rogers is a User Experience Design Immersive instructor at GA’s Austin campus. His extensive UX career centers on education, tech, and media industries with both agency and in-house design experience. Some of his notable clients include IBM, AT&T, Stanford University, and Meredith Corporation.

Jared Rogers, UX Design Immersive Instructor at General Assembly Austin

Using Service Design to Deliver Excellent User Experiences

By

A service, unlike a product, is intangible — you can’t hold it or touch it. Rather, it’s a series of intertwined, specifically orchestrated activities. Services unfold over time across steps and channels. Also unlike a product, both the production and consumption of a service happen simultaneously. The service is the interplay between the customer and service provider.

Service design is a practice that contributes to delivering a great user experience. In fact, the quality of the service is frequently what makes or breaks a person’s experience with an organization. Whether service design is being used to improve existing services or create new ones, it takes into account the needs of both the customer and the service provider.

Why Does Service Design Matter?

Service design is a big deal because we engage with services much more than we engage with specific products. We take public transportation, go out to lunch, manage our money, go to concerts, get medical help, pay our taxes, register our cars, and so forth. Certainly, there are tangible products and tools that we — and service providers — use in the process, but that’s only part of it. From the service design perspective, it’s that overall exchange we care about — and that exchange needs to work for all parties. We certainly notice when it doesn’t, and we, as customers, simply look elsewhere the minute it fails.

The more complex and interconnected our world gets, the more opportunities there are for service failure — making good service design more critical than ever. Service quality often suffers due to the complexity of linking systems together in a way that makes sense to both customers and service providers. Service designers must come to the rescue, and many designers who previously focused on designing digital interfaces are now turning their attention to services.

Where Service Design Intersects With UX and Product Design

Service design is becoming a high-profile skill in industries such as financial services, health care, social services, and beyond, popping up in ads for product design and user experience roles. However, it’s nothing particularly new. When talking about UX design, many people’s first inclination is to think about digital products. But UX design is as much about physical products and services as it is about digital services. It’s also about ensuring that an organization has the processes and skills in place to deliver on the promise.

Although they ultimately have a slightly different focus, at the highest level, the philosophy of service design and UX design is the same:

  • It’s holistic. It involves considering all channels and players involved, and understanding what happens before, during, and after any interactions.
  • It’s user-centered. It puts the experience of all of the people involved at the heart of every decision made.
  • It embodies design thinking. It uses the designers’ approach and methods to balance people’s needs (desirability) with what’s doable (feasibility) and what’s appropriate for the business (viability).
  • It’s increasingly the differentiator between companies. As a product or service becomes a commodity and the barriers for consumers moving between providers are lowered (think financial services or telecommunications), it’s the quality of the service and experience that determines whether people embrace your offering.

Designing Services = Designing Businesses

In a feature-rich, constantly-on world, thoughtful service design gives organizations a unique opportunity to distinguish themselves from their competitors. Businesses are now innovating and redefining themselves based on their service in several key ways:

  • Improving routine services, like renewing a driver’s license or getting a cell phone plan. In the case of a driver’s license (where there’s no competition), delivering better service is good for everyone. In the case of a telecommunications provider, it can be the difference between retaining or losing a customer.
  • Totally overhauling an experience, such as Disney’s introduction of its MagicBand to park visitors. The MagicBand wrist band facilitates payment, placing orders, making restaurant reservations, entering your hotel, finding the rest of your party, and even delivering greetings from Disney characters who know you by name. The technology is one thing — but it’s the people and processes that make this all happen.
  • Revolutionizing an industry, like the way Airbnb and Uber reimagined accommodation and ride services by upending who provides the services, how they are acquired, and the interchange between providers and customers.
  • Going from product to service, like how Square provides small-business loans to customers using its point-of-sale solution, or the aircraft jet engine manufacturer Rolls Royce offers support services based on the fact that it’s already collecting usage data.

How Do We Approach Service Design?

Service design requires big-picture thinking. This means not merely focusing on designing the particular products and tools used in the interchange between customers and service providers, but also understanding and optimizing how everything and everyone fits together — who does what, when and how they do it — to achieve a desired result. As service designers, we talk about the “line of visibility,” and study both the “onstage” activities (what the customer sees and hears) and the “backstage” activities (services, processes, and tools used behind the scenes), and we choreograph the interplay.

As illustrated in the figure below, when designing (or redesigning) a service, we take a top-down approach, starting by focusing on the desired experience, and from there considering the interactions, touchpoints, and procedures needed to create it. Armed with this knowledge, we are able to determine the best products and tools to use, and we design these to optimize the overall experience.

Service Design

To be successful, we must:

  • Have a clear understanding of the reason and demand for the service, and the ability of the provider to deliver.
  • Focus the design on customers’ needs, ensuring that the service will be valuable and efficient.
  • Treat “unusual” circumstances and typical situations as equally important in thinking out the requirements to accommodate them, as that’s when service often breaks down.
  • Design with input from users of the service, and collaboration with all relevant stakeholders providing the service.
  • Prototype the service before developing it in full.
  • Start with a minimum viable service (MVS), and use an iterative design process based on feedback and analysis to refine and add to the service.

Service Design at General Assembly

User experience design students at General Assembly learn to think holistically. UX is not merely user interface (UI) design; it’s about the before, during, and after use. UX design involves applying user-centered design techniques like research and low-fidelity prototyping to ensure that you’re solving the right problem before polishing the solution. When you learn about UX design at GA, whether it’s through our full-time Immersive program, part-time course on campus or online, or a short-form workshop or bootcamp, you learn to think about the overarching ecosystem you are designing for. Students train to recognize that people’s experiences are formed over time, based on interactions across individual and broad touchpoints. They also learn how our roadmaps allow us to focus in on figuring out how to get there from here.
Ask a Question About Our Design Programs

Meet Our Expert

Susan Wolfe, who teaches GA’s User Experience Design Immersive in San Francisco and Sydney, has practiced UX design, run consultancies, mentored project teams, and introduced UX design practices and cultures into organizations around the globe. She has established and managed in-house UX teams within software, hardware, and services companies in the Silicon Valley. In her work, she takes a holistic service design perspective and applies the most appropriate user-centered design thinking techniques to identify issues and ultimately create the optimal experience.

Susan Wolfe, UX Design Immersive Instructor at GA San Francisco and GA Sydney

Information Architecture: Organizing Information for Accessibility

By

Imagine you were dropped in a strange location without a proper map. The next step might not be obvious because, chances are, there isn’t a clear path. If this happened today, you would most likely pull out your phone to get directions from a mapping app. In our modern world, we are, more often than not, reliant on technology to do the heavy lifting of problem-solving.

Ever since Google made finding an answer only a few clicks away, it’s been easy to forget that in order for information to be accessible to us, it must first be organized in a way that makes sense. When information is sorted, organized, and labeled, it becomes a map. By definition, maps are diagrammatic representations of relationships between things. Whether physical or digital, good maps allow people to navigate efficiently and with clarity through any environment.

Information architecture (IA) is exactly what it sounds like: how information is structured, from the foundation to the footnotes. Richard Saul Wurman, the founder of modern IA, believed that how information was presented was oftentimes more important than the information itself. While the process of defining information structures isn’t confined to the digital spaces we inhabit, the fluid nature of the internet requires us to think deeper about how different “knowledge nodes” connect. Let’s break down why that is.

In the digital world, information can be structured (and stored) in many different ways, like spreadsheets, sitemaps, content schedules, and databases. In the context of user experience (UX) design, the deliverables designers use to communicate information is dependent on the context of use. Designers often use IA to illuminate what content or information is mission-critical, where it lives in the system, and how it’s connected.

For a simple company website, a designer might first build a site map to communicate (to the internal team and potentially to the client) and confirm what static pages are necessary, what the information hierarchy is for content, and what information lives in the different global elements (e.g., the top navigation versus the footer).

What Are the Components of Information Architecture?

Mental models are how people think about things. In the digital space, they are often based on representations of what exists in the real world (remember Skeuomorphic design?). Most of us have mental models that influence our process or way of thinking about something. In order for organizations and companies to be more effective in communicating value to their audience, it’s important to first understand the following about their users:

  • How their users think (process)
  • What they expect (mental model)
  • How it relates to other information (classification)
  • How they refer to specific things (taxonomy)
  • Where they are in a given environment (context)

These user mental models and behaviors can and should inform the design of a digital product or experience. Ultimately, information architecture is the map that allows the user to efficiently navigate between pages and places. Although “invisible” to most users, we see IA in the following:

  • Content strategy (How will content be managed and updated?)
  • Schema (How is this content organized?)
  • Navigation (Where is content located?)
  • Taxonomy (How is this content classified?)
  • Search (How are users searching for content?)

User Research and Information Architecture

By nature, people use systems differently. When it comes to IA, it’s critical that designers advocate for user research and testing as early in the design process as possible. Ideally, it’s the first step your team takes. Because information architecture lays the foundation for the look and feel of a product, it’s imperative that companies speak with their users to understand their preferences, terminology, and mental models.

Simple IA-focused exercises such as card sorting help designers and researchers learn how users organize topics and what language they use to refer to specific information. Rather than making expensive assumptions that may deter people from using a product or service, companies can work with users from the ground up to create a solution that aligns with their audience. For instance, when a company assumes that its users refer to a topic in a specific way, it might lose a lot of customers that don’t “see” that word because it doesn’t match their mental model. This often results in customers going elsewhere because they can’t find what they’re looking for — even when it’s right under their noses.

When considering how to begin structuring the information architecture, it is helpful to ask questions such as:

  • How do users navigate content on our site?
  • If our primary user has X as a goal, how do they go about completing this task?
  • How is important information being presented to our user?
  • What language or terminology do people use when referring to this process/service/product/thing?
  • What terms do people use to search for X?

What Good Information Architecture Looks Like

Designers often talk about “delight” when it comes to user experience: the little details that add something extra to a user’s experience. Ultimately, though, delight alone is not enough to make an interface or experience effective. While investing in funky animations and slick visuals can and does attract users, what most people need is a clear path to achieve their goal or complete a task.

Information architecture has made the internet a place where people can find literally anything. Given the size and scope of the web, this is a feat to be celebrated. Without metadata, there would be no indexing of relevant articles that help you search by topic. Without the design convention of consistent global navigation on websites, it would take a lot of hunting and pecking to find the information buried deep inside (imagine Wikipedia without a search bar). Without sitemaps, designers and developers might find that they’re talking about completely different structural schemas.

As you can see, IA is everywhere. Often invisible to the unpracticed eye, the effects of information architecture on our everyday experience are profound.

Information Architecture at General Assembly

Information architecture is a tool that all great UX designers practice, which is why it’s a core skill students learn at General Assembly. While visual design can be subjective to different tastes and perspectives, it’s difficult to argue with an information schema that supports user paths through the system. When an experience is aligned around the user’s mental model, it eases the friction people feel when we’re asked to learn something new.

Most people’s default mode is to decrease complexity. Asking users to learn on someone else’s terms makes the experience less engaging and ultimately more hostile to new or naive users. As an instructor for GA’s full-time UX Design Immersive course in Los Angeles, my goal is to empower designers to develop systems that are accessible, inclusive, and supportive of users. Clear information architecture is the first step in that direction.

Ask a Question About Our Design Programs

Meet Our Expert

Katharine Hargreaves is a UX strategist, educator, and facilitator working at the intersection of social impact design and education. She teaches the User Experience Design Immersive at GA’s Los Angeles campus. Katharine believes that human-centered design heals the world, and she’s dedicated to building tools and systems that empower people everywhere to be problem-solvers.

Katharine Hargreaves, User Experience Design Immersive, General Assembly Los Angeles

Using Affinity Mapping to Organize and Synthesize Initial Research

By

Every great design begins with great research. By using techniques like user interviews, contextual inquiry, and competitive analysis, user experience (UX) designers have the opportunity to learn about user pain points, motivations, and preferences in a very personal way. But tracking all of that data and finding patterns can be difficult, especially when trying to navigate a long text document or pages of handwritten notes. That’s why UX designers practice affinity mapping.

An affinity map, also known as an affinity diagram, gives designers a complete picture of their early research process. It is a physical, tactile, and editable design artifact that’s invaluable for showcasing trends, themes, and areas of opportunity for discovery and improvement. With just a few tools, you can create a visual representation of large amounts of data that will help to inform your future strategy. Using an affinity diagram template is great for any brainstorming session and can provide further insight into current pain points or future projections.

Tools for Creating an Affinity Map or Affinity Diagram

Creating an affinity map is easy. All you’ll need is some paper to write ideas, writing tools, and a surface to mix, match, and move your notes around to start your affinity mapping session. A few tools that will help you build these maps are:

  • Sticky notes: If you Googled “affinity map” right now, you’d find photos upon photos of sticky notes with designers clustered around them. These are the crux of your map. They’re the right size to write down bite-size pieces of research and ideation, and they’re easy to move around and group together to show research themes and related findings. You’ll go through more of these than you think, so stock up! Minis will be too compact to write on, so go for the standard size or slightly larger.
  • Markers: Pen and pencil can be too light to read, especially if you’re building a map with a team. Markers help make sure everyone can read all of the ideas when doing an infinity mapping session — whether they’re right next to the map or a few feet away.
  • A large, flat, writing surface: You’ll need a large enough area to post a bunch of different sticky-note thoughts, but also add additional observations that provide context to your research when going through the affinity mapping process. These could be themes you see emerging, questions you want to follow up on in additional research, or brainstorming ideas. Large dry-erase boards can work, but most designers I know prefer to stick up large-scale Post-its on the wall.

Step 1: Mapping Ideas on Your Sticky Notes

Your initial ideation and research can come from a lot of places: in-person interviews, observations you see of users interacting with a current product or service, internet searches, and surveys. All of this user data now needs a place to go. Enter the affinity map! Being able to separate data out into moveable blocks (like sticky notes) will allow you to get a better scope of the qualitative and quantitative data you’ve collected. The first step is to write out all your research findings on your trusty sticky notes. You can group together like information later, but for now you just need to get it out of your head or your notebook and into this new working space.

Things to jot down may include:

  • Statistics and other key facts: These could be from your own data collection, surveys, or secondary research. Chances are some of these numbers and research-backed facts will help to reinforce some of the more subjective observations you’ve collected from in-person interviews.
  • Personal observations or insights: What has jumped out at you as you’ve navigated your research? These “aha” moments could be the beginning of some deeper insights and point the way to future exploration. Add them in now and thank yourself later.
  • User quotes: User interviews give you tons of information — hooray! But the pieces of interviews that can actually be used to inform your future design are buried in bits and bobs of small talk, tangential stories, and relevant, but not crucial facts or observations. Don’t give up! Read through your notes as though you’re reading an essay or novel. If a sentence jumps out at you, that’s a green light to jot it down.

Step 2: Grouping and Categorizing Concepts for an Affinity Map

Now that you have a small mountain of sticky notes posted around you, get to grouping! Group user quotes that highlight similar issues or opportunities together. Statistics that all fall in the same area of research should go to together, too. As your groups start to solidify, annotate with a marker on your paper or whiteboard to begin to put notes in broader categories.

A few tips to help your organize your groups and categories:

  • Your first categories are probably not going to be your final categories. Don’t be afraid to move sticky notes around to areas where it doesn’t look like they belong; you may find a relationship between two disparate user issues that you wouldn’t have seen otherwise.
  • Take photos. Paper gets crumpled, and sometimes sticky notes flutter to the floor and are stepped on by an unsuspecting coworker. Document your process so that if you do have to put it back together at one point, you won’t be starting from Square One.
  • Ask for input. Once you feel good about the organization of your map, have another person (either from your team or someone else) take a look. Are they finding the same patterns you did? If they’re not, it might be an indicator that you’ve narrowed your research down too much. Always start broad before you focus too intently on one area. The design process is iterative, and your affinity map may be, as well.

Affinity Mapping at General Assembly

At GA, we encourage learning by doing. In our part- and full-time UX design courses, we introduce affinity mapping as a way to organize and synthesize initial research from user interviews. Students then use affinity mapping techniques to find patterns and key observations to guide the rest of their process.

As the course continues and research gets deeper, affinity maps become even more important as a way to keep track of data. By establishing the practice early on, students have a solid foundation in this skill and can move confidently forward. Happy mapping!

Ask a Question About Our Design Programs

Meet Our Expert

Rachel Wendte is a designer, content strategist, and marketer who teaches the User Experience Design Immersive course at GA’s Chicago campus. She is passionate about communicating design for connection, and uses her skills in client management, user research, and strategic thinking to craft meaningful solutions that are user-friendly and aligned with client goals. Before learning UX, she worked as an arts administrator and social media consultant.

Rachel Wendte, UX Design Immersive Instructor, General Assembly Chicago

Using JSON to Serialize Data to Share Between Applications Seamlessly

By

In JavaScript and other programming languages, we represent real-world entities as objects, or collections of key-value pairs. For example, in JavaScript, if we wanted to represent a student who has a name and a favorite color, we can use an object with two keys — name and favoriteColor — and two values associated with each key:

Json graphic 1

When we want to send these objects as data between two systems, such as a website and the server that runs it, we need a way to format these objects so that they can be read by the receiving server.

JavaScript Object Notation, or JSON, is a style of text notation that’s used to format and interchange structured data. JSON describes how to represent and arrange data sets so they can easily be written, transferred, and parsed by the receiver. JSON is easy for humans to read and write. It’s also easy for machines to programmatically dissect and generate.

Imagine that you signed up for a website with your email address and created a profile with your name and age. Your user profile would appear as a JSON object to the site’s back-end application, which is running on the server and receiving your form submission. This JSON format would allow the application to easily work with your data.

By looking at a document that’s structured using JSON, we can visually interpret data, noting the various relationships within the set, such as what is the parent or child of a certain node (object). In the following example, we can see what owns the “profile” and “account” data by looking at how the JSON document is structured:

Json graphic 2

Try writing your own JSON object and test its validity using a validator like this one!

Usability has made JSON one of the most popular means of serializing data. With it, data can easily be translated from objects into formats that can be stored (for example, in a file) or transmitted (for example, across a network). JSON can represent four primitive data types — string, number, Boolean, and null — as well as two structured types, object and array.

JSON is an open standard file format that can be used by anyone. However, whomever is reading and writing JSON must adhere to the standards laid out by the ECMAScript specification (JavaScript is based on ECMAScript as well). This standardization makes JSON a great choice when sending and receiving data between two systems, such as an API and a client, or a web server and a client.

A Brief History of JSON and Its Rise in Popularity

JSON is language independent, meaning that many programming languages besides JavaScript have the ability to create and parse JSON. In fact, its conventions and data structure format maps effortlessly to popular object-oriented languages such as JavaScript, Ruby, Java, and Python.

As a a result, JSON can be written in one programming environment and parsed, or read, in another. For example, we can look at the popular Twitter API and see that a tweet is represented using JSON. But, if we want to parse that JSON data — say we want to get a feed of the most recent tweets from a certain user — we can choose whatever programming language we want that can read the JSON format. Twitter itself provides many libraries for consuming its API, but you can also do so by writing your own program.

JSON was originally created in the early 2000s by computer programmer and entrepreneur Douglas Crockford and his team at State Software as a lightweight serialization alternative to XML (Extensible Markup Language). JSON.org launched in 2002 to describe the format, and Crockford specified the format officially in the RFC-4627 documentation in 2006.

Today, JSON usage and developer interest is on the rise while XML usage is declining. According to the online API news site and directory The Programmable Web, of the top 10 most popular web APIs, only one — the Amazon Product Advertising API — supports XML and not JSON. Many of the most popular web APIs support both, and several support only JSON: the Facebook Graph API, Google Maps API, Twitter API, AccuWeather API, Pinterest API, Reddit API, and Foursquare API.

How JSON is Used

JSON is built on two data structures:

  • A collection of key-value pairs. In JavaScript, this is called an object. In Ruby, this is commonly called a Hash. Other names that refer to this same idea are dictionary, keyed list, and associative array. An example of a key-value pair is a dictionary: To use it, we look up the word (key) and read the definition (value).
  • A list of values. In most languages, this is realized as an array, vector, list, or sequence. An example of a list of values is the different colors of crayons in a box.

When JSON is combined with the AJAX (Asynchronous JavaScript and XML) web development technique, a web browser is able to send and receive data without needing to refresh the web page. Think about submitting a form to update user information on a website: After the user hits the “submit” button, their details are packaged into the JSON format and sent from the client (web browser) to the server. The server can respond with another piece of JSON data, which the web browser can then parse to show feedback to the user. This popular combination of technologies allows for a seamless user experience.

JSON at General Assembly

At General Assembly, students learn various skills that rely on the JSON format. Within the full-time Web Development Immersive course, aspiring developers create web APIs that use JSON to communicate back and forth between a client and a server. In our part-time JavaScript Development course and self-paced online JavaScript offering, students learn how to work with JSON within the object-oriented programming language. Additionally, in our full-time Data Science Immersive and part-time Data Science course, students write application code in Python, which has the ability to parse and generate data using the JSON format.

Meet Our Expert

Danny Kirschner is a lead instructor for General Assembly’s Web Development Immersive course in Providence, where he teaches students how to be job-ready full-stack developers. Danny has been writing web apps using Ruby on Rails and JavaScript for more than eight years. When he’s not coding, he enjoys cooking vegetarian food and biking around Rhode Island.

Danny Kirschner, Web Development Immersive Instructor, General Assembly Providence

DOM Manipulation: Changing Your Website in Response To User Actions

By

Looking to create a button to change a web page’s background color, build a form that will allow users to add a comment directly to your page, or remove content when a user clicks an “X” button? You’ll need to know how to manipulate the Document Object Model, or DOM, to do all of these things.

The DOM is the structure a web browser generates from an HTML file. The browser reads the HTML file and generates a version of the elements that is formatted for your JavaScript code to communicate with. We need this “translated” version of the HTML so that we can use JavaScript to talk to the elements on the page. If JavaScript could not talk to the DOM, we wouldn’t be able to use JavaScript to change the appearance of the page.

You can picture the DOM as a kind of hanging mobile sculpture, where each node of the mobile is a different HTML element. You could also imagine it as a family tree, where the “root” is the parent of all the other elements in the tree. That means that the largest containing element, <html>, contains all the other elements in the tree. Here’s an example:

DOMManipulation

Here’s what the above HTML looks like as a DOM tree:

DOMManipulation

We frequently use family terminology in referencing parts of the DOM. In the above example, the <html> tag is the parent of the <head> and the <body> and the ancestor of all of the other elements. The <li> elements are the children of the <ul> element. Similarly, the <li>s are sibling elements.

The HTML file itself provides a good way to visualize the Document Object Model, because it’s the file that helps the browser create it. When you indent each subsequent “layer” of HTML, you give yourself a good visual of the nesting of the DOM. Remember, the DOM is created by the browser when it reads your HTML. Your HTML document is the template which creates the DOM.

When building a website, you might want to build functionality for the DOM to change in response to a user action. Every web framework — from Angular, to React, to jQuery — provides some way to adjust the DOM. The best ways to first encounter DOM manipulation are to use plain JavaScript or, even better, use jQuery.

In each, you must first tell the JavaScript how to find the element on the page (we call this selecting the element) and then manipulate it.

How No-Frills JavaScript Interacts With the DOM

In JavaScript, there are separate methods for selecting elements by element type, class, and id. Below are the plain JavaScript methods for selecting elements.

DOMManipulation

Once you’ve selected the element, you can use a number of methods to change or add to it. For example, if you’d like to add some content to the page, you can append HTML using the .appendChild(element) method, like this:

DOMManipulation

You can append a new child HTML element to any part of your page by first selecting the element you want to be a new parent:

DOMManipulation

If you want to append an HTML element with content inside it, you’ll create a text node using the .createTextNode() function like this:

DOMManipulation

You can see that something as simple as adding a div with some text is already getting quite complex. This is where jQuery comes in to simplify our DOM manipulation.

Simplifying DOM Manipulation With jQuery

jQuery is a JavaScript library that provides tools to make life simpler for web developers. Behind the scenes, the jQuery source code is written in JavaScript. That means that anything we do in jQuery could be accomplished in JavaScript with more code. jQuery is designed to simplify DOM manipulation, and its syntax is easier to grasp. It uses CSS-style selectors to pick DOM elements (elements from the HTML). That is, you can select an element by using its tag, class, or id. For example:

$(‘span’) will select all of the span elements,

$(‘.container’) will select all of the elements with a class of container, and

$(‘#hero-image’) will select the element with the id of “hero-image”.

Because CSS selectors can get complex, you can select very specific elements on your page.

Once you have selected a DOM element, you can change it at will using a large array of jQuery manipulation methods.

Here is an example of using jQuery to manipulate some HTML.

The HTML:

DOMManipulation

DOM’s JavaScript component:

DOMManipulation

The above code will change all of the paragraph elements on the page to have a value of “Boo!”. Go to a webpage with jQuery loaded on it, like css-tricks.com, open the console with `command` + `option` + `j`, and paste that code into the prompt. When you execute that code, you’ll notice all of the paragraphs will have changed to say “Boo!”

As you’re working with jQuery to manipulate DOM elements, you are almost always either getting or setting a value. If you want to find out the current value of some attribute, you are getting. If you want to change the value, you should be setting. This is the pattern:

  • Getting a value: $(“CSS Selector”).someJqueryMethodName()
  • Settings a value: $(“CSS Selector”).someJqueryMethodName(valueToSet)

Notice that getting a value doesn’t require an argument to the jQuery method, but setting a value does.

Following that pattern, we could get the value of the text of an element on the page:

  • Get the text of the readme (it lives inside of an article tag): $(‘p’).text()
  • Set the text of the readme to: “Boo!”: $(‘p’).text(“Boo!”)

Some jQuery methods require an argument in either case. For example, the .css() jQuery method works as follows:

  • Get the background color: $(‘p’).css(“background-color”)
  • Set the background color to blue: $(‘p’).css(“background-color”, “orange”)

Some of the most common jQuery DOM manipulations are:

You can use these manipulation methods, along with event listeners, to change your page in response to user actions.

  • Append HTML content as a child of the current selected element: $(‘.selected-element’).append(htmlContent)
  • Add/remove a new class to/from the selected element: $(‘.selected-element’).addClass(className) / .removeClass(className)
  • Replace all of the current HTML content within the selected element with the inputted htmlContent: $(‘.selected-element’).html(htmlContent)
  • Replace the current text content of the selected element with new text: $(‘.selected-element’).text(newTextString)
  • Change the value within an input element: $(‘.selected-input-element’).val(newValue)
  • Remove the selected element from the page: $(‘.selected-element’).remove()

You can use these manipulation methods, along with event listeners, to change your page in response to user actions.

DOM at General Assembly

In General Assembly’s full-time Web Development Immersive and part-time Front-End Web Development courses, students learn DOM by visiting jQuery-enabled websites like CSS-Tricks and using the console to alter the pages in front of them. Changing all of the titles to some goofy text gives students a sample of the power of this tool.

Students also dive into and read the jQuery documentation to find out about the most useful DOM manipulation methods. We make sure to emphasize .append, .addClass, .html, .text, and .val. Then, we introduce DOM events so that students’ sites can detect clicks, form submissions, scrolling, and keypresses. Much of the time, our response to these events is to manipulate the DOM accordingly. When a user presses a button, it can change the appearance of the web page. We do this by listening for the button press and then manipulating the DOM to impact the page.

Ask a Question About Our Coding Programs

Meet Our Expert

Cory Fauver is a Web Development Immersive instructor and former Front-End Web Development instructor at General Assembly’s San Francisco campus. He left his early career in math education to teach himself web development while building a company with two close college friends. While their product didn’t work out, they left that experience with skills that they’re all using today. Cory enjoys sharing the methods and resources he used to learn HTML, CSS, and JavaScript. When he’s not at a computer, he loves playing ultimate frisbee, backpacking, and being outdoors.

Cory Fauver, Web Development Immersive Instructor, GA San Francisco

Excel: Building the Foundation for Understanding Data Analytics

By

If learning data analytics is like trying to ride a bike, then learning Excel is like having a good set of training wheels. Although some people may want to jump right ahead without them, they’ll end up with fewer bruises and a smoother journey if they begin practicing with them on. Indeed, Excel provides an excellent foundation for understanding data analytics.

What exactly is data analytics? It’s more than just simply “crunching numbers,” for one. Data analytics is the art of analyzing and communicating insights from data in order to influence decision-making.

In the age of increasingly sophisticated analytical tools like Python and R, some seasoned analytics professionals may scoff at Excel, which was first released by Microsoft in 1987, as nothing more than petty spreadsheet software. Unfortunately, most people only touch the tip of the iceberg when it comes to fully leveraging this ubiquitous program’s power as a stepping stone into analytics.

Using Excel for Data Analysis: Management, Cleaning, Aggregation, and More

I refer to Excel as the gateway into analytics. Once you’ve learned the platform inside and out, throughout your data analytics journey you’ll continually say to yourself, “I used to do this in Excel. How do I do it in X or Y?” In today’s digital age, it may seem like there are new analytical tools and software packages coming out every day. As a result, many roles in data analytics today require an understanding of how to leverage and continuously learn multiple tools and packages across various platforms. Thankfully, learning Excel and its fundamentals will provide a strong bedrock of knowledge that you’ll find yourself frequently referring back to when learning newer, more sophisticated programs.

Excel is a robust tool that provides foundational knowledge for performing tasks such as:

  • Database management. Understanding the architecture of any data set is one of first steps of the data analytics workflow. In Excel, each worksheet can be thought of as a table in a database. Each row in a worksheet can then be considered a record while each column can be considered an attribute. As you continue to work with multiple worksheets and tables in Excel, you’ll learn that functions such as “VLOOKUP” and “INDEXMATCH” are similar to the “JOIN” clauses seen in SQL.
  • Data cleaning. Cleaning data is often one of the most crucial and time-intensive components of the data analytics workflow. Excel can be used to clean a data set using various string functions such as “TRIM”, “MID”, or “SUBSTITUTE”. Many of these functions cut across various programs and will look familiar when you learn similar functions in SQL and Tableau.
  • Data aggregation. Once the data’s been cleaned, you’ll need to summarize and compile it. Excel’s aggregation functions such as “COUNT”, “SUM”, “MIN”, or “MAX” can be used to summarize the data. Furthermore, Excel’s Pivot Tables can be leveraged to aggregate and filter data quickly and efficiently. As you continue to manipulate and aggregate data, you’ll begin to understand the underlying SQL queries behind each Pivot Table.
  • Statistics. Descriptive statistics and inferential statistics can be applied through Excel’s functions and add-ons to better understand our data. Descriptive statistics such as the “AVERAGE”, “MEDIAN”, or “STDEV” functions tell us about the central tendency and variability of our data. Additionally, inferential statistics such as correlation and regression can help to identify meaningful patterns in the data which can be further analyzed to make predictions and forecasts.
  • Dashboarding and visualization. One of the final steps of the data analytics workflow involves telling a story with your data. The combination of Excel’s Pivot Tables, Pivot Charts, and slicers offer the underlying tools and flexibility to construct dynamic dashboards with visualizations to convey your story to your audience. As you build dashboards in Excel, you’ll begin to uncover how the Pivot Table fields in Excel are the common denominator in almost any visualization software and are no different than the “Shelfs” used in Tableau to create visualizations.

If you want to jump into Excel but don’t have a data set to work with, why not analyze your own personal data? You could leverage Excel to keep track of your monthly budget and create a dashboard to see what your spending trends look like over time. Or if you have a fitness tracker, you could export the data from the device and create a dashboard to show your progress over time and identify any trends or areas for improvement. The best way to jump into Excel is to use data that’s personal and relevant — so your own health or finances can be a great start.

Excel at General Assembly

In GA’s part-time Data Analytics course and online Data Analysis course, Excel is the starting point for leveraging other analytical tools such as SQL and Tableau. Throughout the course, you’ll continually have “data déjà vu” as you tell yourself, “Oh this looks familiar.” Students will understand why Excel is considered a jack-of-all-trades by providing a great foundation in database management, statistics, and dashboard creation. However, as the saying goes, “A jack-of-all-trades is a master of none.” As such, students will also recognize the limitations of Excel and the point at which tools like SQL and Tableau offer greater functionality.

At GA, we use Excel to clean and analyze data from sources like the U.S. Census and Airbnb to formulate data-driven business decisions. During final capstone projects, students are encouraged to use data from their own line of work to leverage the skills they’ve learned. We partner with students to ensure that they are able to connect the dots along the way and “excel” in their data analytics journey.

Having a foundation in Excel will also benefit students in GA’s full-time Data Science Immersive program as they learn to leverage Python, machine learning, visualizations, and beyond, and those in our part-time Data Science course, who learn skills like statistics, data modeling, and natural language processing. GA also offers day-long Excel bootcamps across our campuses, during which students learn how to simplify complex tasks including math functions, data organization, formatting, and more.

Ask a Question About Our Data Programs

Meet Our Expert

Mathu A. Kumarasamy is a self-proclaimed analytics evangelist and aspiring data scientist. A believer in the saying that “data is the new oil,” Mathu leverages analytics to find, extract, refine, and distribute data in order to help clients make confident, evidence-based decisions. He is especially passionate about leveraging data analytics, technology, and insights from the field of behavioral economics to help establish a culture of evidence-based, value-driven health care in the United States. Mathu enjoys converting others into analytics geeks while teaching General Assembly’s part-time Data Analytics course in Atlanta.

Mathu A. Kumarasamy, Data Analytics Instructor, GA Atlanta

JavaScript for Web Development: Building an Interactive Website

By

JavaScript is essential to nearly every action you take online, whether it’s entering credit card information, streaming videos and music, or interacting on social networks, just for starters. It’s the programming language used to make webpages interactive — and it’s perhaps the most widely used language because of it.

Developers use JavaScript to create a wide range of features, from simple user interface (UI) functionality to complex visual effects, including:

  • Interfaces like image carousels.
  • News feeds that continue to load new information as you scroll through them.
  • The ability to submit information entered into a Google Doc, survey form, or online payment system.

Features like these are part of a website’s front-end code, which is responsible for what users see and interact with. Front-end JavaScript code runs in a user’s browser, where it’s integrated with the HTML code that makes up a page’s structure and the CSS code that specifies how each of the page’s elements should be displayed.

But not all JavaScript is written for the front end. Developers can also use it for a website’s back end, which is executed on servers, or specialized computers that run websites behind the scenes.

JavaScript allows developers to perform many basic tasks common to a wide variety of programming languages. For instance, conditional logic allows a developer to specify that a section of code should be executed only if a certain condition is met. Imagine you were creating a webpage that accessed weather information for the user’s current location, and then displayed an icon representing the current temperature. You might use a conditional statement to specify that if the temperature is below freezing, the screen should display an image of an icicle.

Conditional Statement

JavaScript developers can organize their code a couple different ways. One approach, known as functional programming, organizes code into functions, which are sets of JavaScript statements that take values as input and return results. Another technique, known as object-oriented programming, groups values and code together into collections known as objects.

A basic familiarity with JavaScript gives you a strong foundation for building applications with popular frameworks such as React, Angular, and Vue, and libraries like jQuery. Frameworks and libraries are pre-written collections of JavaScript code that make it easier for you to build your own applications. While using a framework or a library can allow you to program without needing to write the code for some tasks yourself, a foundation in JavaScript coding without frameworks or libraries — known as vanilla JavaScript — can be a great asset in customizing your apps and debugging them when things aren’t working exactly as you expect.

JavaScript at General Assembly

At General Assembly, JavaScript is a core part of all of our web development courses. It’s one of the central technologies covered in our full-time Web Development Immersive and Web Development Immersive Remote programs, in which students prepare for a career in full-stack web development. You can focus exclusively on the language in our part-time JavaScript Development course (also available online), or get a basic introduction to how JavaScript fits with HTML and CSS in our part-time Front-End Web Development course.

GA instructors help students build JavaScript skills step by step, sharing knowledge and best practices they’ve accumulated as developers in the field. In addition to in-class exercises and homework, students also apply their new knowledge by building projects that make use of all the tools they’ve learned. Students leave with portfolio-worthy projects that demonstrate their new skills, as well as next steps for building apps with JavaScript and learning more about the language.

Ask a Question About Our Coding Programs

Meet Our Expert

Sasha Vodnik is a front-end web developer and author who teaches Front-End Web Development and JavaScript Development at General Assembly’s San Francisco campus. He also writes books on HTML, CSS, and JavaScript and creates video courses through LinkedIn Learning.

“I aim to help students recognize what they already know and connect it to what they’re trying to do. At GA, we teach how to troubleshoot and find answers so you can grow as a developer long after you leave the classroom.”

– Sasha Vodnik, JavaScript Development Instructor, General Assembly San Francisco

Python: The Programming Language Everyone Needs to Learn

By

What’s one thing that Bill Gates, Mark Zuckerberg, Sheryl Sandberg, will.i.am, Chris Bosh, Karlie Kloss, and I, a data science instructor at General Assembly, all have in common? We all think you should learn how to code.

There are countless reasons to learn how to code, even if you don’t want to become a full-time programmer:

  • Programming teaches you amazing problem-solving skills.
  • You’ll be better able to collaborate with engineers and developers if you can “speak their language.”
  • It enables you to help build the technologies of the future, including web applications, machine learning models, chatbots, and anything else you can imagine.

To most people, learning to program — or even choosing what language to learn — seems daunting. I’ll make it simple: Python is an excellent place to start.

Python is an immensely popular programming language commonly used by data analysts, data scientists, and software engineers. In addition to being one of the most popular — it’s used by companies like Google, SpaceX, and Instagram to do a huge variety different things including data cleaning, build AI models, building web apps, and more — Python stands out for being very simple to read and write, while offering extreme flexibility and having an active community.

Here’s a cool example of just how simple Python is: Here is code that tells the computer to print the words “Hello World”:

In Python:

print ("Hello World")

Yup, that’s really all it takes! For context, let’s compare that to another popular programming language, Java, which has a steeper learning curve (though is still a highly desirable skill set in the job market).

public class HelloWorld {   public static void main(String[] args) {      System.out.println("Hello, World");   } }

Clearly, Python requires much less code.

Experiencing Python in Everyday Life

Let’s talk about some of the ways in which Python is used today, including automating a process, building the functionality of an application, or delving into machine learning.

Here are some fascinating examples of how Python is shaping the world we live in:

  • Hollywood special effects: Remember that summer blockbuster with the huge explosions? A lot of companies, including Lucasfilm’s Industrial Light & Magic (ILM), use Python to help program those awesome special effects. By using Python, companies like ILM have been able to develop standard toolkits that they can reuse across productions, while still retaining the flexibility to build custom effects in less time than ever before.
  • File-sharing applications: When Dropbox was created in 2007, it used Python to build the desktop applications and server infrastructure responsible for actually sharing the files. After more than a decade, Python is still powering the company’s desktop applications. In other words, Dropbox was able to write a single application for both Macs and PCs that still works after more than a decade!
  • Web applications: Python is used to run various parts of some of today’s most popular websites, including Pinterest, Instagram, Spotify, and YouTube. In fact, Pinterest has used Python in some form since it was founded (e.g., to power its web app, build and maintain data pipelines, and perform analyses).
  • Artificial intelligence: Python is especially popular in the artificial intelligence community, again for its ease of use and flexibility. For example, in just a few hours, a business could build a basic chatbot that answers some of the most common questions from its customers. To do this, programmers could use Python to scrape the contents of all of the email exchanges with the company’s customers, identify common themes in these exchanges with visualizations, and then build a predictive model that can be used by the chatbot application to give appropriate responses.

Python at General Assembly

General Assembly focuses on building practical experience when learning new technical skills. We want students to walk away from our data science courses and bootcamps equipped to tackle the challenges they’re facing in their own lives and careers.

Python at General Assembly section, change the second graf to:

Many of our courses are designed to teach folks with limited exposure to Python to use it to answer real business questions. Dive into fundamental concepts and techniques, and build your own custom web or data application in our part-time Python Programming course. Or learn to leverage the language as part of our full-time Data Science Immersive program, part-time Data Science course, or a one-day Python bootcamp. Projects students have tackled include visualizing SAT scores from across the country, scraping data from public websites, identifying causes of airplane delays, and predicting Netflix ratings based on viewer sentiment and information from IMDB.

Ask a Question About Our Coding Programs

Meet Our Expert

Michael Larner is a passionate leader in the analytics space who specializes in using techniques like predictive modeling and machine learning to deliver data-driven impact. A Los Angeles native, he has spent the last decade consulting with hundreds of clients, including 50-plus Fortune 500 companies, to answer some of their most challenging business questions. Additionally, Michael empowers others to become successful analysts by leading trainings and workshops for corporate clients and universities, including General Assembly’s part-time Data Analytics course and SQL/Excel workshops in Los Angeles.

“GA provides an amazing community of colleagues, peers, and fellow learners that serve as a wonderful resource as you continue to build your career. GA exposes students to real-world analyses to gain practical experience.”

Michael Larner, Data Analytics Instructor, General Assembly Los Angeles

Machine Learning for Data-Driven Predictions and Problem Solving

By

Ever wonder how apps, websites, and machines seem to be able to predict the future? Like how Amazon knows what your next purchase may be, or how self-driving cars can safely navigate a complex road situation?

The answer lies in machine learning.

Machine learning is a branch of artificial intelligence (AI) that concentrates on building systems that can learn from and make decisions based on data. Instead of explicitly programming the machine to solve the problem, we show it how it was solved in the past and the machine learns the key steps that are required to do the same task on its own from the examples.

Think about how Netflix makes movie recommendations. The recommendation engine peeks at the movies you’ve viewed/rated in the past. It then starts to learn the factors that influence your movie preferences and stores them in a database. It could be as simple as noting that you prefer to watch “comedy movies released after 2005 featuring Adam Sandler.” It then starts recommending similar movies that you haven’t watched — all without writing any explicit rules!

This is the power of machine learning.

Machine learning is revolutionizing every industry by bringing greater value to companies’ years of saved data. Leveraging machine learning enables organizations to make more precise decisions instead of following intuition. Companies have begun to embrace the power of machine learning and revise their strategies in order to remain more competitive.

Data Scientists: The Forces Behind Machine Learning

Machine learning is typically practiced by data scientists, who help organizations discover hidden value from their data — thereby enabling them to make smarter business decisions. For instance, insurers use machine learning to make accurate predictions on fraudulent claims, rather than relying on traditional analysis or human judgement. This has a significant impact that can result in lower costs and higher revenue for businesses. Data scientists work with various stakeholders in a company, like business users or product owners, to discover problems and gather data that will be used to solve them.

Data scientists collect, process, clean up, and verify the integrity of data. They apply their engineering, modeling, and statistical skills to build end-to-end machine learning systems. They constantly monitor the performance of those systems and make improvements wherever possible. Often, they need to communicate to non-technical audiences — including stakeholders across the company — in a compelling way to highlight the business impact and opportunity. At the end of the day, those stakeholders have to act on and possibly make far-reaching decisions based on the data scientist’s’ findings.

Above all, data scientists need to be creative and avid problem-solvers. Possessing this combination of skills makes them a rare breed — so it’s no wonder they’re highly sought after by companies across many industries, such as health care, retail, manufacturing, and technology.

Supervised Learning

Machine learning algorithms fall into two categories, supervised and unsupervised learning. Supervised learning tries to predict a future value by relying on training from past data. For instance, Netflix’s movie-recommendation engine is most likely supervised. It uses a user’s past movie ratings as training data to the model and then predicts your rating for unseen movies. Supervised learning enjoys more commercial success than unsupervised learning. Some of the popular use cases include fraud detection, image recognition, credit scoring, product recommendation, and malfunction prediction.

Unsupervised Learning

Unsupervised learning is not about prediction but rather about uncovering hidden structures from the data. It’s helpful in identifying segments or groups, especially when there is no prior information available about those segments. These algorithms are commonly used in market segmentation. They enable marketers to identify target segments in order to maximize revenue, create anomaly detection systems to identify suspicious user behavior, and more.

For instance, Netflix may know how many customers it has, but wants to understand what kind of groupings they fall into in order to offer services targeted to them. The streaming service may have 50 or more different customer types, aka segments, but its data scientists don’t know yet.

If the company knows that most of its customers are in the “families with children” segment, it can invest in building specific programs to meet customer needs. But without that information, Netflix’s data scientists can’t build a supervised machine learning system. So, they build an unsupervised machine learning algorithm instead, which identifies and extracts various customer segments within the data and allows them to identify groups such as “families with children” or “working professionals.”

Machine Learning at General Assembly

At General Assembly, our Data Science Immersive program trains students in machine learning, programming, data visualization, and other skills needed to become a job-ready data scientist. Students learn the hands-on languages and techniques, like SQL, Python, and UNIX, that are needed to gather and organize data, build predictive models, create data visualizations, and tackle real-world projects. In class, students work on data science labs, compete on the data science platform Kaggle, and complete a capstone project to showcase their data science skills. They also gain access to career coaching, job-readiness training, and networking opportunities.

If you’re looking to learn during evenings and weekends, you can explore our part-time Data Science course, or visit one of GA’s worldwide campuses for a short-form event or workshop led by local professionals in the field.

Ask a Question About Our Data Programs

Meet Our Expert

Kirubakumaresh Rajendran is an experienced data scientist who’s passionate about applying machine learning and statistical modeling techniques to the domain of business problems. He has worked with IBM and Morgan Stanley to build data-driven products that leverage machine learning techniques. He is a co-instructor for the Data Science Immersive course at GA’s Sydney campus, and enjoys teaching, mentoring, and guiding aspiring data scientists.

“Machines are helping humans build self-driving cars, cancer detection, and more, making it the right time to roll up your sleeves, get into the world of machine learning, and teach machines to make the world a better place.”

– Kirubakumaresh Rajendran, Data Science Immersive Instructor, GA Sydney