CASE STUDY
How HiFi Built a Mobile App on Salesforce to Help SOLVE Drive Engagement AND Streamline Operations
SOLVE is famous for helping Oregonians keep their state’s coastline beautiful and healthy through volunteer cleanup events. Over the years, SOLVE has expanded beyond the beach, providing opportunities for diverse communities to improve the health and safety of all Oregon’s neighborhoods and natural areas, restoring and preserving the environment by mobilizing the power of volunteers and partners.
Change Demands Innovation
The pandemic brought stark and startling changes to our urban ecology, putting incredible pressure on our civic services, and in turn the health and safety of our communities, particularly in the Portland metro area. Many urban areas and ecosystems were overwhelmed by trash.
To pitch in and leverage their unique expertise, SOLVE began making a bigger commitment to the metro area, and that put a serious strain on the organization. HiFi and SOLVE began a discussion around a central theme: what tools could we deliver to take pressure off of SOLVE staff and enable them to make a bigger impact, faster?
A mobile app felt like the most powerful choice to accelerate the process. If we could enable volunteers to do the expensive and time-consuming steps of locating and photographing potential clean-up sites, all in the context of their daily lives, we could free up SOLVE staff to do what they do best, putting resources in the hands of volunteers stewarding their communities.
Discovery
During the discovery phase, we came to a vital strategic conclusion: this project could NOT deliver another complaint line. This could not be a “tell us where the trash is” app that’s tied to a variety of other civic databases. The solution had to align with the SOLVE brand, to be about engagement and empowerment of the SOLVE community as we dealt with our collective challenge of human and ecological safety. Said another way: we figured out that we needed to connect with the community’s most committed volunteers, not the most relevant databases.
To codify our discovery, from goals to outcomes, and to give us a North Star by which to make the myriad micro-decisions a project like this demands, we put together a Value Map. We don’t always do a map like this, but this is a make-or-break step for some projects, particularly when it’s easy to build the wrong thing for the wrong audience. This document also influenced our technical architecture, as the long term vision helped us align the foundational tech to the wings and additions we anticipate making down the road.
Blurred to hide details
Value Mapping
A Value Map is one-pager that connects the high-level objectives of a project or engagement, through a capability matrix, all the way to the impact and measurements required to analyze results. This is a great tool for establishing a North Star for a multi-phase project.
With a Value Map in hand, we had a shared vision to guide the project: the app would enable volunteers to share potential cleanup sites directly with SOLVE, providing timely engagement while building relationships and affinity; and SOLVE staff would see streamlined processes and immediate data in Salesforce to help them do what they do best, provide resources that help the community help themselves.
Technical & Visual Design
Once we had identified our target audience, developed a clear sense of what we needed in the short term, articulated a longer term vision of success, and established boundary conditions around budget and time-to-market, we got to the business of design.
TECHNICAL ARCHITECTURE
We architected the app mostly within the Lightning framework exposed on a public Experience Cloud site.
We chose Lightning Web Component (LWC) solutions because they are incredibly flexible and can be as small as a single component designed for a page in Lightning Experience or as complex as a fully-featured standalone application. For this app, we’re somewhere in the middle as we have a standalone mobile-first app with its own visual design, and just a few fairly straightforward pages and user interactions.
Using a publicly available Experience Cloud site enabled us to create direct, secure access for users that were not going to necessarily login but still could save data directly to Salesforce. This also gave us the flexibility to move to a login-based solution for superusers in the future.
In some situations we needed a little more than the Lightning framework could offer. When it came to the map component, we needed a little more flexibility, and so we’re using Leaflet, the leading open-source JavaScript library for mobile-friendly interactive maps. Similarly, the LWC file upload options did not meet our requirements for the photo upload process, and so we are using a standard HTML input and custom JavaScript code to handle processing and resizing the photos before saving.
Usability + Power vs. Cost
This is one of HiFi’s specialties: we’re excellent at finding a balance of usability and power against the cost of development and maintenance. We seek out productive tension to push the boundaries of what we can do within a given budget, and leverage every existing, reusable pattern we can find that fits the needs.
WIREFRAMES
With a first pass of technology & tools determined, we jumped into wireframing to define general interactions & rules, looking for boundary conditions and negotiating on where to spend our budget. We heavily utilized the Salesforce Lightning Design System (SLDS) to keep costs down by leveraging these well-designed patterns, only going custom where the user experience demanded the investment. If you’re not using these patterns, you should be at least reviewing them first before customizing your own.
With a pass complete, we began stripping away everything we didn’t need to create a simple, streamlined user experience that operates on top of a maintainable, cost-effective technical strategy.
Blurred to hide details
VISUAL DESIGN
With wireframes in hand, we used SOLVE’s existing branding guidance to layer colors and design patterns to make it feel like a SOLVE experience, again using tools and patterns from SLDS to paint the existing structures in a pleasing way.
We iterated the visual design against our technical and financial boundary conditions to create a very simple app that was easy to use.
Blurred to hide details
The Mobile App and the Salesforce Interface
A few weeks later we had an app in hand. The app leverages a phone’s GPS and camera functions to easily capture location and pictures and send a short narrative along with the submission directly into the back office staff’s queue of site evaluations.
It’s simple, easy to use, and well designed to meet SOLVE’s goals. Very cool!!
“HiFi demonstrated a deep understanding of SOLVE’s mission and objectives. Their technical expertise, attention to detail, and commitment to delivering high-quality results were evident throughout. The result is a visually appealing and highly functional app that is easy to navigate.”
- - Kris Carico, CEO of SOLVE
SALESFORCE INTERFACE
One huge benefit of this new app is that key information for potential cleanup sites, including location and pictures, are automatically posted to Salesforce for SOLVE staff to review in the normal course of business. So not only are volunteers engaged but the back end processes that were stressing staff are streamlined so they can process more potential events in less time.
Blurred to hide details
Blurred to hide details
FIELD TESTING
HiFi staff grabbed our buckets, strapped on our boots, and attended several cleanup events in the Portland Metro area, where we shared the app with SOLVE volunteers to get a sense for its actual ease of use. We learned a few vital things, and importantly confirmed that the app required no instruction to use - it just made sense and seemed useful, that was the goal! And we found some simple ways to tweak the layout to make it even easier to use, all while picking up trash and meeting some very cool people that care just as much about Oregon as we do.
THANK YOU
We’d like to send a huge ‘Thank You!’ to all the dedicated SOLVE volunteers and leaders that show up and show out to keep our state safe and healthy for all of us, and for all that will follow us. We appreciate you!
HOW TO SUPPORT SOLVE
SHOW UP!
If you’re local to Oregon, please visit https://www.solveoregon.org/getstarted to get started on your volunteer journey!
DONATE!
If you can’t volunteer, and if you have the means, consider donating at https://www.solveoregon.org/donate.
Tech & Roles in this Project
Salesforce products: Salesforce Enterprise Edition; Lightning Experience; Experience Cloud Site via mobile
Applied tools & tech: Lightning Web Components (base, extended, and custom); Salesforce Lightning Design System; Salesforce Location Service API; Leaflet
HiFi's roles: strategy; outcome discovery & facilitation; technical architecture; interaction design & user experience; programmatic & declarative development; project management