Plants of Concern + Budburst

Chicago Botanic Garden

Tighten worked with the Garden to help citizen scientists preserve rare plant populations, understand the effects of climate change, and enjoy nature.

The Challenge
Create elegant mobile and web-based apps that are highly usable for experts and novices alike, while enabling the codebase to be maintained by a very small team.
The Plan
In order to keep the number of technologies more manageable, we chose to build React Native mobile apps, consuming data from Laravel-powered APIs, with content managed by Statamic.
The Outcome
The Garden now owns two beautiful, synchronized, easily-maintainable, API-powered hybrid mobile applications, each with its own elegant, content-managed companion website.
Prior to 2019, Plants of Concern volunteers used pen-and-paper to take field measurements, bringing them back to the computer for spreadsheet entry, which were circulated via email before being merged into a central database. The Garden hoped to replace this brittle, error-prone process with a fun and reliable one using the phone in volunteers’ pockets. They engaged Tighten to develop a simple, comprehensive solution based on React Native and Laravel. Building on the success of the Plants of Concern app, the Garden also engaged Tighten on its related Budburst project.

Big projects, small team

In 2019, several members of Tighten traveled to The Chicago Botanic Garden’s immensely beautiful grounds a few miles north of Chicago to kick off the Plants of Concern project. The Garden had begun the process of replacing their volunteers’ pen–and-paper process with a web app, but needed Tighten’s help building out an API, designing and implementing a mobile app, and developing a more comprehensive companion web site.

We didn’t know it at the time, but they had another large and complex project coming down the pike later that year, and we’d soon be brought in on the tech side of Budburst as well. At this point they had just a single programmer on staff who would be responsible for maintainin their existing suite of web sites and all of the the work we would deliver.

Because the client’s ability to maintain our work post-project would be limited, we placed a premium on simple solutions that kept the number of technologies and codebases that we would leave in our wake to a minumum. This imperative challenged our ability to balance conflicting needs: Solve a bunch of disparate, complex, interrelated problems without continuing to expand the scope of our work outward, leaving a mess in our wake.

We were able to use React Native to create one code base per mobile app (instead of separate one for Android and iOS) and to write the apps using JavaScript and React. This allowed the Garden’s team to limit their work to web-related technologies, rather than requring them to add capacity in Java, Objective C, or Swift. We used the existing Laravel codebase to build out an API, and built a learning tools and sales sites on Statamic, a Laravel-powered CMS. All of these choices shared a primary goal: allow the existing team, potentially with a new full-stack hire or two, to maintain a large suite of mobile and web-based applications.

Three images of various stages of a design process; wireframes, a design system, and app mockups
Iterative UI/UX design process

Tighten’s design team works, and shares work, iteratively. We don’t just throw a finished design over a fence once we’re done; we involve our clients in the process every step of the way. This was vital in our work with CBG, where we were helping their team define UX flows, building component systems, and creating a design system that matched their existing brand, all long before finalizing the designs.

A graphic illustrating multiple ways users can interact with the Budburst mobile app
Mobile app design & development

In some ways designing mobile apps is similar to designing the "mobile" view of a web site. In other ways, it couldn’t be more different; the paradigms, constraints, and expectations are often hugely different between the two mediums. Similarly, React Native promises a development experience much closer to web app development, but in practice the process is much closer to native mobile app development. It’s still a young framework and a new set of paradigms, but it’s one we’re glad to have plenty of experience with.

A screenshot of a filtered search interface for plants
Meilisearch-powered plant search

“Create a search bar for our data” — doesn’t sound that complicated. “There’s a ton of data” — still not bad; we all know how to index MySQL queries. “Make it wildly filterable for power users.” OK, that’s a bit more. “Also, make it usable for non-power users. And make it work on mobile.” OK, now we’re cooking. What seems like a simple task can sometimes balloon when you add just a few small variables. Using our expertise with responsive UX challenges and our familiarity with MeiliSearch (an open-source alternative to Algolia), we were able to build a new-and-power-user-friendly, mobile-friendly, performant search experience.

Screenshots of multiple steps of the process of taking a picture with the app and then sending it to iNaturalist for identification
Identify plants with iNaturalist API

For the Budburst app, we needed to allow users to take a picture of a plant and get a suggestion back of what plant it probably is. Thankfully, there’s an API for that! iNaturalist worked with us to expose their plant identification API so we could call it directly from the app. We deal with APIs every day, and every new API poses a new challenge — which format to send, which to request, how the API handles errors, and more. And calling third-party APIs from mobile apps, with content you retrieved from system-level APIs (the camera, in this case) can be even more daunting. But we’re proud to have delivered a seamless, functional experience integrating data from disparate sources.

A graphic containing multiple screenshots of a 'show your plant on this map' mobile UI
Interactive user-contextual map

Most programmers have, at some point in their careers, been asked to put a dot on a map. This map, however, has hundreds-to-thousands of entries and needs to prioritize entries near the current user’s location. Our team built a context-aware map that focuses on entries near you, clusters map items that are near each other, and “spiders” them out when you hover over a cluster. We wrote a whole blog post about the specific geospatial challenges we faced on the project.

“In addition to Tighten’s technical expertise, their open communication style, connections within the Laravel community, and willingness to share their knowledge resulted in the development of fantastic products across multiple platforms. They treated our developers as an extension of their own team, which resulted in a seamless product transition, as well.”
Bianca Rosenbaum
Lead Software Engineer
Chicago Botanic Garden

Treat people well, solve the right problems, and build spectacular software. That's how we roll.

Hey, let’s talk.
©2024 Tighten Co.
· Privacy Policy