Client Brief
Client provided highly technical documents and asked for a Neumorphic UI. Deliverables included explanations, graphics with explanatory documentation and CSS code.
![Artboard Client brief original flow chart](http://stevesideas.agency/wp-content/uploads/2024/02/artboard-e1709070835525.png)
Client brief original flow chart
![Client brief PDF QD PDF document detailing the creative brief](http://stevesideas.agency/wp-content/uploads/2024/02/client-brief-pdf-qd-e1709070969182.png)
PDF document detailing the creative brief
![Screenshot 2024-02-27 at 1.48.52 PM Excel document accompanying the flow chart](http://stevesideas.agency/wp-content/uploads/2024/02/screenshot-2024-02-27-at-1.48.52%E2%80%AFpm-e1709070984347.png)
Excel document accompanying the flow chart
Solution
This project was wonderfully challenging and fun. After analysis of the provided documents, I returned a new flow chart with discussion. This led to a final flow chart for verification, and the design of the complex UI. Which was multi threaded with multiple encapsulated processes.
The UI was designed to minimize the possibility of errors and to provide user support. This was done by having multimodal icons that changed color and shape, signifying current status of every step, and implying, each processes encapsulation with neumorphic folders, layers, etc.
![Artboard New flow chart with questions](http://stevesideas.agency/wp-content/uploads/2024/02/artboard-e1709070803651.jpg)
New flow chart with questions
![QD flow chart Final flow chart design, verifying the process to be made into a UI](http://stevesideas.agency/wp-content/uploads/2024/02/qd-flow-chart-e1709070940728.png)
Final flow chart design, verifying the process to be made into a UI
![assay panel Examples of UI components including pop-up box, data, entry, buttons and multiple tab, test verification widget](http://stevesideas.agency/wp-content/uploads/2024/02/assay-panel.png)
Examples of UI components including pop-up box, data, entry, buttons and multiple tab, test verification widget
![assay panel nested processes Assay panel design with nested layers of processes](http://stevesideas.agency/wp-content/uploads/2024/02/assay-panel-nested-processes.png)
Assay panel design with nested layers of processes
0 Comments