design Tag Archives - General Assembly Blog

Client Projects From Our UX Design Immersive Grads

By

Every graduate of our User Experience Design Immersive career accelerator gets the opportunity to work with a real-world client that’s looking to solve a particular consumer problem. The experience gives students a chance to apply the UX design process to real life, as well as invaluable insights and impactful results that they can use to stand out in their job searches.

Here are a few of our instructors’ favorites.


Helping a City’s Communities Thrive

The client: City + County of San Francisco

The challenge: San Francisco’s Community Ambassadors are the bridge between city individuals and city services. In addition to the great things that they do for the city and its people, they have to log every single thing they do. The city teamed up with UXDI students to enhance the Ambassadors’ day-to-day mobile experience and improve data collection.

See the Project

Creating Easier Access to Birth Control

The client: Pandia Health, a startup that provides a convenient, affordable way to get birth control.

The challenge: The client came to GA students with three areas to work on: a new homepage, a design for a forum-like question and answer page, and their onboarding process, which includes an online form for prescriptions.

See the Project

Solving the Bra Problem Once and For All

The client: Posture Wings is a startup athletic bra manufacturer producing patented garments that are bio-mechanically engineered to reverse poor posture.

The challenge: When Posture Wings’s flagship product sold out, they worked with UXDI students to quickly set up an e-commerce site that would support a second production run.

See the Project

Making Traffic Less Miserable for Radio Listeners

The client: nēdl, an app that lets radio listeners search live broadcasts as easily as they search the internet — by keywords.

The challenge: Nadav Markel, a UXDI graduate in Los Angeles, worked to help nēdl grow its user base, as it was missing out on a large segment of the radio listening market: car drivers. He also set out to help make nēdl more safe to use while driving.

See the Project

User Experience Fundamentals: 4 Key Elements of the UX Design Process

By

Many people have heard the term “user experience” but not everyone knows what this means. User experience (UX) is rapidly growing and revolutionizing how people interact with the world around them. UX is why Google is so easy to use and how Facebook knows what article to suggest to you next. It’s why the internet evolved from Geocities homepages with blinking “Under Construction” signs to the sophisticated interfaces we use every day. User experience is practiced by UX designers — but also product managers, product designers, entrepreneurs, startups, and forward-thinking organizations.

But what does UX actually mean? Let’s break it down.

For starters, if you have ever purchased a product or benefitted from a service, you are a user. When you interact with a product, service, or company, you are having an experience. Ultimately, most companies want you to have a good experience using their product or services. In order to understand what makes an experience good, we need to define what that means from the perspective of the user.

What makes an experience “good” hinges on whether it was successful at solving a real problem or provided users with actual value. This is the core distinction between art and design: Whereas art can be aesthetically pleasing, good design must have utility. Beauty alone isn’t enough. Thus, a good user experience is one that enables the user’s interaction to be effective.

For example, let’s say you wanted to find a restaurant for dinner with friends. You know that several people in the group are vegetarians, so you’d like to find a convenient location where everyone has options. In this situation, you might use a restaurant recommendation platform to narrow down options, identify some potential locations, and share them with friends. The conditions for success in this situation would be an app that enables you to do exactly that. Anything more is considered “delight” and anything less is problematic.

The Four Key Elements of the UX DESIGN Process

User experience is often referred to as “the science behind design.” What is meant by “science” here is the rigorous methods that comprise the UX process and provide the human insights and hard data to support and validate product design decisions.

It’s important to know that the UX process can be used as both a path (go from start to finish) or as a toolkit (select the tool you need), depending on the project goals and timeline. Regardless of how you apply the process, there are a few critical UX design basics that create the foundation for a successful user experience. We’ll outline these UX fundamentals below, along with specific tools or methods that can be used for prototyping.

1. Behavior

Let’s begin by stating the obvious: People are complex creatures. When designing for people, it’s important to understand how they think and what behaviors they’re engaging in to satisfy their current needs or solve their existing problem. Before there was Yelp to find restaurants, what did people do? They asked their friends for recommendations or used an online search engine (or something else entirely — let’s not forget that there was life before the internet).

UX designers work with people by learning about their habits and goals, identifying needs and constraints, and aligning with existing behaviors to create solutions that are easy to use (efficient) and solve a real problem (effective).

