Background
Timeline
1 Month
Role
UI/UX Designer
Team
Product Manager x1
UIUX Designer x1
FE & BE & QA Engineers x 5
Responsibility
Research
UX & Interaction design
UI design
Most food manufacturers required their workers to follow strict process during the production, not only ensuring their process were compliant with authorities’ regulations, but also making sure that raw materials wouldn’t be contaminated by factories’ environment.
They needed customized user flows that every step could be flexibly combined and the needs of steps could be supported in their factories. Therefore, it required this company’s SaaS platform to provide all types of components on the web and app to configure their standard procedure.
Task
Context Research
To sort out all contexts required in the S.O.P. and create components to support the contexts when there weren’t existing ones.
Component Collection
To create web user flows to configure S.O.P. with the required settings in all components, and their corresponding app user flows on mobile devices.
Action
Product manager and I included all main SOP steps from the client in phase one, and planned to expand the required components for new contexts when they appear.
Luckily, the SOP from this client were relatively simple, they only needed a flow that could make sure their workers finishing all tasks in each steps before moving onto the next one.
Design
In order to better guide users to understand HOW different components’ settings go, each component always began with 3 basic settings, such as component name (控件名称), functions (属性), and types (类型) that select to extend all kind of components for different contexts.
For manufacturing-based components like production, quality inspection, and maintenance, I directly brought in the existing components and their user flows when users select them. Other commonly-used type like text, number, operators would require to define operable actions.
However, the most challenging parts was the configuration for web users (colleague graduate, high tech-savvy) to built a factory’s SOP on the webs, since app users (primary school graduate, low tech-savvy) would still use the same manufacturing-based components that they were already using in their daily work.
The S.O.P. of manufacturing production was based on the standard “ROUTING (工艺路线)” process of different products which this platform required users to prebuilt them into the platform, and then users could select a certain one to used in the basic settings during SOP configuration.
The complexity of each step varied, it could be just display some information to ask workers clean equipment, or it could include multiple sub-steps to go through a production process in a subsequential order.
Therefore, I provided step groups in 3 layers at top that allow users to group a certain set of components within one step. Also, beside component settings, there would be settings and restrictions that could be applied to the each step before app users could move on.
On the app, the SOP production would replace the original production (no restrictions on the steps of production order) when clients activated SOP production, each card as a production task would show steps (in structure) which users could know which was and wasn’t done.
Generally, a typical step won’t contain more than 7 components like “Dummy Data Demo” unless this step was guideline (Display) for a certain equipment. I showed overall components set in the app mockup of “Before & After the Input”.
Outcome
Clients were happy about the quick response and support. As their production process wasn’t really complex, the configuration for their SOP was smoothly finished by their web users. This feature was promoted to other similar clients after the implementation of this client.
You can also find me on 💁
- 👨🏻💻 Resume
- 🎨 Behance
- 📱 +61 493704787
- 📧 a870588@gmail.com