[{"data":1,"prerenderedAt":177},["ShallowReactive",2],{"page-environmental-testing-app":3},{"doc":4,"isFallback":149},{"id":5,"title":6,"body":7,"description":147,"extension":148,"featureImage":20,"featured":149,"links":150,"meta":151,"navigation":91,"order":152,"path":153,"seo":154,"stem":155,"tags":156,"tools":159,"__hash__":176},"work_en\u002Fwork\u002Fenvironmental-testing-app.md","Environmental Testing App",{"type":8,"value":9,"toc":137},"minimark",[10,14,21,24,29,32,35,51,54,58,61,64,70,76,79,85,94,98,101,107,110,114,117,121,130,134],[11,12,6],"h1",{"id":13},"environmental-testing-app",[15,16,17],"p",{},[18,19],"img",{"alt":6,"src":20,"title":6},"\u002Fimages\u002Fenvironmental-testing-app\u002Flegionella-mobile-feature.jpg",[15,22,23],{},"I was the sole designer on a mobile client for Spartan's Legionella Test, working with a mobile developer to bring a laptop-based system to iOS and Android. Most core features were designed and built before the project was cancelled when the company wound down.",[25,26,28],"h2",{"id":27},"the-problem","The problem",[15,30,31],{},"The original system ran on a laptop connected to the Spartan Cube via cable, one laptop per Cube, wired. Facilities managers running tests across larger sites needed multiple systems, had to manually check each laptop for results, and were dealing with a significant physical footprint. The system worked; real-world use had made the limitations clear.",[15,33,34],{},"The redesign addressed these directly:",[36,37,38,42,45,48],"ul",{},[39,40,41],"li",{},"Mobile control replacing the dedicated laptop",[39,43,44],{},"Wireless connectivity via Bluetooth Low Energy (BLE)",[39,46,47],{},"Support for monitoring multiple Cubes simultaneously",[39,49,50],{},"Results pushed to a remote server",[15,52,53],{},"Core features from the original were carried over: a guided test workflow, step-by-step instructions, and a searchable result log.",[25,55,57],{"id":56},"structure-and-wireframes","Structure and wireframes",[15,59,60],{},"I began by mapping the app's structure around use cases rather than data types, arriving at five sections: test workflow, Cube status, result log, settings, and water source management.",[15,62,63],{},"Wireframes followed for the key screens. The instruction screen needed primary actions reachable without stretching on large phones, which ruled out several top-heavy layouts early. For the result log, I worked through four approaches before the wireframes showed that a segmented list with sticky headers gave the best balance of information density and ease of use.",[15,65,66],{},[18,67],{"alt":68,"src":69,"title":68},"Instruction screen wireframes","\u002Fimages\u002Fenvironmental-testing-app\u002Finstructions-wire.png",[15,71,72],{},[18,73],{"alt":74,"src":75,"title":74},"Log screen wireframes","\u002Fimages\u002Fenvironmental-testing-app\u002Flog-wire.png",[15,77,78],{},"Navigation was an open question. I built a prototype in Adobe XD, loaded it on my phone, and ran hallway tests. The bottom bar layout won; participants liked the quick path to starting a test, and found the result log card on the landing screen confusing.",[15,80,81],{},[18,82],{"alt":83,"src":84,"title":83},"Landing screen wireframes","\u002Fimages\u002Fenvironmental-testing-app\u002Flanding-wire.png",[15,86,87],{},[88,89],"video",{"src":90,"controls":91,"muted":91,"style":92,"poster":93},"\u002Fimages\u002Fenvironmental-testing-app\u002Fnavigation.webm",true,"max-height: 400px;","\u002Fimages\u002Fenvironmental-testing-app\u002Fnavigation-poster.png",[25,95,97],{"id":96},"design-and-prototype","Design and prototype",[15,99,100],{},"After wireframing I moved to Framer, writing a fully interactive prototype with live data and coded interactions. This was the primary handoff tool; the developer flagged anything that couldn't be implemented or needed revision, and we worked through it together.",[15,102,103],{},[88,104],{"src":105,"controls":91,"muted":91,"style":92,"poster":106},"\u002Fimages\u002Fenvironmental-testing-app\u002Fprototype.webm","\u002Fimages\u002Fenvironmental-testing-app\u002Fprototype-poster.png",[15,108,109],{},"The Cube status screen required a workaround for BLE's fundamental limitation: Bluetooth only connects 1-to-1, which would have broken multi-Cube monitoring entirely. Working with the developer, we landed on reading the advertising packets Cubes broadcast passively rather than maintaining a continuous connection. For a running test, we combined a timer (tests take just under an hour) with any packet updates available when in range. Users out of range when a test completed got a notification; those nearby received the result from the BLE advertisement directly. Cubes could also be given meaningful names, and the result log supported filtering.",[18,111],{"src":112,"alt":113,"title":113},"\u002Fimages\u002Fenvironmental-testing-app\u002Fapplied-filters.png","Applied filters",[15,115,116],{},"One problem that wasn't resolved before the project ended: the result filter's double slider. The range of meaningful values was tightly clustered at the low end of a 0-1000 scale, making it difficult to use precisely. The fix was planned (replacing it with checkboxes) but wasn't scheduled before cancellation.",[25,118,120],{"id":119},"development","Development",[15,122,123,124,129],{},"I extended the design tokens from ",[125,126,128],"a",{"href":127},"\u002Fwork\u002Fschedio","Schedio"," in Theo to add a TypeScript definition format and React Native-specific transformations, giving the developer a consistent styling foundation. I also contributed to styling code on the implementation side.",[25,131,133],{"id":132},"outcome","Outcome",[15,135,136],{},"Most core features were designed and built before Spartan wound down. The project didn't reach production, but the design work held up; the wireframing and prototype process uncovered real usability issues early, and the BLE constraint produced a workable solution that would have been genuinely useful in the field.",{"title":138,"searchDepth":139,"depth":140,"links":141},"",2,1,[142,143,144,145,146],{"id":27,"depth":139,"text":28},{"id":56,"depth":139,"text":57},{"id":96,"depth":139,"text":97},{"id":119,"depth":139,"text":120},{"id":132,"depth":139,"text":133},"Run the Spartan Legionella Test with your phone.","md",false,null,{},5,"\u002Fwork\u002Fenvironmental-testing-app",{"title":6,"description":147},"work\u002Fenvironmental-testing-app",[157,158],"Design","Mobile",[160,164,168,172],{"name":161,"img":162,"href":163},"Adobe XD","\u002Fimages\u002Ftools\u002Fxd.svg","https:\u002F\u002Fwww.adobe.com\u002Fca\u002Fproducts\u002Fxd.html",{"name":165,"img":166,"href":167},"Framer","\u002Fimages\u002Ftools\u002Fframer.svg","https:\u002F\u002Fwww.framer.com\u002F",{"name":169,"img":170,"href":171},"React Native","\u002Fimages\u002Ftools\u002Freact.svg","https:\u002F\u002Freactnative.dev\u002F",{"name":173,"img":174,"href":175},"Theo","\u002Fimages\u002Ftools\u002Ftheo.png","https:\u002F\u002Fgithub.com\u002Fsalesforce-ux\u002Ftheo","1doCl4mLyfZLvTFMYIyKvQujPDW4L9OrkW6Orvj78a4",1782790338187]