Some UX methods and tools used to learn about user behaviors:

  • User interviews are one of the most important ways that UX designers uncover information. User interviews are usually focused on the qualitative data, which is information that can’t be measured but that is rich in emotional detail.
  • customer journey map is a visual document that details a user’s interactions with a company or product and how they feel about each interaction. This map tells a story about user’s end-to-end experience and how successful the product design was from the user’s perspective.
  • task analysis is used to analyze how users perform tasks in order to achieve a goal. Through observation, designers learn about the user’s current process (and work-arounds if no solution exists). For instance, observing a user file their taxes using analog methods (paper, mail) can inform a UX designer how they might go about that same task online. This is a great way to learn about existing pain points that could be improved.
  • Designers are always documentinganalyzing, and communicating user insights and data with their team to keep everyone on the same page. Designers might document a user interview using a screen-sharing tool that captures how a user moves through a website to complete a task. Then, they might analyze that information by creating an affinity map with their team to identify common trends or patterns in the collected data. Finally, they might create a user persona to bring this user data to life and communicate findings with their team.

2. Strategy

User experience is a human-centered process, which means that designers don’t prioritize business goals over people. The best design solution should ultimately align both the business and customer goals to create an effective and usable solution to a real problem. Strategy in UX is also about understanding where an existing product or process can be improved and communicating this effectively to internal teams and external users through responsive design. Fundamentally, UX is about design empathy, which means translating user needs into actionable solutions.

One of the first steps in UX design thinking is user research. In order to solve a problem, a designer first needs to observe and understand what’s happening from the user’s perspective. Asking questions is a great way to uncover a lot of information about user needs and frustrations. These user insights can then be translated into design solutions that solve the user’s problem efficiently and effectively.

Some great questions to ask when strategizing:

  • Who is our user?
  • What is the user’s motivation or goal?
  • How does this make them feel?
  • Is the process clear?
  • What do they expect when they click this?
  • Are you assuming something about users? How could you test this assumption?
  • Are you thinking of the user’s wants and needs, or your own?
  • What do we want users to do? How are we helping them do it?

Strategy is then translated into interaction design through artifacts such as user flows (how a user moves through a system to achieve a goal), wireframes (schematics that show how a digital interface will look and function), and high-fidelity prototypes (a working model of a design) that can be tested with users.

3. Usability

Good design is ultimately determined by usability. If a particular design element does not help the user solve a problem, or makes solving a problem extremely challenging, it is not a good design. If the user is confused or doesn’t know where to go, or you designed it for you? Also not a good design. Because design is about functionality, usability is more important than aesthetics. While designers talk a lot about designing for “delight,” the best designs are usable. Designers can add delight through sophisticated animations, friendly language, and unexpected surprises that anticipate users’ needs. However, if the design is not usable, all these delightful details don’t matter. This may seem like a simple practice in theory, but that’s not always the case.

Humans are complex, and usability is deeply connected with psychology and behavior. Digital product design inherited a lot of its behaviors from things we used in our analog life, such as buttons and sliders. Thus, people come to expect things to behave a certain way, even if there aren’t the same physical or technical constraints.

Usability is about creating products that anyone can use, especially if they have a disability or impairment. Usability is also about accessibility, which means that physical constraints or disabilities don’t prohibit or impede someone’s use of a product or service. Good design is about helping humans.

How can you determine whether something’s usable and accessible? There are a ton of resources dedicated to creating accessible and inclusive designs from the ground up. Some of the best include:

  • Nielsen Norman Group’s 10 Usability Heuristics
  • W3C Web Accessibility Guidelines
  • Microsoft’s Inclusive Design Toolkit
  • Uxdesign.cc’s Diversity and Design Series
  • Airbnb’s Another Lens Research Tool

4. Validation

Finally, validation is a critical piece of the UX process. Ideally products need to be tested with users before they are deployed to the public. Unfortunately, this is not always the case with companies that are eager to launch their products out into the world. The UX process emphasizes testing with real users early and often in order to ensure that the design solves the right problem.

Solving the right problem is the most important task that UX designers face. However, testing often throughout the process also means that you’ll catch mistakes sooner and be able to adjust without losing users. When things don’t work or are difficult to use, most people give up.

Investing in UX design is one way companies can stay competitive in the market while making the most of their time and resources. Validation is proof that you have successfully solved a problem for your user. Another way to think about testing is as an experiment. When making decisions, it’s important to ask: What are my assumptions about the user? About this solution? How might we test these assumptions?

There are many ways to validate an idea or assumption, depending on the amount of time and money you can invest in the project. The important thing to remember with validation is that it removes the guesswork from the design process. Here are some of the most common strategies used to validate ideas through user research:

  • Ideas can be tested very early in the process by putting out a smokescreen test. A smokescreen could be a landing page with a call to action (e.g., Sign up for my newsletter!) to test whether users want your product.
  • If you’re already in the design stage, you can validate your design by A/B testing two versions of the same page. This would allow you to see if one way of solving a problem is more successful than another.
  • Finally, you might want to create a clickable or coded prototype to see how users would navigate the system as you get closer to launch.

