Group Gifting

The Problem

Akin to The Sciences, where information flowing freely between practitioners is critical for efficient conceptual evolution, Design is best done right out in the open among cooperative teammates. Further, compartamentalization stifles the entire scientific method in the same way how walled gardens blind the whole design process. This wisdom, like so many other lessons before it, would have to be learned the hard way.

During the time where I was focused on designing and delivering the Gift Card Experience, we had other designer(s) tasked with handling Group Gifting's UIUX. The business-driven thought behind this method was that both apps would be designed in parallel - in separate company subsections, ostensibly to avoid distraction - then both "Gift Card Experience" and "Group Gifting" would find cohesion once the development cycle would be set to begin. This may make sense from a business chart's lens, yet it didn't account for the human variable where all designers are clearly not the same, given skillset, knowledge, experience and speed.

Fast forward a few months and my "Gift Card Experience" was humming along, development smoothly executing upon it, while Group Gifting's UIUX was lagging. When it finally came time for our front end developers to see what the other designer(s) came up with, catastrophe struck. The designs were not mobile responsive, they broke logical flow, elements were scattered everywhere... to the point Development refused to write any code towards it, correctly claiming it'd be a total waste of time.

I'll never forget our panic-struck project manager coming to me and literally saying: "Reilly, we need you to save Group Gifting. Like, right now." Timelines loomed heavily on our horizon, and so I jumped into the fire. Being my "Gift Card Experience" solution was already in a happy place, I had the bandwidth and icy veins to help.

Our officers asked me, at first, to do what I could to salvage the v.0.1 design that I inherited, yet to little avail. Confined to the design's restrictive quarters, I still managed to break it into pieces to form something of a loop, yet upon presenting it, I advised our officers it was still far too clunky. Seeing my point illustrated before them, the decision was made for me to start from blank.

Thankfully, I was able to pull several business rules from the broken design, so not all was lost. Luckily, I was familiar with the major crowdfunding apps, having played with GoFundMe and Kickstarter, for instance. Thus my path was clear, so I performed a formal competitive analysis of GoFundMe's campaign organization flow, noting they broke large decisions into smaller "fragments" to reduce cognitive load while saving the user's progress along the way. Much of my design for "Group Gifting" would come to be inspired from their methodology, especially in the "Standalone" version which would, in time, be leveraged to create the "Brandable" versions for clients.

My technique and approach made natural sense given the fact GoFundMe was massively popular, and so users' familiarity with the platform would be another benefit I could leverage by following its pacing. Add onto this the inherent familiarly of Google's Material Design, and my path to pull the app from design disaster was clear.

Primary Personas

Given her mass appeal focus and ADA Compliance perspective, I kept my "Barbara" persona from The Marketplace for Group Gifting. I added Jessica who would be our main crowdfund app campaign organizer and Joe, who would act as a recipient at first, then convert into an organizer and contributor after recieving a crowdfunded group gift. Their professions are by design, given that our first main targets were schools and faculty.

Flow Diagrams: Iterative A vs B

We tested many variations of the overall organizer flow for the Group Gifting app while keeping our personas in mind, favoring approachability, ease of use, and familarity. All the while, we kept the app fully featured so we could scale its complexity easily given client incoming requests. As one method tended to gain prevalence, we got closer with each iteration forward.

Lo-fi Micro Decision Fragments

Rather than having the user go through a lengthy decision making process when creating a crowdfunded campaign, I broke each decision into a low cognition fragment. One thought, one action. I also performed competitive analysis on GoFundMe and drew inspiration from their method to increase familiarity of what was the most widely used crowdfunding app in the world.

Group Gifting Standalone v.2.1

One huge advantage of using a series of fragments in the organizer flow was we could re-arrange them in any order to test for user interest retention. After many iterations primarily made for our internal discourse, I took screens and color treatments from previous iterations to see if the decisions and overall UX made sense, regardless of their mid fidelity look, then tested their sequence further.

Organizer Flow

Setting up a crowdfunding campaign might go a little something like this

Play Prototype

Contributor Flow

Throw some bills in the digital envelope and help make someone's day

Play Prototype

Further Flow Diagrams: Iterative A vs B

Continuous prototype iterations and user testing kept bringing our ideal flows into clearer focus.

Group Gifting Standalone v.3.1

An iterative improvement having a cleaner, simpler, tighter look. Once we had the main structure solid, we focused on fleshing out the other sections.

Organizer Flow

Clearing up some stumbles and tightening sections to improve upon our previous versions

Play Prototype

Contributor Flow

Favoring negative space and hot focal areas, I improved the page's design clarity

Play Prototype

Admin Upgrades

