With digital media surpassing TV as the largest channel for ad spending in 2016, digital marketers are more important than ever. Through clever concepts, smart storytelling, and a keen understanding of audience behavior through analytics, these data-driven brand specialists move business forward through strategic email, paid search, social media, and beyond.
Recent data from General Assembly’s Credentials division — which helps companies determine the capabilities of team members and potential hires through assessments and more — suggests that digital marketing is an open playing field for anyone who can acquire the skills needed to succeed.
But once you have the skills, how do you land the gig?
An interface is a means by which a user interacts with a computer, service, or product. It’s a way of simplifying a complex system so that it’s easy to use. In this day and age of modern digital services and businesses, interfaces are omnipresent. Every day, we interact with websites, apps, and even voice assistants that all require some sort of interface for us to use.
For a business, having a well-designed interface for your app, website, or even your internal dashboards or CMS means easier actions and easier ways for users to find information. This ultimately ensures that your users take advantage of your product in a seamless way. A good user interface is one that’s largely unnoticeable. When a user starts noticing clashing colors, misplaced buttons, or unreadable text, they may feel frustrated and leave, never to return.
The practice of designing interfaces can take years to master and teams of people to execute. An interface is the result of the collective thinking of user experience (UX) designers, visual designers, developers, and other business stakeholders, whose different perspectives ensure that each user’s experience is simple and clear. UX designers plan and structure the interface, assuring that has been tested with users, works properly, and meets their needs. They then work with visual designers to craft the interface’s appearance so that it’s easy to use and actions are simple and clear to understand. This is all done in close collaboration with web developers, who build the interface in code and bring it to life.
It might seem like a lot of work, but interface design fundamentally rests on a few simple guidelines and principles. If you ask these questions and follow these steps, you’ll have an interface that enables your users to easily take advantage of your what your business has to offer.
Who Are Interfaces Designed For?
Like with any product design, it’s important to set a clear direction and goal before you actually pick up any tools. A “user experience” or “understanding your users” phase helps you research the business goals of your product and the people for whom you’re designing it. Before you embark on any design for your product — especially one for its interface — try answering these questions:
What’s your product’s ultimate goal? What do you want users to do with your site or mobile app?
Who is going to use your product? What do they want or need?
What are the benchmarks for success? What interfaces work well and why? Which don’t work as well?
On what devices will your product be used? Where is it going to be used the most?
Having the answers to these questions informs every decision you make with regard your interface design and helps to avoid any confusion about what it needs to do.
Using Wireframes to Plan an Interface
Wireframes are the digital equivalent of a house’s blueprint. They provide a clear understanding of how an interface will function — the layout of the text, buttons, images, and more. Most importantly, creating a wireframe helps you establish hierarchy (the order in which you want your users to read information on your interface). Wireframes are meant to be quick and dirty, which helps you focus on your design’s logic rather than its looks.
Wireframes are simple ways of demonstrating the layout of your interfaces and how they will work.
Wireframes should be low fidelity; i.e., you shouldn’t pay attention to how they look, but rather how they work. Use only three shades of gray, along with clean and simple fonts, symbols, and iconography. These elements only represent the structure of the interface, so there’s no need spend a lot of time crafting it. Think of it this way: If your interface doesn’t work when it’s low fidelity, then it’s probably too complicated.
While there are many approaches to creating wireframes, they all share a common goal: to plan what you need to design for your interface with a solid framework and demonstrate how it will function. As long as your wireframes achieve these goals, your method doesn’t matter!
How Visual Design Powers Usable Interfaces
The common misconception is that adding visual design to a product is only “making it look pretty.” While attention to visual elements does make a interface good-looking, it also makes it more usable, as colors, typography, and images can all provide clarity to a user when they’re using your product. When it comes to your interface’s visual design, consider the following techniques.
Grids
Grid guides give you a framework, making it easier to fit all of your interface’s elements together and maintain consistency within the structure of your site.
A grid is the first thing you should include when designing an interface, as it provides a rigid structure in which all your elements will sit. It is a set of lines that helps designers align elements and fit them together (like a giant puzzle). Grids guide a natural flow of information on interfaces and ease the strain on development. Here are some considerations to keep in mind when creating your grids:
Grids work best when their values are factors of 12, as this provides flexibility in your layout — i.e., a 12-column grid means you can have a three-, four-, or six-column layout.
Remember that the smaller the device, the smaller amount of usable space you have. Typically, for mobile devices, you want a three-column layout for main content and up to five columns for buttons.
Typography
Text not only helps your interface present information, it also adds depth to the overall look and feel of the design. As it is your design’s main carrier of information, a subtle, clean font is best. Choosing the right typography for your site can be difficult, so keep the following rules in mind to avoid getting caught up in the complexity of it.
Creating typography guidelines can help you control how your font looks and, more importantly, how readable it is.
Set up rules and guidelines for your typography (like the ones as above) as soon as possible to help control the number of fonts you use, enabling you to pair interesting fonts quickly.
Aim for 14pt as a minimum font size for mobile devices and 16pt as a minimum for desktop. Fonts that are too small end up being unreadable and therefore not functional.
Use sans-serif fonts to display simpler information (e.g., Terms and Conditions or other legal language), as they’re easier to read than serif fonts.
Stick to a maximum of three different fonts. Anything more makes your interface look cluttered and directionless.
Make sure your fonts are readable. Favor readability over style, as an interface needs to provide functionality more than it needs to be “artistic.”
Color
Color wheels help you choose colors that work together because of their relationships.
In interface design, color adds visual cues and draws attention to key actions a user can take. Here are some general rules to follow.
Use a maximum of three colors: a primary, secondary, and tertiary. This helps you prioritize colors within a design and prevents too much variation. Your primary color should be your most prominent and reasonably bright color.
Consistency is key. Having all buttons be the same color helps the user easily find clickable links.
Use color perceptions to the best of your advantage. E.g., even though it’s not in your color palette, using red implies an alert or an error.
Some colors work better together than others. Using the color wheel will help you find the ones that work best with your selected color. For example, yellow works well with purple and blue because they are close to one another on the color wheel. This color relationship is called “split complementary.”
Always keep accessibility in mind. This ensures that as many users as possible can use your product. For example, white text on a yellow background is hard to read, especially for people with visual impairments. Use color-contrast checkers to ensure that your combinations pass the test.
Buttons and Interaction Elements
Adding color to buttons helps draw attention to specific areas of an interface, making it easier to understand.
Buttons and interaction elements such as carousels and image galleries encourage users to explore your interface and complete an action. Keep the following rules in mind when deciding how to design these elements.
Make your buttons clear and distinct from the rest of your interface to help direct the user to complete an action. Use contrast with color, shapes, and typography to highlight important information and key buttons they may find useful.
Always experiment. A carousel might be good for your product promotion, but it may not always be the best solution. Your goal is display information in the best possible way, so play around with different elements to discover what’s most effective.
Experiment, Test, and Reiterate!
Remember that your interface is constantly growing; you’ll always be testing and iterating to improve it. If you’re getting feedback that some parts are difficult to use, then try different colors, interaction elements, buttons, etc. until you find the best ones for your users. There is no shame in getting it wrong and improving your design.
A simple, usable interface is no easy feat, but if you follow these guidelines and principles — and keep your users at top of mind — you’ll be able to design one that helps you and your business grow.
Interface Design at General Assembly
At General Assembly, students learn to apply interface design in a variety of disciplines. As aspiring professionals in our Web Development Immersive, taught on campus and remotely, they design and develop interfaces for websites and applications. Coding students also explore interface design in our part-time Front-End Web Development course, as well as our self-paced, online HTML, CSS, & Web Design program. Students take on interface design from a user experience perspective in our full- and part-time UX courses, while students in our part-time Visual Design course dive into interface-related typography, color theory, and more.
Paolo Sta. Barbara is a multidisciplinary experience designer with a passion for innovative design thinking and problem-solving. With a background in animation and digital design, he focuses on designing experiences that are not only user-centric, but also crafted and memorable to use. After working with some of Australia’s top digital agencies, Paolo is now the lead experience designer for WiTH Collective (part of Isobar), working on a range of clients, including Qantas, Foxtel, and NRMA. He also teaches various visual design workshops and courses at General Assembly’s Sydney campus.
“Learning design gives you the skills to define the experiences that affect everyday lives. More importantly, you’ll learn to innovatively solve problems and stay a step ahead of the ever-changing landscape around you.”
Paolo Sta. Barbara, Visual Design Instructor, General Assembly Sydney
“People decide whether or not they like a product in 90 seconds or less. 90% of that decision is based solely on color.” — 99designs, online graphic design marketplace
Color has a predictable and quantifiable physiological effect that influences our perception and behavior. It’s about emotions, and whether you realize it or not, the colors used in a design strongly affect the emotions of your users.
At the core of all product design is visual communication. What users do with a software application depends nearly entirely on what they see. The color of elements like buttons, toggles, input boxes, navigation, and the primary sections of the application can play a significant part in how users understand and interact with the software.
In our user experience (UX) and visual design classes at General Assembly, we spend a lot of time discussing how, when, and why to influence our users with everything from information architecture to user interface (UI) and interactions. To say the use of color is just one of those ways is to underestimate its power over everything from the user interface (UI), to graphics and transitions, to the subconscious message you’re sending to your users.
Color Is Subjective and Culturally Defined
It’s commonly believed among most designers that the color blue conveys a feeling of trust, calm, and masculinity; that yellow makes you think of creativity, summer, and positivity; and red is the color of passion.
Blue is often thought to be for boys, pink for girls, and white for purity.
But wait — be careful!
Not all colors mean the same thing in all contexts, or all cultures. Not only is color subjective — it is also contextual and culturally defined.
Color has a different meaning depending on how it’s used, and by whom. Red can be the color of love and valentines, or of serial killers and cult leaders. Red can be fast like a race car, cool as an icy-cold Coke, or dead as a zombie.
Colors are culturally created; in America, the color white often signifies purity, chastity, and virtue, and so is the color of a wedding gown. In India, widows wear white saris as a sign of mourning, and brides often wear red to signify prosperity and fertility. An American may see green and think of the great outdoors or jealousy (“green with envy”), whereas the Chinese are likely to also think of sickness or infidelity — and both cultures associate the color with eco-friendliness and wealth.
How you use a color — what palettes you put together — must be thought through carefully, and with sensitivity to the culture in which that brand or product will be displayed.
Building and Testing a Color Palette
While the psychology of color may help to explain why someone feels a certain way about a certain color, it isn’t the only determining factor in selecting a color palette for a brand or product. The entire design, including UX, UI, branding, and logo, all work together with color to convey a subconscious message to your customers. To effectively leverage the power of color, designers have to think holistically across the brand, as well as in detail about particular uses of the palette, and the context in which it will be used.
Even more specifically, at GA, we teach designers to ask, “What emotions do we want our brand to promote or project?”
So how do we figure that out? By using a few handy tools like mood boards, usability testing, and palette generators.
Creating a Mood Board
One way to begin developing a color palette for your product is to start with a mood board. A mood board is an arrangement of images, ideas, inspiration, and products intended to evoke or project a particular style or concept that you associate with your product or want people to associate it with.
Mood boards are an excellent way to play around with themes, images, and colors in context. From there you can start to put together a working palette to test with your customers, stakeholders, and users.
Here are some of the contradictions you’ll find across designers’ thoughts on building color palettes:
Some designers recommend limiting the palette to three colors, while others say four or five.
You’ll also find colorists who say you need a neutral, a bright, and a dark for any workable palette.
Others caution designers to stay with the same saturation and brightness values but select different hues.
Contradicting that, some advocate for all one hue and vary the saturation and brightness.
What to do, what to do? The answer is: It depends. Sometimes just knowing basic palette theory will help you with your own. Here’s a breakdown of the five most common color harmonies:
Monochromatic colors all have the same hue, but vary the saturation and brightness. This palette comes across as sophisticated and subtle, and it’s great for when the content is the focus and the UI elements need to fade to the background.
Triads come from three opposing points on the color wheel. When the saturation and brightness are kept the same, the hue variations are complementary to one another, and will liven up your designs.
Analogous colors sit next to each other on the color wheel. The closer they are in hue, the more they will blend together. It takes careful balancing to find the three that work happily together without clashing.
Complementary and split complementary are colors that sit opposite from each other on the color wheel. These colors make a great contrast for each other and work well with any product that wants to pop.
Color Theory and Branding
Finding the perfect color for your brand depends on your product, the emotional response you’re hoping to evoke, the color trends of the year (or season, or moment), and cultural aesthetics and values. Once you’ve got a few possible palettes together, start designing with them and test your creations:
Throw some logos, UIs, and social media posts at your customer base and stakeholders, and ask them what they see and feel.
Pull out your mood boards and do some A/B testing.
Ask your user group to give a thumbs up or thumbs down for each sample image or color group or logo.
It won’t be hard to see what people are loving and leaving this season, and which palettes will evoke the response you want.
Color Theory at General Assembly
During the full-time User Experience Design Immersive course at General Assembly, which I teach in San Francisco, we spend time working through both the science of color theory — how RGB color systems differ from CMYK color systems, and when to use each — as well as how to use color in product design to achieve business goals.
In GA’s part-time Visual Design course, students learn the fundamentals of color theory and color schemes, and learn how to apply them to designs for the web, like websites and interfaces.
“Color theory is an integral part of being a product designer, and these designers are in demand for everything from websites to apps, to wearable and usables.”
Susan K Rits, UX Design Immersive Instructor, General Assembly San Francisco
Composition is how we see information. It influences the relationships we see between objects, perceptions of complexity, and affects our desire to engage with content. Learning composition as a visual designer will allow you to make information appear in ways that convey different meanings, or leave different impressions, like sophistication, affluence, cleverness, or strangeness.
If someone asked you to write down your phone number, you might instinctively group the numbers into two groups of three and a group of four. This is a system developed by designer Ladislav Sutnar, who used the psychological principle of “chunking” to group information in ways that are easier to remember. Composition is constantly shaping our perceptions around familiarity, relationships, and ease of use. If you see a row of clickable buttons near the top of the web page, you might assume they share a common function, likely navigating through that website. Simply by placing the buttons in that location and in that proximity to one another, a designer has leveraged composition to imply function and orientation of the design.
The Gestalt Principles, Continuation, Complexity, and More
Let’s see composition in action: How many triangles are in the following image?
Optical illusions like this one use composition to subvert the mind’s expectations of how forms relate to one another.
Many people guess three or more, but the real answer is zero. You’re looking at a series of V shapes and Pac-Man-looking figures. Your mind is following the Gestalt principles of proximity (which states that objects near one another share a common relationship) and figure-ground (which states that the mind will choose a foreground and background). Being aware of how the mind instinctively derives meaning from visuals is a critical part of understanding how to leverage composition in powerful ways.
The Gestalt principles were first developed in 1890 by a school of German experimental psychologists who were interested in qualifying how the mind perceives information. While their initial list of principles has since been greatly expanded, even learning the basics will help a visual designer think critically about compositions and how to influence perceptions.
Beyond simple optical illusions, composition affects things in our everyday lives. Consider the following designs.
In the first example, the design utilizes a phenomenon known as continuation. By deliberately cutting off the bottom row of images and text, it suggests to the user that there’s more to see below. Users know they can scroll, so they’re likely to do so instinctively and continue exploring.
An example of continuation, a Gestalt principle that helps to inform a user there is more to interact with.
In the following example, however, the design neatly ends its grid within view. Many users in this scenario would not attempt to scroll. If this were the homepage design, some users may confuse an even grid of shows to be all the website has to offer if they aren’t familiar with the service.
A complete grid view can imply that this is all of the content the products often…even if it isn’t.
As Steve Jobs said, “Design isn’t just what it looks like, it’s how it works.” The composition a designer chooses influences how a user perceives something works.
Like most elements of design, the more complexity you add to a composition, the more difficult it is to balance. Simple designs with large type and clear focal points are often perceived as more accessible and easier to understand. They are often faster to make. However, more complex compositions can also make for longer consumption.
A Skill for Many Careers
Combined with typography and color theory, a mastery of compositions can help a visual designer compete in a range of design job markets from editorial layouts to app design. For example, visual designers at large tech companies like Facebook and Google often specialize in designing icons, user interface details, and general page layouts. They collaborate with engineers, product managers, and other specialized designers (like user experience) to apply visual principles in ways that further the goals of the user and the business. Visual designers in publishing, advertising, and lifestyle brands often focus more on ads, page layouts, or book jackets. Using composition in these settings means a visual designer is either making an object more eye-catching or easier to digest dense information.
While the roles may have different mediums to focus on, the principles of composition remain true for all visual designers.
Composition in Visual Design at General Assembly
At General Assembly, we teach composition primarily in our part-time Visual Design course, which I teach at GA’s San Francisco campus. However, some of its concepts overlap with our user experience design courses, since composition can also implicate how something works to a user. Students can expect to learn by doing at GA: They’ll analyze their favorite web pages and apps to detect how subtle choices in composition influence their understanding of functionality and impact an interface’s feeling.
Shawn Sprockett is a design manager at Postmates, design advisor to Axiom Zen, and an instructional lead for General Assembly’s Visual Design course in San Francisco. His work has spanned a wide breadth of industries over the last 10 years, having worked with brands including Victoria’s Secret and Airbnb, and trained under legendary designers like Milton Glaser and Stefan Sagmeister. Shawn has also been a part of big business transformations like Conde Nast’s shift to mobile publications and IBM’s implementation of design thinking at scale. Shawn has an MFA in design and entrepreneurship from the School of Visual Arts. His recent projects are at the intersection of artificial intelligence, behavioral psychology, and generative design.
“Visual design is everywhere, always informing our behavior and perceptions. Understanding visual design changes the way you look at the world, and a mastery of it will give you superpowers that open the door to new careers.”
Shawn Sprockett, Visual Design Instructor, General Assembly San Francisco
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.
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.
“There’s a high demand for UX roles. Companies of all sizes value what UX research and design can bring to the table. With Austin growing as a technology hub, these UX generalist roles provide value for any business.”
Jared Rogers, UX Design Immersive Instructor at General Assembly Austin
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.
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.
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.
“Merely going digital doesn’t guarantee success. The world needs UX designers now more than ever to ensure that the needs and desires of the users are balanced with the goals and objectives of the organizations.”
Susan Wolfe, UX Design Immersive Instructor at GA San Francisco and GA Sydney
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.
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.
“Having been both a GA student and teacher, I can attest to the inspiring network of creators, thinkers, and learners who come here. I’ve met some of my best friends, mentors, and collaborators. GA continually gives back.”
Katharine Hargreaves, User Experience Design Immersive, General Assembly Los Angeles
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!
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.
“Companies are moving away from simply providing products and services and are instead focusing on how people interact with those goods and services. UX designers are needed to help make experiences positive in any industry.”
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:
Here’s what the above HTML looks like as a DOM tree:
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.
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:
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:
If you want to append an HTML element with content inside it, you’ll create a text node using the .createTextNode() function like this:
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:
DOM’s JavaScript component:
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)
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.
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.
“Now is a great time to learn web development because there are so many quality resources available to find and use. Once you gain that skill, there’s an entire world of learning to do!”
Cory Fauver, Web Development Immersive Instructor, GA San Francisco
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:
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:
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.
“Writing code is a craft as well as a creative outlet, and it’s not limited by industry. The discipline of creating software is useful to anyone, as it’s a way to think about problems and know how to technically solve them.”
Danny Kirschner, Web Development Immersive Instructor, General Assembly Providence
