The style guide documentation is a work-in-progress. For example, version 1 of the guide has basic specifications.

Example of how components are documented

Later on, more usage patterns are added to the style guide. Version 2 also has a working prototype of how each component behave and is expected to work in the software.

The feedback from the developers and testers allow me to make improvements to the style guide. I find that having a working prototype allow them to understand a component better and this helps developers to code more efficiently.

“What is it that the user wants to achieve?”

With that in mind, I will then start to apply applicable UX processes to solve this problem.

Typically, I would reach out to the product management team for a brief on the feature or enhancement. Usually this information is provided in the form of a User Story. There will be question and answers during this phase and if the need arises we will also reach out to potential users to further understand the requirement.

Sometimes, I perform competitor analysis. However, I would prefer to have some sketches first before looking as what the competitor has. I do not want to be influenced by that.

Once I have sufficient information, I will then map out the flow diagram.

Example of flow diagrams that I mapped

Old school pencil sketches are the best and fastest way to develop ideas. It also cuts down turnaround time. Once the first few sketches are ready, I will reach out to my teammates with my paper prototype. From the feedback gathered, then I would improve on the sketches. Once the concept reaches firmer ground, I then start on my lo-fi wireframe.

Example of a low fidelity wireframe

Once the lo-fi wireframe is presented and is favourable, then I start on the hi-fidelity wireframes. This will be what the developers will build based on. I will also include style and interaction guides, and prepare the specification document.

Example of high fidelity wireframe

Once the build is complete and pass the unit tests, then the feature is ready to be released.

However, UX work does not just end there. I will document and add common widgets to the style library so that they can be re-used in the future. I will also work with the product and customer success teams to get feedback from users.