When I joined Oracle Netsuite, they were starting to build what we call the UI Framework.
This framework's goal is to create more consistency throughout the suite by providing components that can be used to build any page. This was a very big project and I am to this date the only UX designer that is working on those components and ultimately Netsuite Design System.
At Oracle Netsuite I am in charge of building the components for the design system. This process involves redoing old legacy components but also building new ones from scratch.
User research
My PM will usually gather all the use cases that exist in order to prioritise one component over the other, so I get a Confluence page that shows all the different use cases I need to take into account when building a specific component.
Benchmark
I also use a list of competitors to look into their design system websites to take inspiration and test out their components. Usually we already have a component that exist and that I am revisiting so I will test it also.
Wireframes
This stage takes the longest time as it involves defining all the interactions of the component by mouse, keyboard and touch. We also need to think of all the edge cases, think of validations patterns etc. To see more in details this stage, go to theĀ Color Picker page of my portfolio.
Prototyping
As part of my intent to produce more detailed deliverables I started making these type of quick prototypes.
This prototype was made with Invision, and recorded via QuickTime. This helps explain the interactions for the developers to build the component, and can also be used to get feedback in the feedback session we hold weekly to showcase our current work.

This prototype was made with After Effects, using screens made in Sketch. I needed to show keyboard shortcuts used so Invision wasn't gonna give the same feeling as if I was animating it in After Effects. This was very quick to made and give a better feel of how the component works than just static wireframes.

Passing on to visuals and dev
At this stage, my work is pretty much done. The visual designer is taking my wireframes and delivers the visual specs with the design tokens for the developers to implement the component.

Visual specs, with design tokens for the devs

The component implemented in the catalog, view from the sandbox

Testing
Once the developers have built the component, QA step in and we double check everything works and looks how we wanted. If some changes have to be made, we create a new JIRA ticket to update for the next release if it's a big issue that needs more time, or it will be worked on in the same release if it's a smaller thing.
Back to Top