user experience design Tag Archives - General Assembly Blog

Don’t Frustrate Users With Gaps in Your Product Experience

By

There are countless steps where the product experience can break down.

There are countless steps where the product experience can break down.

There are countless steps where the product experience can break down. Have you ever been waiting at the corner for a ride-sharing pickup, and while the app swears the driver is right there, there is no car in sight? Or how about seamlessly ordering groceries in an app, then waiting well past the delivery window with no sign of your avocados? Ever called customer service by phone to learn they have no record of the two detailed chats you had with online agents about your issue? We’ve all been there.

As consumers who increasingly rely on technology to help us wrangle a vast range of goods and services, we’ve all experienced pain points when really good software doesn’t equate a really good experience. All too often, there’s a breakdown that occurs outside product screens, when a product or process hits the reality of the human experience or a user fails.

Take a peek at the diagram above, which charts the various user touch points that can occur with your brand in a product experience loop. Users interact with a product through many different channels and modes of communication, and bridging the gaps between them is essential to your product’s success. If you present users with a custom call to action in a social media ad, your customer service teams must be ready to respond. If you build an offer email that is redeemable at a brick-and-mortar retail location, the cashier will need tools to redeem it.

Continue reading

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

Usability: 3 Key Factors to Assess Your Product Design

By

What exactly do we mean when we talk about a product or service’s “usability”? Clearly, it has something to do with how usable it is. (So far, that’s a pretty recursive definition!). But what makes something usable? At the highest level, product and user experience (UX) designers determine usability based on three factors:

  • Effectiveness: Can people do what they set out to do?
  • Efficiency: Can people do what they need to do within a reasonable amount of time/effort to make it worth doing?
  • Satisfaction: Do people feel OK about what they had to do in order to properly use it?

This is a big deal, and there’s even a specific standard (ISO 9241-11) set forth by the International Organization for Standardization that defines usability as “the extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use.”

Therefore, usability is about matching products, systems, and services to users’ needs and requirements.

Usability vs. Functionality

When we, as members of a project team, focus on usability (and we should always focus on usability), we’re concerned with supporting people in accomplishing their tasks. This shouldn’t be confused with “functionality,” however, as the mere presence of good features and functions has little bearing on whether people are able to use them.

When we overload products or services with too many features, or when we provide them in ways that don’t match people’s expectations or needs, it’s difficult for people to access what’s needed when they need it, let alone use it once they do find it. When that happens, people end up fumbling with the product or service rather than achieving their goals. They are very likely to abandon what they’re doing, or find another way to achieve that goal.

Think of it this way: People don’t use ATMs for the sake of interacting with a machine on a wall. They use them (predominantly) because they want some cash. To design an ATM — or any product — that’s as usable as possible, we need to consider a number of factors:

  • Who are the users? They’re people who are not going to be “trained” in using an ATM. They don’t need to have special knowledge of financial systems. They may not speak the local language.
  • What are their goals? We can assume that it’s mostly about getting money, so we need to optimize our design for that. However, users may want to make a deposit, check their balance, or perhaps other things. Therefore, the process must be flexible.
  • What is the context? ATMs are typically out in the open. Particularly in busy thoroughfares, there is often a queue to use them. Privacy is important for people in order for them to feel that it’s secure. There may be glare on the screen during the day, or not enough light in the evening.

These considerations are just scratching the surface, but start to shed light on what this might mean for the solution.

Determining What Makes Something Usable

According to usability thought leader Jakob Nielsen, one of the “founding fathers” of usability, usable systems have five high-level qualities. These guide our thinking as we design, and become our frame of reference as we evaluate. Learn these key qualities and ask yourself the following questions to evaluate whether you’re on the right track to usability.

Learnability is making sure that people can begin to perform (at least) basic tasks with little effort. It’s critical to the initial use of a product or service.

  • What is the user’s required knowledge level coming into the site, app, product, or service?
  • What information have they been primed with?
  • Are there too many features?
  • Have conventions been used from other sites, apps, or systems that your audience is familiar with?
  • Did you provide a way to learn about the less obvious, secondary features?

Efficiency is about ensuring that people can achieve their goals quickly with the system — after they learn how to use it.

  • Does the system reduce hesitation with clear language and feedback?
  • Are there special shortcuts for power users?
  • Is technology leveraged to reduce user effort?
  • Least importantly, how many clicks (in a digital interface) does it take to use?

Memorability means ensuring that people can not only learn to use the system initially, but that they don’t have to relearn it with every use.

  • Does the system call out changes since the user’s last interaction?
  • Are the interface elements placed in conventional positions?
  • Would users be able to re-establish proficiency after not using it for a while?

