UX Case Study

uBack

Working from completed UX wireframes, produce high-fidelity screens and style guide for app development.

Background

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.

Problem Statement

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.

Competitive Analysis

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.

Visual Design Process

Design Exploration & Style Tiles

Upon completing the research phase, we were tasked with individually developing 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.

Final Design Solutions

App Screens

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, fights for attention. 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).

Style Guide

Final assets also called for a 12 page style guide.

  • "One of Daryle’s standout strengths is his ability to simplify complex problems and translate them into ultra-intuitive, elegant solutions. He demonstrated this by taking a predominantly paperwork, owner-to-renter process and transformed it into a mobile-first experience. He also brings a deep understanding of accessible design and was instrumental in guiding both our design and engineering teams toward building inclusive components that serve a broad range of users."

    — Ben Richard, Product Design Leader

  • "Daryle is a superb human being, kind, funny and caring. He brings those qualities, plus his incredible design skills, to his work day in and day out. Daryle thinks about the entire 360 of his work, from the impact his designs have on engineering to how the end user will experience them. He took the lead on accessibility for our team, continually sharing valuable guidance with designers and others in a way that was easy to understand and act on. On top of all that, he always has a smile and a music recommendation (probably someone you’ve never even heard of) at the ready."

    — Sara Womack, UX Writer & Content Strategist

  • "Daryle is a very skilled designer who devotes a lot of time working with engineers and other designers to build sophisticated UI. He was involved with several projects I worked on, and I couldn't get over just how many designs he created that covered every aspect of the feature. His designs are clean and very pleasing to the eye. I appreciated that he was always available to answer questions whenever needed. He was also the first designer I've worked with who was interested in the data behind the designs. Highly recommended!"

    — Marty Miller, Senior Android Developer

  • "I had the pleasure of working with someone that was both a brilliant designer and friend. Daryle and I collaborated for over a year across various projects and building out our design system. Daryle is incredible at providing thoughtful feedback, and I was most stricken by how valiantly he could represent the customer throughout the product experience. His positive attitude will be missed, but I look forward to following his impeccable DJ holiday sets. I highly recommend Daryle if you need a great design lead!"

    — Chije Wangati, Senior Product Designer

  • "Daryle is an exceptional UX professional with a keen eye for detail and an obvious passion for the user-centered design process. He has demonstrated a consistent ability to influence product strategy by leveraging data and insights, along with a natural ability to clearly articulate the rationale behind his decision-making. I have no doubt that Daryle's experience will help elevate any design/product team and I am thankful for the opportunity to have worked with him."

    — Dion Alexander, Product Design Consultant