Nonprofit organizations rely on charity events to raise their profiles and encourage charitable giving.

Unlike corporate sponsors who commit large gifts in advance, individual donors lack the ability to donate in real time.

uBack is a technology start-up that seeks to facilitate charitable giving for nonprofits. By leveraging image recognition technology in its current mobile app (available for the iOS and Android OS), uBack is “focused on driving cost saving and higher supporter engagement rates,” particularly at charitable events, bringing together donors, nonprofits, and corporate sponsors. Donors can support their cause of choice on the spot.

However, the apps were developed by separate teams, with stylistic and functional differences between them. Through an engagement with DESIGNATION, UX and UI were completed by small teams in two 2.5 week design sprints across overlapping cohorts. Building on a new UX foundation— and the already established uBack brand guidelines—my project team was tasked with UI, unifying the two versions of the app.

Our team began a short period of intensive research into the charitable giving space. To gain a holistic understanding of the domain, we looked at various mobile platforms, from both direct and indirect competitors: Charity Box, Charity Miles, Givelify, March of Dimes, One Today, and Stand4; successful financial apps: Acorns, Mint, PayPal, and some our clients’ favorite apps outside the giving and financial domains: Uber and Google Play, examining each for content, voice, and design.

Across the platforms we analyzed (even as we looked at apps as diverse as charitable giving, personal finance, and transportation), there were two very important commonalities: accessible information written in a friendly, straightforward manner and a (relatively) frictionless financial transaction experience. Design and style defined a much broader palette, which allowed us to explore diverse visual languages.

Our client Keynote presentation deck is available as a PDF via the download icon below.

Upon completing the research phase, we were tasked with individually developed three distinctly different style tiles. Style tiles can be a challenging exploration starting from scratch. Fortunately, the uBack guidelines provided rules to both obey and defy. With a subdued color palette of indigo, silver-grey, and purple, various accent colors were added to make the designs pop.

My tiles began with a style that closely adhered to uBack’s existing brand, then moved to a visually dynamic approach through the use of diagonals that was quite divergent from current mobile design, and finally to a limited-but-still-bright monochromatic approach inspired by PayPal and Mint, while leveraging and uniting a diversity of cause-based imagery.

The uBack team was thoroughly engaged during the design process and were excited by all the options presented to them. With well-considered and detailed feedback on all of our stylistic choices, our individual directions were clear when proceeding to high fidelity screen designs.

Of the three style tiles I presented, the uBack team was particularly drawn to my use of large-scale, caused-based imagery, bold typography, and modestly manipulated uBack color palette that allowed for accent colors in lilac and orange.

Working from the recently completed annotated wireframes, my final high fidelity designs (executed for both iOS and Android OS) leverage full-screen imagery, starting with the startup screen and continuing throughout the entire proposed app experience.

All that cause-based imagery, however dynamic, can verge on verisimilitude. So the nonprofit and campaign listings make clear use of nonprofit logos for easier user recognition and app navigation. And most importantly, the donation flow strives for simplicity, limiting the screen number to four (for uBack donor account holders).

The final InVision prototype provides a glimpse of what the final product would look like and how it would function. I am very satisfied with the designs as they definitely deliver upon the initial design prompt.

The entire uBack team were a pleasure to work with throughout the process, providing insights and feedback at each phase.

And I certainly wouldn’t be a team player without acknowledging the excellent work executed by my UI teammates, Shaleenee and Lainey. Examples of which are included in the client presentation deck PDF downloadable here.

In addition to a full set of high fidelity screens, we each delivered a style guide, detailing imagery and typographic treatment throughout the app.

Combining annotated screens with the traditional style guide, this final deliverable serves as a useful working document for the uBack team as they [re]develop the app.

Details not discernible in the page thumbnails here can be viewed in full via the downloadable PDF link below.