eCommerce Innovation Through Crowdfunding and Wholesale

Apliiq, Inc.

2013-2016

About Apliiq.com

Apliiq is a fashion e-commerce business based out of downtown Los Angeles. Situated strategically between the arts & fabrics districts and American Apparel, their staple product was the Pocket T-Shirt. At the turn of 2013, Karmaloop, their main revenue stream, filed chapter 11 bankruptcy. That's when I join the team. While, I wore many hats, my role was that of Lead UI/UX Designer. I was brought on to:

Mobile: Re-design the company website and configuator (aka "customizer") to be mobile-friendly.
SEO: Help rank #1 for 9 search keywords on Google.
SVG: Pioneer the use of scalable vector graphics as oppose to outdated rasterized PNG
eCommerce: Increase CRO of entire sales & marketing funnel or user flow.
Reposition: Move the market from D2C to B2B
Button Color Test: Multivate test amongst red, black, yellow, and green.
Branding: Enable the brand to be identified in the smallest places.

Mobile-Friendly

Inspired by a mobile navigation called "corner nav" by then Greg Nudelman principal of Design Caffiene, I proactively Guerrilla Usability Tested the design at a local coffee shop called E-Street Cafe in Encinitas, CA where the demographic persona was in high concentration.

I tested the corner nav against the hamburger menu. While the hamburger menu proved difficult to use, the corner nav was more intuitive to user behavior. It narrowed down the choices the user had, and enabled higher task completion rates for shopping and checkout. Qualitative testing validated the user interface, we turned to Google Analytics which in turn showed a 300% increase in Newsletter signups. This was a key performance indicator for the company.

Configurator

It is widely known that adding a "configurator" is a lead magnet. In some instances it can increase CRO by 40%. At Apliiq, we called it the "Customizer." It had a 0% Bounce Rate. Not sure how much more "engagement" one could yearn for. At any rate, the most important conversion metric for an ecommerce business is checkout conversion rate. In this case, it too was low. I was tasked with increasing the conversion rate of the already highly engaging "customizer" or more widely known as a configurator.

Challenge

At first it was difficult for the team to imagine the "customizer" as "mobile." Mobile was still pretty new concept back in 2013. Yet, I was able to use my knowledge of CSS to rearrange the layout where the tabs were at the bottom. In response, however, I had to use "anchor scrolling" to take the user to the next selection.

SEO

In response to third party revenue stream drying up, we had to pivot almost solely to organic search from Google. This made SEO of upmost importance to the team and business. In efforts to achieve this, the team and I created an internal link cloud of links that gave way to pillar content and helped utilize our authority in the space to rank #1 for 9 different search words.

Ranking #1 on Google SEO with internal Link Cloud

SVG Innovation

Making the website responsive wasn't all smooth sailing. We had legacy PNGs that were rasterized and so didn't scale well. Rather than re-photographing every original image, I instead suggested utilizing a new tech feature called "scalable vector graphics." This in turn allowed the interface to scale on all devices and serve the correct size fabric image.

eCommerce Checkout

D2C to B2B

One day at a Starbucks in San Marcos, CA, I was conducting my usual Guerrilla Usability Testing when I came upon a college coach. During the test everything went smoothly, until checkout. That's when the coach realized he couldn't checkout in bulk for his team. The team and I spent the next month working solely on the checkout experience concerning buying in bulk. As a result, our average order price went from $100 to $1K per order. In turn, it created a bit of a problem at our downtown manufacturing headquarters with production behind schedule because we were swamped with bulk orders.

Button Color Test

Multi-variate Test Using Google Analytics

Using color psychology and theory, I noticed during a UX Audit that the website's buttons were mostly red. Red in color psychology can send distress signals. Could it be possible that a simple button color change could improve conversion? The answer is yes. After conducting a thorough multivariate test amongst black, red, yellow, and green we found "green" to be the winner by a small margin over yellow. However, stakeholders at Apliiq favored yellow over the green due to branding guidelines. I also see yellow as a good color, because it unified the flow with PayPal checkout. Paypal was one of our top checkout methods, so yellow matched that at the time.

Color Theory and Branding

The choice was between analogous or complementary. To avoid the Christmas brand I utilized a red filter over both green and yellow. In addition, I pulled the green into a blue to build trust. With yellow, I pulled it into the orange for a goldenrod bringing it closer to the brand identity of black, red, and white.

Reflection

Yet, I'm not completely satisfied with this test, because the yellow button wasn't accessible. It wasn't accessible because we used white button text on a yellow background. I did manage to add gradient shades, and text-shadow with CSS, but I didn't really learn about accessibility until a few years later in my career.

