UX and UI Design
Before we dive into UX, let’s clarify the difference between User Experience (UX) and User Interface (UI) design. Think of UX as the experience of going on a road trip, and UI as the stop lights, signs, and lane markings that shape the events on the road. The appearance of the stop lights, signs, and lane markings each had to be designed (like the UI of a website or app), but how they all affect your driving experience defines the overall user experience (UX).
What Do UX Designers Do?
UX designers are responsible for creating a customer experience that is easy, intuitive, and anticipates the customer’s needs. UX designers are generally concerned with the total customer experience including the ease of finding information within the product and accomplishing tasks quickly, easily, and enjoyably. (UI designers focus on visual elements such as graphics, typography, color, and composition.)
The following are primary tasks of UX designers, that you would learn in our UX design classes:
1. User Research & Product Development
A good first step for a UX designer is product and concept development, which includes researching existing users and creating user personas based on this research. A UX designer may conduct user interviews and contextual research (observing users do an activity in their usual everyday environment).
2. Wireframes, Prototypes, & Mockups
After UX designers have an initial idea of what the product should do and what the customer experience should entail, they move on to wireframes, prototypes, and mockups.
Wireframes:
Text Bank Wireframe- iteration by Mark Congiusta. CC BY 2.0
Wireframes demonstrate where content goes, and how the app or website functions (screen by screen). Wireframes are typically drawn by hand or designed on a computer in grayscale with minimal color, text, and images. The wireframe should be detailed enough to explain the purpose of the product and also present the specific layout to achieve that purpose.
UX designers make the most changes to the layout, structure, and functionality of the product at the wireframe stage. Because designers draw wireframes by hand, the time investment and development costs are minimal. At the end of the wireframe phrase, some companies send the wireframes to developers to code the core structure of the app, while others move on to the prototype or mockup.
Prototypes:
The prototype is an interactive representation of how the product will operate. The prototype is a functional version of the concept without code or final UI design, letting the UX designer test out ideas quickly without expensive development costs. It can demonstrate paths between pages or screens and animations within the design. UX designers may present the prototype design to a client and do user testing with it. Many of the UI decisions happen after the prototyping phase. Prototypes can be built with apps such as Sketch, Photoshop, Adobe XD, and InVision (to name just a few).
Mockups:
A mockup is a high-fidelity, static representation of the product. The mockup stage is where designers choose the colors, typography, etc. The mockup takes time to develop, so UX designers typically don’t get to this stage until they are sure about the features and flow of the app or website. The mockup is usually created with apps such as Sketch, Photoshop, and Adobe XD.
3. Usability Testing
User testing is an important part of the UX design process. UX designers demo a prototype to prospective users, so they can understand a user’s pain points while using the product, and suggest improvements. Sometimes users won’t notice or interact with a particular button or will propose a new feature. Here are some of the different forms of usability testing:
- Observation: Users are given access to the product while in the presence of the researcher who watches the user interact with the product.
Example: Researchers observe how long it took the user to find the “order” button. - Questionnaires: Users are given access to the product and asked to provide open-ended feedback about their experience or answer a list of questions.
Example: Users answer questions such as “Did you experience any bugs while using the app?” - Recording: Users are given access to the product, and their experience is recorded via screen recording software and shared with the team.
Example: Researchers examine the screens and pages that users spend the most time browsing.
4. Communication
Good communication skills are important for a UX designer. UX designers must explain a product to users in plain English, then translate customer feedback to the developers writing code, clients, digital marketers, and other stakeholders who don’t understand the technical language of design. For UX designers, the ability to communicate with individuals of differing technical expertise is essential.
5. Product Improvements & Feedback
UX designers make adjustments to the product based on research and user feedback. These adjustments can include changing the layout of screens and order of information, adding or removing features, and altering the interface to make the customer experience more intuitive.
Should I Study UX or UI Design?
Keep in mind that though UI and UX are distinct fields, they overlap and smaller companies may combine these roles. At a 10-person company, a UX or UI designer may do research, UI design, and development tasks. At a large company, UX designers may focus on a single aspect of UX (research, design, user testing, etc.) and a UI designer may focus exclusively on the visual design.
Study UX Design if you:
- Enjoy conducting research, data analysis, and A/B testing.
- Want to work with customers as well as developers and designers.
- Prefer designing customer experiences over graphical elements.
Study UI Design if you:
- Enjoy designing layouts, working with colors, typography, etc.
- Prefer to work with UI/Visual design tasks, rather than customers.
- Want to work with developers and designers, rather than customers.