Environment M

Environment M is an online management platform designed for monitoring and controlling warehouse environmental data through a remote system. The app allows users to efficiently track warehouse conditions and communicate with colleagues in real-time, ensuring smooth operations and timely responses.

Environment M

Environment M is an online management platform designed for monitoring and controlling warehouse environmental data through a remote system. The app allows users to efficiently track warehouse conditions and communicate with colleagues in real-time, ensuring smooth operations and timely responses.

Project Type

Project Type

School project

My Role

UX/UI Designer

UX Researcher

Team

Team

Cici Tan(myself)

Joey Liu

Shun Guo

Tool

Tool

Figma

Prototype

Timeline

5 weeks, April 2022

Challenge

Due to the global pandemic, many people have transitioned to working from home or hybrid models. However, factories still require extensive monitoring systems to detect abnormalities in warehouse environments. Workers need a platform that allows them to monitor and adjust warehouse conditions online. Most existing software only supports one-way data management and lacks the ability to facilitate effective communication between managers and employees. The challenge is to create a user-friendly solution that enables seamless communication and allows workers to manage warehouse conditions more efficiently in a remote setting.

Goal

This app is designed to facilitate remote collaboration between managers and employees, specifically focusing on warehouse environmental management. Managers use the app to assign tasks and remotely monitor warehouse conditions, while employees receive tasks and report their progress in real-time, ensuring seamless communication and operational efficiency.

Provided users with clear app usage information and allowed them to choose their role (manager or worker) when logging in.

Overall Review

Overall Review

Overall Review

Process

Manager can quickly view warehouse data through this page and make adjustments directly from their phone if any anomalies are detected, ensuring efficient monitoring and control.

Workers can quickly view tasks assigned by the manager on this page and communicate any issues by sending images, voice notes, or text messages, allowing for timely and efficient collaboration with the manager.

After deciding to focus our design on warehouse managers and workers, my team and I conducted interviews to better understand their real-life pain points. This allowed us to identify key issues and create more effective solutions. Based on our findings, we developed two personas to guide and refine the design process.

After defining the personas, my teammate and I quickly created a low-fidelity sketch on the iPad to help streamline the design process and guide our next steps.

After completing the low-fidelity sketch, I took responsibility for the manager section, while my teammates handled the worker section. Our team used Figma to develop a wireframe, building on the logic from the lo-fi sketch to create the final prototype.

To assess the final usability of the prototype, my team and I conducted two rounds of usability testing with 6 participants. Each round followed these tasks:

Task 1: Select the role you are assigned (manager or worker).

Task 2: The manager reviews and adjusts abnormal data, while the worker selects the tasks to be completed for the day.

Task 3: The manager assigns a task by selecting a random person to chat with, and the worker responds to the message.

Task 4 (optional): Explore the app and identify any issues or challenges.

This structured testing enabled us to assess how well the prototype addressed user needs and facilitated a smooth user experience.

To assess the final usability of the prototype, my team and I conducted two rounds of usability testing with 6 participants. Each round followed these tasks:

Task 1: Select the role you are assigned (manager or worker).

Task 2: The manager reviews and adjusts abnormal data, while the worker selects the tasks to be completed for the day.

Task 3: The manager assigns a task by selecting a random person to chat with, and the worker responds to the message.

Task 4 (optional): Explore the app and identify any issues or challenges.

This structured testing enabled us to assess how well the prototype addressed user needs and facilitated a smooth user experience.

To assess the final usability of the prototype, my team and I conducted two rounds of usability testing with 6 participants. Each round followed these tasks:

Task 1: Select the role you are assigned (manager or worker).

Task 2: The manager reviews and adjusts abnormal data, while the worker selects the tasks to be completed for the day.

Task 3: The manager assigns a task by selecting a random person to chat with, and the worker responds to the message.

Task 4 (optional): Explore the app and identify any issues or challenges.

This structured testing enabled us to assess how well the prototype addressed user needs and facilitated a smooth user experience.

Based on feedback from two rounds of usability testing with 6 participants, our team implemented the following changes to improve the design and user experience.

The final prototype video is here! 👇

For this case study, I chose moderately saturated colors as the primary palette to create a calm and balanced experience, ensuring users feel comfortable while using the app at work.

This was my first full UX design project, and I encountered challenges I hadn’t faced before. Throughout this project, I learned several key lessons:

  1. Defining the project scope is essential. At the beginning of our process, our team struggled to define the project’s scope, which resulted in wasted time when selecting clients. Establishing a clear scope at the outset is crucial, as it saves time and ensures a focused design process.

  2. Communication is key. As a team, we had never completed a UX design case before, making it a challenging task. Initially, we found it difficult to communicate our ideas openly and effectively. However, as the project progressed, we learned how to better collaborate and share our thoughts with each other.

  3. User needs should always drive the design. Throughout the project, we conducted several rounds of usability testing, from the initial concept to the final prototype. These insights allowed us to refine the app and create a better user experience, aligning with the core goal of UX design: to serve users effectively.


    These experiences have shaped my approach as a UX designer and underscored the importance of scope, communication, and user-centered design.


User Persona

User Persona

User Persona

Low-Fidelity Wireframe

Medium-Fidelity Wireframe

Usability Test

Major Improvement

Final Prototype

Final Prototype

Style Guide

Conclusion+ Reflection

High-Fidelity Prototype Overview

Onboarding page

Features page (manager)

Features page (worker)

Build by Cici Tan 2024