Some new components were introduced to the flow, thus campaign management evolved in parallel

Play Prototype

Further Tightening

Taking the “Group Gift for Myself” scenario, this focuses in on sharpening the initial steps of the Organizer Flow

Play Prototype

Physical Cards in Group Gifting

Expanding upon the digital gift delivery methods and overall flow, we added physical addresses, shipping methods, and more brand options.

Shipping Variant

Upgrading my battle tested designs with Physical Cards proved to be fun and straightforward

Play Prototype

Group Gift Physical Card Flow

Check out the Organizer's lens when setting up a campaign that'd result in a physical card

Play Prototype

Group Gifting Lite - Brandable - 3 Step with No Preview

I imagined a placeholder brand called “ZenEngine” to house temporary assets for high fidelity prototypes, which would be efficiently asset-swapped for client demos. My method earned us rapid business expansion with near-zero developer time investment. Further, this 3-Step method proved attractive for many clients who wanted crowdfunded features to extend their own applications, rather than a branded standalone app as shown previously.

First Contact Organizer Flow

Run through setting up a campaign in 3-E-Z steps

Play Prototype

Verify Email Bridge

Don't miss this critical juncture point

Play Prototype

Contributor Flow

Easily throw pennies into the magic hat so dollars come out

Play Prototype

Inviter

Supercharge your campaign's success by sharing it far and wide

Play Prototype

Recipient Flow

The final culmination of the Group Gift experience

Play Prototype

Log In, Sign Up

A cleaner version of painless authentication

Play Prototype

Forgot Password

What to do when "password" isn't working anymore

Play Prototype

Admin Area

A minimalist take on Group Gift management, scaled down for simplicity

Play Prototype

Organizer Logged In

Here are some steps that are streamlined when the organizer is logged in

Play Prototype

Group Gifting Lite - Brandable - 4 Step with Preview - A vs B Test

Building upon what we learned from all previous iterations, this solution zero'ed in on more finely tuned details. Asking our users to use each flow, I conducted user interviews afterward, compiling their impressions to guide our continuous improvement. This resulted in rock solid, user vetted products, which we would then present to many future clients with fully informed confidence.

Organizer Flow - Method A

Fewer elements, less narrative, and with login wall presented right before launching a campaign. This leverages the fact that the user is already invested.

Play Prototype

Organizer Flow - Method B

Encourage and congratulate the user as they progress forward, with an account creation stumble before hitting the pre-launch login wall.

Play Prototype

Key Takeaways

Measuring the results via user interviews of each prototype, here are some of the insights with their summated commentary:

Most users skipped over the “Contibution Settings” on Step 1, commenting they were fine with the default being that everyone chips in the same. When asked why, some commented that having to make any decision about someone else's finances felt imposing or unfair. Some voiced concerns that making that decision may also negatively impact their campaign's long-term success.
Most users didn't like "Edit" being too early in the process, since it made them question themselves. They commented that it also felt having to second-guess themselves increased their anxiety or discounted their own trust in their previous decisions.
Many users liked the three options being "Manage", "Contribute", and "Invite" at the end "Launch" screen. They liked the sense of choice and freedom to play with the campaign they just created in the way they saw fit.
Many users liked that Step 4, reading "Launch", was displayed at the top, since it gave them an encouraging target to aim for as they went through the campaign creation process. Despite having only 3 steps at the top looking simpler, most users preferred having a visible goal ahead of them.

Contribution Manager

Now that campaign creation was satisfied in multiple methods, group gifts could be at various states in their progression through time and engagement. Therefore, the Contribution Manager gave campaign organizers admin features to take context-driven actions, given the group gift's state.

Active Group Gifts

This defines the views and actions users can take so long as the group gift remains "live", or hasn't been delivered yet.

Play Prototype

Closed Group Gifts

Once the group gift has been delivered to the recipient, or the campaign's time has expired, here are what users can do.

Play Prototype

Held Group Gifts

Credit card errors may hold up contributions towards a campaign. If the group gift has to be delivered on Christmas Eve, here's the failsafe.

Play Prototype

Complete Group Gifts

When everything goes right to plan, organizers may bask in their accomplishment as well as continue forward in making a new one.

Play Prototype

Group Gifting Lite - Williams Sonoma

Here’s one sample of my solution evolved forward to cater to one of our clients, Williams Sonoma. It shows the latest app iteration as well as my "Flat Design" UI variant applied to it. Certain clients such as Express and Hotels.com preferred my Flat Design over my default Material Design, which clients such as Target and HBO favored. Given my CSS definitions, we could switch between the two styles instantly, merely updating shadows, border radius, and form labels.