Error management is critical to reducing the number, magnitude, and impact of any user errors.

  • Have the designers anticipated errors that users may make and try to prevent them?
  • Have designers  considered pre-emptive error management?
  • Is the system forgiving of users’ mistakes?
  • Are any error messages clear?

Satisfaction determines whether people continue to use the product/service.

  • Does the product/service do what it says it will do?
  • Is it different from others in its category?
  • Is it visually appealing?
  • Is it well executed from a technical perspective?
  • Are there pleasant surprises? Does it delight?

Usability Is Not Only a Digital Concern

The usability of your phone, or that ATM, depends just as much on the design of the hardware as the software. Usability is also critical to products with no digital interface at all, such as in the design of OXO kitchen utensils, where the company prides itself on giving people an easy and ergonomically sound way to open jars, peel fruit and veggies, and so on.

Conversely, think about how difficult some microwaves are to use, and because they’re all different, it’s difficult to go from using one to another. Finally, consider services, rather than physical or digital products. For instance, is the process for renewing your driver’s license a usable one? Think about the opportunities there.

“Usability” Is Not Enough

We’ve all experienced products and services that are technically “usable,” in that we can easily use it. However, we scratch our head and ask ourselves, “Why?” Usability is just one — albeit a very important — piece of the puzzle.

Peter Morville, the founding father of information architecture, got designers thinking more broadly when he published his now-famous “user experience honeycomb” diagram. The honeycomb serves as a reminder that, in addition to being usable, a product or service must be findable, accessible, useful, desirable, credible, and valuable. The diagram emphasizes the interrelationship among these attributes, as well as the fact that each is a lens into the success of the solution and can be individually evaluated and prioritized. Understanding all of this is where UX design comes into play.

Usability Honeycomb

Usability at General Assembly

Usability is at the core of everything UX design students learn at General Assembly, be it in our career-changing User Experience Design Immersive program, part-time on-campus or online courses, or design-focused short-form workshops and events. It’s baked into students’ work in researching users’ needs and goals, learning synthesis techniques to develop insights, and translating those insights into hypotheses and requirements.

Usability is reinforced both in students’ theory projects and work with real-world clients, in which they create early conceptual designs and wireframes, test them with users, iterate on the solution based on their learnings, and evolve the designs into final solutions. It’s at the heart of ensuring they understand the real problem before launching into the solution.

This kind of focus allows students to recognize the simple beauty in what Breville, the small-home-appliance company, did when it introduced a function on its toasters to brown bread just “a bit more.” That’s very much aligned with a person’s goal of getting that perfect breakfast. That’s what usability is all about.

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, User Experience Design Immersive Instructor, GA San Francisco and Sydney

Prototyping Tools For UX Design: Key Factors to Choosing Your Toolkit

By

After synthesizing user research and thoroughly uncovering problems to solve, user experience (UX) designers begin their design process by ideating on a number of solutions. This is where the creative magic happens! Designers sketch to explore many workable solutions to user problems, then narrow them down to the strongest concept. Using that concept, the next step is creating a usable prototype that can be tested for viability against both the users’ goals and business needs.

UX designers create prototypes — early models of a product built to test a concept and learn from it — to communicate and test designs for user interfaces of websites and applications. Prototypes communicate much more than static designs. They allow designers to demonstrate an interface’s functionality, flow, interaction, animations, and overall usability.

There are several digital tools available for today’s UX designers, each with different capabilities and outputs. With new options being released and older mainstays evolving on a regular basis, however, it can be overwhelming to choose the right one.

There are many factors to consider when deciding on a prototyping tool. Among the most important are:

  • Learnability: Not all platforms are seamless to use. How easy will it be to learn?
  • Cost: How much are you willing to invest in a new, unfamiliar tool? Costs can range from free to several hundred dollars per year.
  • File type and outputs: How will you export and/or demo your prototype to accommodate your current workflow?
  • Project goal: What is your end goal for the project? Are you presenting high-fidelity compositions to a client? Preparing annotated, workable prototypes to hand off to a development team? Demonstrating animated interaction design concepts for your internal design review? Conducting usability tests with users? Different platforms have different strengths.

Prototyping Tools at General Assembly

Across General Assembly’s global campuses, we use a variety of prototyping tools in our UX courses, some chosen by instructors and some by students. Product Management students also leverage these tools when they learn to bring their wireframes and storyboards to life.

Here are several prototyping platforms our community has explored and found to be popular in the field to help you choose the one that’s best for your designs.