Storyboarding

In this storyboard, I'm illustrating the different contexts the target user persona, in this case metropolitan millennial hipsters, live throughout their day. You can see the how the "one thumb one eye" behavior plays a pivitol role in usage when considering mobile.

Mobile-First Wireframes and User Flows

Here are sketches of the first user flow for mobile. You cand see the corner navigation being ever present at the beginning of ther user flow, yet when the filter is open it covers the navigation to focus on the plethora of product options and customizations.

Multi-Variate Testing

Every time the visitor would return to the website, there would be a new fabric pattern as the background image. This design beat the original website design in consecutive A/B tests.

I believe this page out performed the orginal because of the following; no scroll, encapsulated call to action, and the "why" (Revolutionize Consumption) as the headline.

Every time the visitor would return to the website, there would be a new fabric pattern as the background image. This design beat the original website design in consecutive A/B tests.

I believe this page out performed the orginal because of the following; no scroll, encapsulated call to action, and the "why" (Revolutionize Consumption) as the headline.

Every time the visitor would return to the website, there would be a new fabric pattern as the background image. This design beat the original website design in consecutive A/B tests.

I believe this page out performed the orginal because of the following; no scroll, encapsulated call to action, and the "why" (Revolutionize Consumption) as the headline.

Every time the visitor would return to the website, there would be a new fabric pattern as the background image. This design beat the original website design in consecutive A/B tests.

I believe this page out performed the orginal because of the following; no scroll, encapsulated call to action, and the "why" (Revolutionize Consumption) as the headline.

A/B Test Results

Although, the corner navigation performed well, the "Netflix style" horizontal shopping experience reduced conversions.

Therefore, we had to re-design the shopping page.

This was the new mobile shopping experience. It did not fair well in A/B testing on desktop. The Netflix style horizontal sliders may have performed well on mobile, but it just wasn't a significant enough boost.

That corner nav was hot though!

This was the new mobile shopping experience. It did not fair well in A/B testing on desktop. The Netflix style horizontal sliders may have performed well on mobile, but it just wasn't a significant enough boost.

That corner nav was hot though!

This was the new mobile shopping experience. It did not fair well in A/B testing on desktop. The Netflix style horizontal sliders may have performed well on mobile, but it just wasn't a significant enough boost.

That corner nav was hot though!

Results

An A/B test concluded that the corner navigation on mobile had a 300% increase in newsletter signups. This increased new customer acquisition, all because mobile-first forced our team to make the tough decisions. What were the 4 most important navigation items?

An A/B test concluded that the corner navigation on mobile had a 300% increase in newsletter signups. This increased new customer acquisition, all because mobile-first forced our team to make the touch decisions. What were the 4 most important navigation items?

Here is a screenshot of the original "upload your artwork" button. It allowed you to upload any image you wanted, and place it on the shirt.

User contributed artwork increased sales exponentially. They rather buy their own artwork, instead of something predetermined.

Here is a screenshot of the original "upload your artwork" button. It allowed you to upload any image you wanted, and place it on the shirt.

User contributed artwork increased sales exponentially. They rather buy their own artwork, instead of something predetermined.

Here is a screenshot of the original "upload your artwork" button. It allowed you to upload any image you wanted, and place it on the shirt.

User contributed artwork increased sales exponentially. They rather buy their own artwork, instead of something predetermined.

Once uploaded, the user could move the artwork any where on the front of the model.

In fact, upload had become such a popular feature, my intuition began to question the very complexity of the legacy interface.

In fact, upload was becoming such a popular feature, my design thinking background began to question the very complexity of the legacy interface.

How simple could we make the user interface?

How much simpler could I make the user interface?

When we ask the question, "what's the most popular product on our website?" The answer was unequivocaly the pocket tee.

It was time to distill the experience down to its essential value proposition.

In this video you can see how the user can upload their artwork into the pocket through a very distilled user interface.

I handed coded this SVG and jQuery interaction experience.

In this video you can see how the user can upload their artwork into the pocket through a very distilled user interface.

I handed coded this SVG and jQuery interaction experience.

In this video you can see how the user can upload their artwork into the pocket through a very distilled user interface.

I handed coded this SVG and jQuery interaction experience.

In this video you can see how the user can upload their artwork into the pocket through a very distilled user interface.

I handed coded this SVG and jQuery interaction experience.

The demand for customization from customers never ceases to amaze. With the sermounting pressure from our customer base, we had to come up with a way to mass produce pocket tees with custom artwork, and embroidery. With a pile high stack of orders on our workshop table, how we're we going to be able to keep up with demand?

