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-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.
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
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
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.
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.
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.
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.
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.
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?
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?
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.
Once uploaded, the user could move the artwork any where on the front of the model.
Once uploaded, the user could move the artwork any where on the front of the model.
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.
In fact, upload was becoming such a popular feature, my design thinking background began to question the very complexity of the legacy interface.
When we ask the question, "what's the most popular product on our website?" The answer was unequivocaly the pocket tee.
When we ask the question, "what's the most popular product on our website?" The answer was unequivocaly the pocket tee.
When we ask the question, "what's the most popular product on our website?" The answer was unequivocaly the pocket tee.
When we ask the question, "what's the most popular product on our website?" The answer was unequivocaly the pocket tee.
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?
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?
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?
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.
This gave us the ability to attract new customers like the streetwear fashion company Underground NYC.
This gave us the ability to attract new customers like the streetwear fashion company Underground NYC.
This gave us the ability to attract new customers like the streetwear fashion company Underground NYC.
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 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 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 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.
This is what Underground NYC was able to do with our new pocket artwork service.
This is what Underground NYC was able to do with our new pocket artwork service.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Selected Works
Big FisheCommerce
SpringboardInstructional Design
Elevated ThirdUX Strategy
UXPRENEURContent Strategy
HummDrumApp Design
Design For OneeBook
The UX GalleryCommunity Design
Artificial Intelligent Chat Bot For People 50-plusArtificial Intelligence Design Research | AARP
How to increase user engagement with UX writing.UX Writing CyberSecurity Legal Innovation |CYBERLUCENT
Crowdsourcing Data Science Designing SearchMachine Learning Society & CO
Increasing Engagement Amongst StakeholdersThe Design Lab at UCSD
Guerrilla Field Research For Anticipatory Design Increases DelightC2Group| SDG&E | Construction Management
Heatmap Analysis of Unmoderated Test Increases ConversionHeroX, PBC | XPRIZE Foundation, Inc.
Newsletter: Get notified of my next blog post. Sign Up Below.
©2023 All Rights Reserved Great2BNate, LLC.