Case Study: Complex Software UX and UI Development

This greenfield project involved managing workshops to eastablish the detail allowing the creation of IA, task models, user journeys and accompanying UI. Iterative wireframing laid the foundation for interactive prototypes, that in turn steered the work of the developers.

Stage 1: discovery
Facilitation of discovery workshops with the product owner, stakeholders and end users to the gather functionality requirements and high level process flow.


Stage 2: requirements analysis
Recording and analysis of the results of the discovery research, used to inform process flows and mapping, IA, proto-personas and user stories.

Stage 3: wireframing and prototyping
Creation of skeletal UI layouts, complicit with the features and functionality identified during the discovery phase, and the subsequent task models and user journeys created from the process maps, IA and user stories.


Then creating interactive screens, replicating the formative UI and UX of task models and user journeys confirmed with the product owner’s approval of the user stories and wireframes.

Stage 4: user testing
Observation and evaluation of end user interaction with the prototypes. As part of the iterative design process, this stage of the development process is central to the ongoing improvement of the UI and UX, during and following production.

Stage 5: first-iteration design concepts
Initial visuals to discover a look and feel appropriate to the development.



Stage 6: hifi visuals
High-fidelity 2D visuals to illustrate the pixel perfect rendering and interplay of the UI design patterns.


Stage 7: style guide and pattern library
Collation of design patterns and styling protocol in an online directory, incorporating typography, working examples of design patterns, instructions for use and source code snippets.


Stage 8: frontend UI markup
Creation of fully interactive UI markup, in the form of a Bootstrap / Sass directory.