In order to afford the level of customization our customers were craving, and to have the capability to meet their demands, we needed an embroidery and laser machine.

This is the Kickstarter video for our crowdfunded campaign.

In order to afford the level of customization our customers were craving, and to have the capability to meet their demands, we needed an embroidery and laser machine.

This is the Kickstarter video for our crowdfunded campaign.

In order to afford the level of customization our customers were craving, and to have the capability to meet their demands, we needed an embroidery and laser machine.

This is the Kickstarter video for our crowdfunded campaign.

In order to afford the level of customization our customers were craving, and to have the capability to meet their demands, we needed an embroidery and laser machine.

This is the Kickstarter video for our crowdfunded campaign.

We did it!
Successfully raised $25K+ in just 30 days time.

We did it. We were successfully able to raise revenue by $25K+ within just 30 days time.

This gave us the ability to attract new customers like the streetwear fashion company Underground NYC.

This was when our product started to really take strides. The combination of Underground NYC's photography and our product began the avalanche of what would ultimately help move the market.

This is what Underground NYC was able to do with our new pocket artwork service.

How were we going to scale this new magnificent product?

At the time, people hadn't quite caught up to Underground NYC and their intense movitivation to start their own brand.

Yet, there was a demographic that was. College students.

How were we going to scale this new magnificent product?

At the time, people hadn't quite caught up to Underground NYC and their intense movitivation to start their own brand.

Yet, there was a demographic that was. College students.

How were we going to scale this new magnificent product?

At the time, people hadn't quite caught up to Underground NYC and their intense movitivation to start their own brand.

Yet, there was a demographic that was. College students.

How were we going to scale this new magnificent product?

At the time, people hadn't quite caught up to Underground NYC and their intense movitivation to start their own brand.

Yet, there was a demographic that was. College students.

Here I've used a child theme in Wordpress, in order to build a real prototype of a gamification system for reps to sell Apliiq apparel through their own streetwear brand.

Gamification

I was able to use Achievements Plugin for Wordpress in order to add Gamification to the rep program. This gave all reps an incentive to compete against one another in effort to sell the most apparel.

What we see in the left, is the leaderboard. Notice how more than one rep was able to increase revenue by $3K+ within a months time. So, those points on the left, they're equivalent to dollars per month.

I was able to use Achievements Plugin for Wordpress in order to add Gamification to the rep program. This gave all reps an incentive to compete against one another in effort to sell the most apparel.

What we see in the left, is the leaderboard. Notice how more than one rep was able to increase revenue by $3K+ within a months time. So, those points on the left, they're equivalent to dollars per month.

I was able to use Achievements Plugin for Wordpress in order to add Gamification to the rep program. This gave all reps an incentive to compete against one another in effort to sell the most apparel.

What we see in the left, is the leaderboard. Notice how more than one rep was able to increase revenue by $3K+ within a months time. So, those points on the left, they're equivalent to dollars per month.

With the recent success of our crowdsourcing efforts with Apliiq Campus. We noticed alot of users were going from the Apliiq website to IndieGogo or GoFundMe to fund their brands. So, we decided to build our own crowdfunding platform dubbed, Apliiq Campaigns.

Right out of the gate our new product launch was a great success. With the Beanie Sanders Campaign successfully funding. This, among others, proved the value of crowdfunding and crowdsourcing together.

I was thumbing through FlipBoard at the time, when I happened upon this ad by SAP.

This ad has stuck with me since, and has really rang true.

With Apliiq, I learned first hand, we've got to let go of legacy user interface, because it complicates things. We end up bug fixing and rigging things together just to work.

It's best to start out fresh, with a clean slate, and ask the 5 "Why's" on new projects. This is crucial to Design Thinking.

I was thumbing through FlipBoard at the time, when I happened upon this ad by SAP.

This ad has stuck with me since, and has really rang true.

With Apliiq, I learned first hand, we've got to let go of legacy user interface, because it complicates things. We end up bug fixing and rigging things together just to work.

It's best to start out fresh, with a clean slate, and ask the 5 "Why's" on new projects. This is crucial to Design Thinking.

I was thumbing through FlipBoard at the time, when I happened upon this ad by SAP.

This ad has stuck with me since, and has really rang true.

With Apliiq, I learned first hand, we've got to let go of legacy user interface, because it complicates things. We end up bug fixing and rigging things together just to work.

It's best to start out fresh, with a clean slate, and ask the 5 "Why's" on new projects. This is crucial to Design Thinking.

Secondary Visual Design Research

In this video, you can see how I applied the secondary visual design research, from the above references, to the visual design of the software product and intended physcial product itself.