Sketch and InVision

Sketch and Invision

The design toolkit Sketch has become one of the more popular UI design tools, beating out industry mainstays like Adobe Photoshop and Illustrator within many organizations. UX designers use Sketch to create anything from low-fidelity wireframes to high-fidelity visual interfaces. However, Sketch lacks the ability to simulate interactions such as clicks, hovering, tapping, etc., without a third-party integration, so designers looking to make their designs interactive rely on tools like InVision, a pure prototyping solution.

InVision doesn’t have drawing or type tools for creating designs — it simply sets up interactions, connects corresponding pages, and adds animated transitions to your designs. Together, InVision and Sketch let UX designers to design and build usable prototypes for testing and generating feedback. That said, InVision’s studio design app, InVision Studio, allows users to create their designs directly in the platform, which may eliminate the need for Sketch altogether.

Axure

Axure

Axure, released in 2003, has risen to popularity along with the steady demand for UX professionals. Designers looking for advanced interaction capabilities — such as custom animations and JavaScript interactions — can rely on Axure as their sole prototyping tool. One of its most discussed weaknesses, however, is that it doesn’t output vectors but rather converts images to bitmaps, which can lead to blurring or pixelation during resizing. Axure is also seen as more complex in general, translating to larger time investments needed to learn the tool.

Figma

Figma

The drag-and-drop interface on Figma, a collaborative UI design tool, is what makes it a standout for new UX designers, particularly those who are unfamiliar with HTML and CSS. It includes high-fidelity drawing tools so you can craft designs that are as close to the final product as possible. Other useful features include automatic responsive designs, so all artboards adapt to the screen size, layout grids for designing orderly compositions, and reusable components that allow the user to keep design patterns consistent throughout their project.

Adobe XD

Adobe XD

Adobe XD is a product created exclusively so that designers can build their prototypes in one place. The software has a handy “play” button to demo your prototype at any time. And, while it doesn’t have as many design tools as Sketch, the team at Adobe continues to add new features to XD, such as underline text, view hotspot hints, and the ability to see the prototype in full-screen mode.

Webflow

Webflow

Webflow was founded in 2013 as part of Y Combinator’s startup accelerator program. Created as tool for designers to craft fully functional, custom websites, Webflow works well for prototyping interactive designs. Additionally, its user interface is intuitive enough for designers who know minimal HTML and CSS. The Webflow interface provides designers with more robust layout and styling options than other CMS options such as Squarespace or Wix, which are less viable for prototyping because of limited template customization.

Having all of these prototyping tools at our disposal is great news for UX designers, and at the end of the day, these are all designed to push us forward in our design process. If you find yourself getting stuck in deciding which tool is best, it’s important to go back to the end goal of your efforts and keep them in mind. You can also take comfort in knowing that tools are constantly changing — it’s exciting to watch how they all evolve.

Ask a Question About Our Design 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 the Meredith Corporation.

Jared Rogers, UX Design Immersive instructor, General Assembly Austin

How Usability Testing Improves Product Functionality and Adds Value

By

Usability testing is like an acid test of a design. It allows you to get feedback on the design from intended users in a relatively cost-effective and easy way. It’s a great way to learn what is and isn’t working, and identify opportunities for improvement. Designers can test a design at any time in its lifecycle, and with a relatively small number of users, accessing diverse sets of users that may be locally situated or even across the globe.

Usability testing is an integral part of user experience (UX) design that allows us to get feedback directly from users, thereby making a product that’s not only functional and user-friendly, but also provides value. It’s often done at the beginning of a design project, with an intention to check the design structure’s efficiency, the organization of content, and whether the design direction is in line with the users’ “mental model,” motivations, and satisfaction. When incorporated towards the end of the design process, usability testing helps validate and evaluate whether the product’s design goals are met.

Key Steps in Usability Testing

Usability testing provides an opportunity to observe users while they interact with a design, and hence learn and understand not only the problems that occur but, more importantly, why they’re happening. For example, if a user is unable to complete a task in a mobile app, is it because some link labels don’t make sense? Or perhaps the content itself is confusing, or the whole task flow doesn’t meet their expectation. Testing also allows us to empathize with users by learning about how they think. This provides valuable insights and data that allow for effective and efficient design decisions — which also means fewer arguments about the design within the team and the stakeholders!

One of usability testing’s obvious benefits is that it leads to more user-friendly design, but there are other amazing reasons to implement the practice. Usability testing can lead to great results when it comes to comparing design alternatives, checking to see whether design goals are met, getting stakeholder buy-in, and more. The typical steps involved in conducting a usability test are:

  • Planning
  • Recruiting
  • Conducting the test
  • Analyzing the results
  • Debriefing and reporting

