Product management guide Requirements management What is user experience design?

What is user experience design?

User experience (UX) design is the process used to determine what the experience will be like when a user interacts with your product. UX design has many definitions because it spans many areas of the design discipline. It encompasses traditional computer interaction as well as information architecture, visual design, usability, and user research.

Since the 1940s, UX has focused on the interaction between users, machines, and their contextual environments. In the 1990s, UX started to become a concern for designers due to the proliferation of workplace computers. The term user experience was coined by Donald Norman while he was vice president of the Advanced Technology Group at Apple.1

I invented the term because I thought ‘human interface’ and ‘usability’ were too narrow. I wanted to cover all aspects of the person’s experience with the system, including industrial design graphics, the interface, the physical interaction, and the manual. Since then, the term has spread widely, so much so that it is starting to lose its meaning.

Donald Norman2

Why is user experience important?

UX is the link between what you offer and your users. It can help decide if people come back to your product or if they leave. It is integrated into software development to inform feature requirements and interaction plans based on users’ goals. The benefits associated with UX design principles include:

  • Testing concepts to validate them before committing to code
  • Simplifying documentation while providing clear design requirements
  • Improving usability
  • Expediting design and development through detailed guidelines
  • Reducing the cost of ownership and support by producing a product that has an easy-to-learn design

What is the difference between UX and UI?

User interface (UI) design is often associated with UX design. At the most basic level, the UI is the series of screens, pages, views, and visual elements that you use to interact with a device, product, or service. UX is the complete experience that a user has as they interact with every aspect of your company's products and services.

Both design disciplines are crucial to the success of a product. But despite their collaborative relationship, the roles are entirely different. UX design is a more analytical and technical field, and UI design is closer to what most people refer to as graphic design. A complete product experience starts with UX and follows with great UI.

UX and PM: Who owns what?

With UX design playing such an essential role in the success of a product, designers in this discipline often collaborate closely with product managers. An easy way to understand who owns what is to think about the “what” as product management and the “how” as user experience.

The table below breaks down a few of the tasks and crossover functions between UX and PM.

User experience Crossover functions Product management
Information architecture User research Prioritization
Sitemaps Wireframes Business modeling
Interaction design User stories Data analysis
Prototyping Personas Stakeholder input
Visual design Competitor analysis Scope planning
UI sketching Product/market fit
Usability testing Roadmapping
Journey mapping KPI monitoring

Before completing any designs, it is important to note that the product manager should be setting the product's strategy. When UX designers have a clear picture of where the product is going and why, they produce new designs with the strategy in mind.

How can UX and PM work together?

UX designers and product managers can work incredibly well together in an iterative and collaborative way. Product managers can own the roadmap, which helps develop the UX designer's understanding of the industry and the technologies in play. On the other hand, UX designers can help mold the complete product experience so that it achieves both the user's and PM's objectives.

What tools do UX designers use?

Aha!
Aha! mockups is seamlessly integrated into Aha! — so that you can build wireframes, diagrams, and annotated images directly within your primary product management tool.
Atomic
Atomic gives you advanced interactive design features like logic, data, and variables, which are easy to learn and accessible to everyone. Control animation and events in precise detail.
Axure
Axure is a powerful wireframing and prototyping tool for websites and apps. Its software serves web and desktop apps with drag-and-drop replacement, resizing, and formatting options.
Balsamiq
Balsamiq is your computer on a whiteboard. Its rapid wireframing options help you quickly create mockups to share with clients.
Dunnnk
Create beautiful mockups for the latest devices. Upload your UI designs and download high-resolution mockups.
Empty States
Don't lead your users to boring blank pages. Empty States offers design templates for any user experience on any device.
Flat Icon
Need a glyph vector icon? This database offers more than 645,000 of them. As an added bonus, it has an Adobe plugin that lets you insert icons directly into your Photoshop or Illustrator files.
Flinto
Flinto is a Mac app used by designers around the world to create interactive and animated prototypes of their app designs. Features include sound effects, 3D animation, video layers, animated transitions, and more.
Framer
Framer allows you to design everything from detailed icons to high-fidelity interactions all in one place. Used primarily for prototyping, it allows you to draw, animate, and easily share your work.
Invision
Turn your web and mobile designs into interactive prototypes and mockups. Upload your design files and add animations, gestures, and transitions to transform static screens into clickable, interactive prototypes. You can also use their new platform, Invision Studio, which supports responsive layout, rapid prototyping, and seamless collaboration.
Mockingbird
An online wireframing tool that makes it easy to create, link, preview, and share mockups of any website or app. Drag and drop UI elements, link multiple mockups, and collaborate with clients and colleagues in real time.
Sketch
Sketch is a powerful option for graphic designers who need the best. Quickly reuse elements using features such as symbols and shared styles. Use features like extensive layer styles to create more complex shapes.
The Noun Project
The Noun Project is your marketplace of icons for anything and everything. It aggregates and catalogs symbols that are designed and uploaded by graphic designers all over the world.
UX Archive
Compare how other apps solve design problems. UX Archive is a library of mobile user experiences, screenshots, and animations for iOS apps.
UXPin
A design platform for advanced wireframing and user experience. Use its drag-and-drop option to add UI elements to any mockup across web, iPhone, and Android.

Whether you offer a product or service, every business can benefit from UX design. It can help you clearly understand the goals of your users and provide the guidance for building a successful experience.

References

1 Uxdesign.com, "UX Design Defined", 16/08/2010
2 Merholz, Peter (2007). "Peter in Conversation with Don Norman About UX & Innovation". Adaptive Path.

Get Your Mojo Back with Aha! Product Management Software

Roadmap software to manage your products.
Finally, connect strategy to execution.