Beckett — iOS Prototype for IoT Tank Monitoring
Designing a mobile interface that gives field customers real-time visibility into oil tank metrics — where clarity isn't just a UX goal, it's a safety requirement.
The problem
Field customers managing oil storage tanks had no real-time visibility into tank levels without physically checking on-site. Beckett needed a mobile experience that surfaced critical metrics clearly — for users who are often in low-light, high-pressure conditions with limited time to interpret data.
The design challenge was making complex sensor data legible at a glance, with clear visual hierarchy between normal states and conditions that required immediate attention.
My role
I designed the iOS React prototype end-to-end — responsible for user flows, information architecture, wireframing, and high-fidelity prototyping. I also conducted edge-case design validation to ensure the prototype accurately represented data in boundary conditions: full tanks, empty tanks, sensor errors, and offline states.
Design process
I started by mapping out the key user questions: What's the level? Is it normal? What do I do if it isn't? That hierarchy drove every layout decision — leading with the number, supporting it with trend, and surfacing alerts only when actionable.
Edge-case validation
A key part of the process was designing for what goes wrong — not just the happy path. I worked through edge cases systematically: what does the UI show when the sensor loses connection? When the tank hits 100%? When historical data is unavailable? Each scenario was prototyped and validated before handoff.
Outcome
Delivered a fully documented prototype with annotated user flows, low-to-high fidelity screens, and edge-case state coverage. Presented to stakeholders with design rationale and user research backing, advocating for the decisions that best served field users under real-world constraints.