What happens once a product goes live? UX designers are constantly iterating, which is the process of continuously testing throughout a product’s life cycle. In fact, the UX process of learning about user behavior through research, translating insights into actionable strategies, and testing new products and features is designed to be repeated as often as needed. Building accessible, usable, and beautiful products is an ongoing evolution.

UX DESIGN BASICS at General Assembly

There are many ways to learn UX fundamentals at General Assembly. For the most in-depth experience, our User Experience Design Immersive (UXDI) introduces students to every step of the process while providing opportunities to apply skills directly through project-based learning with real clients. The 10-week-long Immersive is best for career-changers who want to transform their professional life. Our part-time User Experience Design (UXD) program, available on campus or online, is a great way to gain exposure to UX tools, techniques, and industry trends, and the eight-week Visual Design course covers a high-level overview of the practice and how it relates to visual design. You’ll also learn how UX impacts the product life cycle in the part-time Product Management course. If you’re just looking to learn more about UX and opportunities in the field, there are many workshops and events (such as the UX 101 Bootcamp) that can introduce you to the core concepts and best practices.

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 Instructor, GA Los Angeles

5 Ways to Inspire Your Design Teams

By

2018 99u Conference General Assembly

Tyler Hartrich, faculty lead for General Assembly’s User Experience Design Immersive course, leads a session at the 2018 99u Conference. Photos by Craig Samoviski.

As design educators, we at General Assembly prepare students for their careers — but how can we ensure designers continue to grow their skills beyond the classroom? Industry-leading work emerges from teams that persistently enrich themselves by fostering new skill sets and perspectives. But between deadlines, client fire drills, and day-to-day trivialities, a focus on growth can often be put on the back burner. In the long-term, this can result in uninspired designers who don’t grow to their full potential, and teams that opt for the easy way out instead of taking on risks, challenges, and explorations that drive innovation.

When Adobe approached General Assembly about leading a session at the 99u Conference — an annual gathering for creative professionals to share ideas and get inspired to help shape the future of the industry — we knew it would be a great opportunity to guide leaders in creating natural spaces for learning within their teams and workflows.

In our sold-out session “Onboard, Engage, Energize: Tactics for Inspiring a Crack Design Team,” Tyler Hartrich, faculty lead of GA’s full-time User Experience Design Immersive course, and Adi Hanash, GA’s former head of Advanced Skills Academies, shared insights on how directors and managers can structure spaces for learning within their teams, and encourage new approaches to problem-solving. The presentation was developed in collaboration with Senior Instructional Designer Eric Newman and me, GA’s director of product design.

At the event, we outlined the following five ways leaders can encourage their teams (and themselves) to keep learning and improving throughout their careers, including an exercise to spur creativity, reflection, and action. Read on to learn more, and find out how you can perform the exercise with your own team.

Continue reading

The Best Prototyping Tools for UX Designers in 2018

By

Best Prototyping Tools 2018After synthesizing user research and thoroughly uncovering problems to solve, user experience (UX) designers begin their design 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 workable prototype that can be tested for viability against the user’s goals and business needs.

Continue reading

User Interface 101: How To Make Intuitive Designs That Users Love

By

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 designersdevelopers, 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.

picture

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 colorstypography, 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.

Typography

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 Wheel

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

Buttons

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 typographycolor theory, and more.

Ask a Question About Our Design Programs

Meet Our Expert

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.

Paolo Sta. Barbara, Visual Design Instructor, General Assembly Sydney

Color Theory: The Emotional Impact of The Right Colors in Your Design

By

“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.

Color Theory

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 UXUIbranding, 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.

Palette Makers and Palette Theory

There are whole schools of thought around how to build a color palette and some fantastic tools to help you do it.

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

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

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

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

Split Complementary

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 productthe 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.

Ask a Question About Our Design Programs

Meet Our Expert

Susan K Rits is the founder and director of product design at Rits & Co. She teaches the User Experience Design Immersive course at General Assembly’s San Francisco campus.

Susan K Rits, UX Design Immersive Instructor, General Assembly San Francisco

Composition in Visual Design: How Design Influences User Perception

By

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.
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.

Skills Composition
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.

Skills Composition
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.

Ask a Question About Our Design Programs

Meet Our Expert

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.

Shawn Sprockett, Visual Design Instructor, General Assembly San Francisco

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

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