Depending on the design being tested, its objective, and its resource constraints, usability testing can be done through various approaches, including:

  • In-person moderated
  • Remote moderated
  • Remote unmoderated
  • Guerilla testing

In my mind, two of the key challenges in conducting a successful usability test are recruiting the right participants and having a skilled moderator. A good moderator must be empathetic, open-minded, and a good listener, and must have the ability to multitask!

Real-World Examples of Usability Testing

I once worked on a redesign of a website that sells and provides information on secondhand cars. As part of the project, my team did a usability test on the existing website to understand the problems users were facing. This website was designed for lead generation, promotion, retention, and advertisements by users who wanted to sell their cars or buy a secondhand car. When I reported the first day’s findings to the client’s team, they were shocked by some of the feedback.

The next day, the company’s CEO observed the sessions in person, and he was so overwhelmed by what he observed that he made it mandatory for the test session highlight videos to be put on every developer’s desktop. That way, when the developers logged into their systems every morning, the first thing they would see would be the users’ struggles. This was an excellent technique to allow the team to build empathy with the users and design with them at front of mind.

Another project I worked on that showcases the value of usability testing was a multi-country project for a technology hardware company. The original website was designed for the U.S. market, then adapted for China, Germany, and Russia. We needed to conduct a usability test on each of the four countries’ websites to understand if the expansion strategy was successful. Using the moderated remote usability testing methodology, we conducted tests in all four countries in a fairly short period of time, with no travel involved. We not only received great feedback on the websites, but also learned amazing insights into how the cultural differences affected the way the website was perceived in each country.

Usability Testing at General Assembly

At GA, usability testing is covered extensively in our User Experience Design Immersive (UXDI) program, and on a basic level in our part-time User Experience Design course, on campus and online. Students learn the detailed methodology and relevant tools, and have ample opportunity to practice it in class as well as in projects.

In class, students learn usability testing methods through practical exercises; in UXDI, for example, they do this by roleplaying as the moderator (test conductor), the participant (user), and the note-taker. Then they practice testing as part of virtually all their projects, including with real-world clients. By the end of the course, students are able to immediately apply their usability testing skills to new projects.

Ask a Question About Our Design Programs

Meet Our Expert

Shebani Saxena has been practicing user experience design since 2004, when she began working with Human Factors International, the world’s largest UX company. After nearly six years there, she has worked as a freelance UX consultant for companies like The Pizza Company, Done by None, and Sun Life Financial. Shebani has a strong desire to keep learning and share her knowledge with others. She currently teaches the full-time User Experience Design Immersive course at GA Hong Kong.

Shebani Saxena, UX Design Immersive Instructor, General Assembly Hong Kong

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.

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. 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 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 — 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. 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 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 Responsive Web Design for Flexible Web Pages

By

In its early days, the web was rigid. Designers and “webmasters” built functional sites that looked great, but they had a major weakness, revealed in the smartphone era: They weren’t flexible, so they didn’t work well on small screens and narrow browser windows. Their rigidity became their downfall.

All of this became clear in 2007, when the iPhone arrived with its 3.5-inch-diagonal screen and full web browser. Developers and designers’ first thought was to make an alternate, mobile version of the site for smartphone users, but keep the so-called real site at 960 pixels wide — and have perfect layout down to the pixel. They chose a certain subset of user actions to address on the smartphone, believing that two entirely different sites — with two codebases — was a good idea.

But no. Pixel perfection is often the enemy of good design. We’ve realized that we shouldn’t obsess over exactly how many pixels tall each headline is, because what really matters is the context in which it’s seen. That means it needs to have an appropriate look for the screen on which it’s being used. For design to be good, it has to serve its users, convey its message, and be almost seamless, effortless, and problem-free.

Ethan Marcotte, the influential web designer who coined the term “responsive web design,” helped us let go of pixel perfection and realize that the web isn’t static, but fluid. He helped developers and designers realize that we should think of the web as proportional and scalable. Responsive web design — the design of layouts and hierarchies that preserve visual emphasis and change as a screen changes size — has reshaped the modern web.

We now think of the web as a spectrum, a range of screen widths corresponding to a wide range of devices. A website shouldn’t care whether the user is viewing it on a phone, laptop, or flat-screen TV via a Playstation 4. Instead, a website should respond to its viewer’s screen width, preserve content structure even as the layout changes, and maintain readability at any size — all of which leads to a positive user experience. Plus, with responsive web design, developers only have to deal with one code base, not two, as was the case in the days of stripped-down mobiles sites that often had their own subdomain (e.g., “m.[sitename].com”). Now, a single site can work for any context.

