User experience (UX) and user interface (UI) design also called as UI/UX are two very complex topics. They include a number of different disciplines and each one of them complements another. User experience design or UX is a group of different skills focused on creating an environment for digital product, customers and how they interact with their devices. While user interface design is mostly focused on the aspects of the screen, the buttons, the visual representation of the elements, and other navigational aspect of a digital product.
To make a good user experience, the designer needs to collect the necessary information about the users as well as about the different use cases, call to actions, and functionality of the system. As the result of that work, the designer can start putting together an information architecture (IA) of a product. Based on the data the next step could be creating a simple wireframes on the screens. On that face, it's very important to think about the highest priority features to make sure they all of them addressed on the draft screens. Once it's done, the UI/UX designer can put together a quick interactive prototype in InVision or other tool. Handing off this prototype to the key stakeholders is crucial and allows to clarify all the scenarios and features. After this interactive prototype is tested, the designer can add more details to the screens and start working on the interface design.
On the interface design phase the goal is to clarify all the edge cases that were not defined on the interactive prototype. And then apply the visual brand identity design of the brand to the screens. It means applying the colors, the typefaces and iconography style consistent with the existing brand. In addition to that, the interface designer should create animations and different interactions of the screens. They will serve as references for the developers in future stages. When all the screens ready and consistent with information architecture created on the previous stage, the next thing is putting together another interactive prototype, but based on the final screens. This prototype can be handed off to potential customers stakeholders and other people involved not just in decision-making process, but also in usability sessions and other activities focused on defining the quality of the interface and the future product.
If you designed the screens in applications like Figma, then all of the elements that you used on the screens will be accessible in the component library of the application for development team. They will use these components, screens, interactive prototypes, and animations and interactions to start developing the product. It is very important to have UX designer who created the screens involved in the development process and quality assurance of the design during the development phase. Usually, this phase takes long time, sometimes it requires pivots, making changes in the structure of the interface and working with different limitations. It's always better to simplify things remove some features and leave the the highest priority ones. Then ship the product to the customers and test, measure and then reiterate the design again. Some people call this approach Agile.
We can continue explaining differences in terms such as UI and UX, but I would not dive deeper than the details I mentioned above. I hope this was helpful for you to understand the general meaning behind these two complex terms in digital product design.
