My role
At Oracle Netsuite I am the main UX Designer for the CORE part of the UI Framework, which makes me responsible for delivering all the wireframes and interactions related to the components we add into the design system.
This toolkit is based on Netsuite Software components. As a result, some components might not seem standard to UX kits but they were part of the library I built for my deliverables for the UI Framework.
Some components
Process
All components have been built from the smallest element to creating a whole group of components, to be able to make even bigger combinations and templates that would allow the whole UX team to just pick and place on an artboard and deliver wireframes faster.
View of the text styles used in the library
All components are built using these, which make it easy to interchange them to fit the user's needs.
This shows how the components are first build from elements, then made into components, and then into templates by combining components. A simple list item will use the primary border with 0 radius for example, but if you want to change and make it look focused, then you just change the border to focused-0. This gives a lot of place to customisation and is very practical for detailed interaction wireframes.
Complex components fitted to Netsuite
This is a progress tracker, as part of defining the specs all these options seemed valid and fitted to our users' use cases. Some other components don't have as many states included in the toolkit because on the first version of it, we tried to keep it as simple as possible, without many colour treatment, to keep it as low fidelity as we could.
However, I soon realised that we had to include more states and colours in order to make the wireframes clearer for the developers.
Above are examples of states applied to field text and text areas. They are interchangeable easily in the overrides without a lot of effort.
Building kits
These symbols hold a lot of other symbols in one, they are super practical to drag and drop to build those complex components instead of going in the Insert menu to add manually each item. You simply detach them and then pick and choose which state you need and build your complex component.
I got a great feedback from the team when I introduced those so I'm happy I came up with that.