How Responsive Web Design Works

The goal of responsive web design is to serve the needs of the users, regardless of which type of screen they’re using. So a responsive layout changes as the width changes, yes, but it’s important to preserve the visual hierarchy as well. This means that if you have a page with a hero image, large headline, CTA, and a couple of related links, then it should be obvious which elements demand focus at any screen size.

Computer and Phone Website

Elements can stack on top of each other, but an element of primary importance (like a crucial photo, button, or bit of copy) should still look “primary.” We can distinguish them through size, color, imagery, or any other method of conveying importance. Above, I’m showing how a hero image remains primary, even on small screens.

Subtle changes in content can work as well. Take, for instance, a National Geographic graphic on Alex Honnold being the first person to complete a free solo climb of El Capitan. On wide screens, like your laptop, you’ll see a full description of the mountain, and verbose labeling — but if you make your browser window smaller (narrower than 800px) or view it on your phone, the copy itself is shorter, while still conveying the same message.

The labeling on the graph changes as well — the larger-screen version has more detailed measurements marked on Honnold’s climbing route, for example. Not only can we use responsive design to subtly change content, but we can adjust visuals for the context as well. We can show our small-screen users larger technical diagrams — ones that don’t require zooming in on details, but that are formatted to match their screen. In the coming years, we’ll surely uncover even more ways to adjust both copy and visuals to best serve our users.

Websites aren’t the only products that benefit from the methodology of responsive design; apps do, too. A native app on iOS should look good and maintain visual priority in either portrait or landscape mode. In fact, Apple’s Human Interface Guidelines recommend it, whenever possible. Since landscape is wider than portrait, this translation often ends up requiring responsive design.

Designers use both quantitative and qualitative data to decide which screen widths we should target, due to customer behavior and the context in which customers are using the solution. What did analytics tell them about the users? What contextual insights emerged from usability testing or user interviews? What feedback did they receive from users in the previous version of the product? Designers take these data points and work with developers to define certain widths. Ideally, UX designersvisual designers, and developers work together in prototyping, side by side, so that any potential problems are quickly spotted, especially as they may relate to development.

When all involved reach decisions, developers implement the responsive web design, often by identifying the exact widths at which the layout changes, which are called “breakpoints.” Once breakpoints are set, they use techniques such as media queries in CSS to apply different sets of rules to different screens or devices, so that users have a delightful experience no matter the context.

Responsive Design at General Assembly

In General Assembly’s full-time User Experience Design Immersive and part-time User Experience Design course, instructors frequently challenge students to think about how their digital products will look at different screen sizes and give them tips on maintaining visual priority. Recognizing that they can’t guarantee which device their audience uses, students learn to think of the web as fluid.

When it comes to bringing responsive designs to life, you can learn the fundamentals in our part-time Front-End Web Development course or online HTML, CSS & Web Design course, or launch a career building seamless, responsive websites in GA’s full-time Web Development Immersive or Web Development Immersive Remote program.

Ask a Question About Our Design Programs

Meet Our Expert

Phil Bolles, a senior experience designer at nclud and User Experience Design instructor at GA’s Washington, D.C., campus, loves researching, prototyping, and building out engaging experiences that serve users well. He has a strong background in code and visual media, which he utilizes in his core UX skills. Having worked for many corporate, nonprofit, and startup clients, he appreciates a wide variety of methodologies — especially a fast-paced, lean approach to design. When he’s not nerding out about aspect ratios, Phil shoots photos, wakeboards, and drinks light-roast coffee. Phil has a BFA from the Tisch School of the Arts at NYU.

Phil Bolles, User Experience Design Instructor, GA Washington, D.C.

Inside The Mind Of The Designer

By

UX Design Career Change

How do user experience (UX) designers think? What does the thought process look like from initial challenge to user-friendly solution? What if you could just peek inside the brain of a UX designer and watch the gears turn?

Join us for a Design In Motion panel event happening at your local General Assembly campus. Until the end of June, we’ll gather the leading minds of UX and product design to discuss design strategy. You’ll be able to see the design thinking process in action as industry experts walk through the design challenge they’ve been tasked with—whether it’s revamping a flight search app or thinking up a genius digital experience for the Rio Olympics.

We asked some our guests from a wide range of backgrounds about their unique paths to building memorable experiences, where they find design inspiration, and what advice they’d offer to aspiring designers.

Continue reading