I was given a few hours to work on a design problem. The case study outlined the parameters and a few insights. A few things that stood out to me were the 88% Campaign Page dropoff rate, 70% of visitors using mobile web browsers, and the tapering off dropoff rates through the checkout funnel. Before even looking at the site I new what to look for and which specific experiences to focus on improving.
The campaign Page
I dove into the campaign funnel and was able to see what I was working with. Right away I noticed that the call-to-action was disruptive. As I was scrolling through the page, there it was sitting at the bottom of the campaign page. I took note of this pattern to see how competitors were designing their calls-to-action.
Old Campaign user-Flow
From the website I was able to sketch out the current flow for the campaign page. I marked out where specific information was throughout the flow as well as the key areas relevant to the design problem. I highlighted some interesting areas that I would focus on during the research phase. I noticed that the first page of the checkout after the campaign page had a lot of different options. It was the heaviest page for options, things to press, and manage.
Note: There is newest version has an option to donate without buying a shirt, which reduced a lot of friction.
Research - Competitive Analysis
I learned a lot from my research and competitive analysis. One of the immediate competitor I looked at was Amazon, which I believe has reduced a lot of friction in their checkout experience. For crowdfunding competitors I researched GoFundMe and KickStarter to see how they displayed the status of their campaigns, how to share them on social media, and where the call-to-action was. For Tshirt purchasing sites I looked at Threadless, VistaPrint, and TSpring and focused on their organization of product info, how to select the options for your order, and the clarity for next steps to checkout. I highlighted areas relevant to the design problem. I was able to quickly create a benchmark of design patterns to work with and apply to a new Campaign Page user-flow.
Sketching out a new user-flow
Utilizing the same checkout funnel, I organized the information into what I felt was a more balanced flow. I wanted to create an experience that would be familiar to users based on other checkout experiences both digitally and physically. Due to time and budget constraints I wasn't able to research physical checkouts for this project so I based it on general personal experiences. I organized the content of the campaign page by consolidating the campaign info, removing a social media comment area, and placed the call-to-action under the product instead of floating at the bottom of the screen. The change was to flow into the checkout funnel easier and with less friction than before.
Sketch Wireframe - a/b test
In my research phase came across two patterns that I wanted to test: status bar above the product and another below the product. To complete the project I created two wireframes in Sketch with the new information structure. From this test I would be interested in learning if users were more inclined to buy a shirt and/or donate if they saw the status before or after the product. My assumption is that people will be more goal-oriented and will respond more positively if the status of the campaign is the first thing they see. I would be interested to see how accurate my hypothesis was, but at this point I had completed the design project and I had to submit my process.