ICM “New order” form is an example of the multi-page form allowing user to perform custom order on SIM cards. The flow had to fit into existing interface and would provide the optimal user experience based on existing technical requirements of the back end.

Process:

The engagement started of with clear instruction of designing a single page form.

Upon first discussions with the project manager on future development plans of the “orders” section vs user needs, the technical requirements were captured around needed data entries, input types and constraints.

Separately the meeting with dev and BA team was held to go through relevant user stories to ensure that flow will reflect them all. It became clear to me that the layout needed to accommodate new features that were going to be added within future releases of the product, which conditioned my decisions around flow and UI.

Next steps included: research on patterns existing within the tool, understanding visual identity of the product, accustoming myself with team’s design system, creating initial wireframes and paper prototype to reflect suggested structure and aligning with the devs on proposed built.

Finally, the screens were built with the use of existing components, and modifications were created where needed. Below you can see the outcome of the ordering flow.