User Experience & User Interface related snippets and examples
Here are some snippets from various UX UI projects that showcase different aspects of the design and development process, as well as some deliverables. Due to confidentiality agreements, only parts of the projects are shared instead of the entire content.
Employing the Double Diamond approach can prove invaluable in providing a clear visualization of the design process.
Specifically, it helps identify the optimal point of convergence between research and the decision of when to transition into the creation phase.
A few examples and snippets from various UX UI projects showcase graphical animations explaining Lean UX principles. The second example is a snippet / cut-out from a Design System.
Clear notifications for page and website elements, along with a definition of their functionality and how they fit into the Design System. A draft user journey for booking a ticket or trip starts with the user searching for available options. A likely user Persona example with relevant content.
The Design System is created to allow for the growth and development of the website in a flexible and scalable manner. It emphasizes the importance of elasticity, modularity, and scalability in order to meet the changing needs of the website over time. The initial design system includes standardized typography, color usage, and layout guidelines to create a cohesive and consistent user experience.
Once the page elements were accepted, they were placed on a low fidelity wireframe where the basic functionality of each element was noted. This served as the foundation for the front-end skeleton. Once the low fidelity wireframe was finalized, a high fidelity wireframe was created, which refined the design and added more detail. The high fidelity wireframe then formed the basis for the final design and development of the website.
The Design System includes initial styling and descriptions of its components, along with their corresponding code. The primary objective of the Design System was to establish a clear understanding of the website's purpose, the process behind its creation, and the reasoning behind specific design choices.
•
The extended document consists of, among other things, a guide on how to expand the website while maintaining the current layout. It details how to re-use existing elements, code, and components for a redesign in case the layout needs to be changed.
•
This Design System places a greater emphasis on the philosophy guiding the design rather than rigid rules that must be strictly adhered to.
