UI/UX Design Portfolio: Year 6 Edition
HELLO RAVEN
Case Study
How might we create an engaging logo redesign contest while utilizing Web3?
0 to 1 Design
End-to-End UX
External Partnerships
Omnichannel
Project Management, Software Engineering, User Experience, Behance (External Partner), DressX (External Partner), & Interpop (External Partner)
Lead UI/UX Designer
End-to-End UX
Visual Design
8 Months
Figma
Adobe Illustrator
Adobe Photoshop
Voting Experience
Auction Webpage
Informational Webpage
Display Ads
Social Media Graphics
Web Graphics
Design Research
User Flow Diagrams
Low-Fidelity Wireframes
High-Fidelity Wireframes
Prototypes
UI Assets
Gap Inc.
Apparel Retail
Crypto
Web3
Fact 1: This was a global event where anyone could participate.
Fact 2: Not all interested parties were knowledgeable about the Web3 elements of the event
Fact 3: This experience was going to be hosted by an external partner.
Fact 4: Overall, the purpose of Gap Logo Remix was to engage with our community in a bigger way than before and to end the year with a bang; therefore…
Solution: Let’s make this experience as interactive as possible!
The business needs for this event were pretty straightforward; however, there were multiple user needs and personas to design for. After understanding those needs, I did some design research and then started creating user flows.
After creating user flows to map out Gap Logo Remix, I started wireframes. While doing so, a major project shakeup occurs, causing the team to make some fast decisions.
The team found a solution after the major project shakeup and pivoted from our original event plans. Since the launch date was approaching soon, I quickly iterated on what I originally created to deliver on time.
So, how did we create an engaging logo redesign contest while utilizing Web3? The team’s strategic decisions were validated throughout Gap Logo Remix, thanks to achieving great numbers and community praise.
My Takeaway: Be adaptable, because requirements can drastically change.
The Gap innovation team, Gap Threads, successfully finished our third Gap x (Artist) collaboration. What came next was a big event that would close the year: Gap Logo Remix.
Imagine creating a work of art that won you a large sum of money and was featured on clothing from an iconic brand. Well, that’s exactly what happened to 3 lucky winners of Gap Logo Remix, a global, community-driven contest that allowed fans of the Gap brand to redesign its iconic arch logo. The top 3 winners won a cash prize, auctioned their art for charity, and displayed their art on various types of Gap hoodies:
Non-fungible token (NFT) hoodies available for purchase on Interpop or the Tezos marketplace, objkt.com (currently, only offers are available)
Gap Logo Remix was split into five phases, with each needing its own set of marketing material, social media & web graphics, and, of course, UI/UX designs:
This was a global event where anyone could participate.
This was a big user base; however, like with our past artist collaborations, the Gap Threads team targeted past audiences: users with basic knowledge of cryptocurrency and non-fungible tokens (NFTs).
Not all interested parties were knowledgeable about the Web3 elements of the event (cryptocurrency and NFTs).
Again, the team targeted past audiences: users with basic Web3 knowledge; however, fiat was available as an alternative method of purchase.
This experience was going to be hosted by an external partner.
What were their development constraints? How much of the experience could we control?
Overall, the purpose of Gap Logo Remix was to engage with our community in a bigger way than before and to end the year with a bang; therefore…
How might we create an engaging Web3 contest?
How might we create a beginner-friendly Web3 experience for an engaging art contest?
How might we create an engaging logo redesign contest while utilizing Web3?
Let’s make this experience as interactive as possible!
Gap Threads, the team behind Gap Logo Remix, was responsible for keeping the Gap brand up-to-date with the latest technological trends. The business needs for this event were pretty straightforward:
Gap Inc. is a Fortune 500 company after all.
Giving users the ability to purchase items was planned for the event finale; however, how were we to encourage users to stick around until then?
Within the experience, we advertised purchase windows with compelling copy to help inspire users to make a purchase. For example, the planned auction was for charity; therefore, it was advertised as a charity auction.
This is Gap after all!
This was the fun part! At the time, Web3 user experiences had a lot of character, reminiscent of UI designs from the late 90s to early 2010s. How would I channel that?
While still adhering to accessibility guidelines and the Gap Threads branding, I designed an experience with lots of character.
Due to the nature of this event, there were multiple user personas to design for:
As an artist interested in participating, I need to understand Gap Logo Remix, so I can be fully informed about the opportunity.
On the informational webpage, allow users to learn about…
Since the event dates were really important, I placed them in two locations: right underneath the banner (for a quick rundown) and near the end of the page (for an in-depth explanation of what occurs during a particular event phase).
Beneath the top event date section, I added an “About Gap Logo Remix” area to explain its purpose. As the event unfolded, this section was updated with more relevant copy.
I created a monetary prize summary that was placed beneath the “About Gap Logo Remix” section. While financial incentives can strongly influence participation, this placement just gave a more logical flow for the page.
As an artist, I want to upload my submission to participate in Gap Logo Remix.
Allow users to submit artwork.
Due to our external host falling through, the team decided that we were going to have users submit through a branded, third-party form. The Gap Logo Remix informational page had the link to perform that action.
As a voter, I want to engage with submissions I care about, so they have a chance at winning.
Allow users to vote for multiple submissions. For validation, ensure voters can only vote once per submission.
When users voted for a submission, the button would display how many votes that particular design received. If they were to click again, it would remove the vote. There was worry about cheaters, and I did want to have IP address limitations; however, that was not possible, and the development team had to manually ban cheaters.
As an NFT collector, I want a simple way to bid or purchase NFTs, so I can grow my collection.
For the charity auction and general NFT purchases, give users a way to access Interpop, the host of this experience.
On the Gap Threads informational page, there’s…
As a Gap enthusiast, I want to expand my collection, so I need clear information on when items are available.
Allow users to know when items are available for purchase.
This result relates to Persona 1: I placed the event dates near the top of the Gap Logo Remix informational page. Plus, each date had its own banner design, making it easier for users to know what’s currently happening within the event.
As a Gap admin overseeing the contest, I want to ensure entries stay true to the brand and don’t violate intellectual property rights.
The ability for admins to approve or deny submissions, and ban artists if necessary.
I created a whole user flow for this experience. Sadly, this idea didn’t make it to the final product.
After understanding the business and user needs of Gap Logo Remix, I didn’t start designing wireframes. Instead, I went straight to the web and looked at how other big brands were handling Web3 initiatives and community-based voting. A major source of inspiration was Ideas by Legos. Legos allows their community to submit Lego designs, vote for those submissions, and shop the winners—EXACTLY what we wanted to accomplish for this event!
Our external partner, who would host the whole Gap Logo Remix experience, made it clear that I had full creative freedom. So after gathering my design inspiration, I began mapping out three big user flows for the overall contest experience:
Let’s be reminded of the project challenge/opportunity: How might we create an engaging logo redesign contest while utilizing Web3?
From the beginning, my team prioritized community engagement; therefore, it was decided that we were going to invite Web3 and art influencers to participate, which would hopefully influence their followers to participate as well. With that in mind, I created an extensive flow to capture learning about Gap Logo Remix, submitting art, and more.
View “Before Contest” User Flow
During this phase of Gap Logo Remix, users could share and vote for their favorite designs, learn about the artists, and more.
View “During Contest” User Flow
The after-contest experience was broken down into the following phases:
Phase 01:
the announcement, where the winners were revealed
Phase 02:
the charity auction, where users bid on the winning designs for charity
View “After Contest: Charity Auction” User Flow
Phase 03:
the hoodie collection, where users purchased Gap hoodies featuring their favorite winning design
View “After Contest: Collect Hoodies” User Flow
After creating user flows to map out Gap Logo Remix, I started designing low- and high-fidelity wireframes and placing them in another iteration of the user flows to ensure I designed for everything.
The external partner, who was going to host the whole experience, fell through while I was in the middle of designing wireframes. With them hosting, I had complete creative control over the user experience. Now, my team had to rethink the whole thing.
Since the external host of Gap Logo Remix fell through and the planned launch date was approaching soon, my team quickly found a solution for hosting internally: Athleta had a digital experience where its users could vote, so we repurposed it.
Repurposing an experience from another brand meant I had to cut many planned features; however, the majority of those features were honestly nice-to-haves and weren’t necessary for a minimally viable product (MVP). As long as users could learn about the event, vote, bid, and buy, while still keeping the experience as engaging as possible, that’s all that mattered.
I kept the design inspiration from earlier, but I heavily revised the user flow to mimic the Athleta experience we were repurposing.
As I repurposed the Athleta experience, the wireframes I created needed to match the new user flow. Before, I mainly focused on creating low-fidelity wireframes; however, with the launch date quickly approaching, I stuck to solely creating high-fidelity ones.
Also, Gap could only host so much of the experience. We planned to use our Gap Threads landing page as the informational page of the event, while Gap.com became the host of the voting experience, and Interpop.io became the host of the auction experience.
I had complete creative control over the Gap Threads landing page, some control over the Gap.com voting experience, and minimal control over the Interpop auction experience.
So, how did we create an engaging logo redesign contest while utilizing Web3?
Gave users some way to engage with every contest phase
Ensured that action items were placed at the top
Interacted with our community on Discord (utilizing Web3 social media)
Note: The design has been updated after its launch to showcase my current design skills.
View Gap Logo Remix UI/UX
View Gap Logo Remix Display Ads
View Gap Logo Remix Social Media Graphics
Over 60 artworks submitted
Over 10,000 unique users participated worldwide
Over 100 new members joined the Gap Threads Discord server
Over 300 limited-edition hoodies sold out
“Thanks for the opportunity”
– Phoenyx, a Gap Threads Discord member
“Congratulations to the winners! All dope logos!”
– NCtwin, a Gap Threads Discord member
“I can’t wait to see the IRL sweatshirts! Have you seen the digital one? It’s so cool, I can’t believe it!”
– Vash (Soldado), a Gap Threads Discord member
Always be adaptable when creating an experience. You never know when requirements can drastically change.
Sudhakar Potineni
Senior Director of Project Management
Trent Hoverman
Senior Project Manager
Alexandre Mendes
Software Engineer
Brandon Sokolowski
Software Engineer
David Lee
Software Engineer
Erick Dumitrescu
Software Engineer
Jeff Yu
Software Engineer
Joshua Castillo
Software Engineer
Joshua Morris
Software Engineer
Patrick Seals
Software Engineer
Neil Salazar
Software Engineer
Nico Curl
Software Engineer
Scott Teschendorf
Software Engineer
Morgan Shada
Copywriter
Raven Caffey
UI/UX Designer
DressX
Non-Fungible Token (NFT) & Augmented Reality (AR) Hoodie Creators
Eunsan Huh
Behance Social Team Member
Interpop
NFT Display & Auction Site
UI/UX Design Portfolio: Year 6 Edition
Case Study
How might we create an engaging logo redesign contest while utilizing Web3?
0 to 1 Design
End-to-End UX
External Partnerships
Omnichannel
Project Management, Software Engineering, User Experience, Behance (External Partner), DressX (External Partner), & Interpop (External Partner)
Fact 1: This was a global event where anyone could participate.
Fact 2: Not all interested parties were knowledgeable about the Web3 elements of the event
Fact 3: This experience was going to be hosted by an external partner.
Fact 4: Overall, the purpose of Gap Logo Remix was to engage with our community in a bigger way than before and to end the year with a bang; therefore…
Solution: Let’s make this experience as interactive as possible!
The business needs for this event were pretty straightforward; however, there were multiple user needs and personas to design for. After understanding those needs, I did some design research and then started creating user flows.
After creating user flows to map out Gap Logo Remix, I started wireframes. While doing so, a major project shakeup occurs, causing the team to make some fast decisions.
The team found a solution after the major project shakeup and pivoted from our original event plans. Since the launch date was approaching soon, I quickly iterated on what I originally created to deliver on time.
So, how did we create an engaging logo redesign contest while utilizing Web3? The team’s strategic decisions were validated throughout Gap Logo Remix, thanks to achieving great numbers and community praise.
My Takeaway: Be adaptable, because requirements can drastically change.
Lead UI/UX Designer
End-to-End UX
Visual Design
8 Months
Figma
Adobe Illustrator
Adobe Photoshop
Voting Experience
Auction Webpage
Informational Webpage
Display Ads
Social Media Graphics
Web Graphics
Design Research
User Flow Diagrams
Low-Fidelity Wireframes
High-Fidelity Wireframes
Prototypes
UI Assets
Gap Inc.
Apparel Retail
Crypto
Web3
The Gap innovation team, Gap Threads, successfully finished our third Gap x (Artist) collaboration. What came next was a big event that would close the year: Gap Logo Remix.
Imagine creating a work of art that won you a large sum of money and was featured on clothing from an iconic brand. Well, that’s exactly what happened to 3 lucky winners of Gap Logo Remix, a global, community-driven contest that allowed fans of the Gap brand to redesign its iconic arch logo. The top 3 winners won a cash prize, auctioned their art for charity, and displayed their art on various types of Gap hoodies:
Non-fungible token (NFT) hoodies available for purchase on Interpop or the Tezos marketplace, objkt.com (currently, only offers are available)
Gap Logo Remix was split into five phases, with each needing its own set of marketing material, social media & web graphics, and, of course, UI/UX designs:
This was a global event where anyone could participate.
This was a big user base; however, like with our past artist collaborations, the Gap Threads team targeted past audiences: users with basic knowledge of cryptocurrency and non-fungible tokens (NFTs).
Not all interested parties were knowledgeable about the Web3 elements of the event (cryptocurrency and NFTs).
Again, the team targeted past audiences: users with basic Web3 knowledge; however, fiat was available as an alternative method of purchase.
This experience was going to be hosted by an external partner.
What were their development constraints? How much of the experience could we control?
Overall, the purpose of Gap Logo Remix was to engage with our community in a bigger way than before and to end the year with a bang; therefore…
How might we create an engaging Web3 contest?
How might we create a beginner-friendly Web3 experience for an engaging art contest?
How might we create an engaging logo redesign contest while utilizing Web3?
Let’s make this experience as interactive as possible!
Gap Threads, the team behind Gap Logo Remix, was responsible for keeping the Gap brand up-to-date with the latest technological trends. The business needs for this event were pretty straightforward:
Gap Inc. is a Fortune 500 company after all.
Giving users the ability to purchase items was planned for the event finale; however, how were we to encourage users to stick around until then?
Within the experience, we advertised purchase windows with compelling copy to help inspire users to make a purchase. For example, the planned auction was for charity; therefore, it was advertised as a charity auction.
This is Gap after all!
This was the fun part! At the time, Web3 user experiences had a lot of character, reminiscent of UI designs from the late 90s to early 2010s. How would I channel that?
While still adhering to accessibility guidelines and the Gap Threads branding, I designed an experience with lots of character.
Due to the nature of this event, there were multiple user personas to design for:
As an artist interested in participating, I need to understand Gap Logo Remix, so I can be fully informed about the opportunity.
On the informational webpage, allow users to learn about…
Since the event dates were really important, I placed them in two locations: right underneath the banner (for a quick rundown) and near the end of the page (for an in-depth explanation of what occurs during a particular event phase).
Beneath the top event date section, I added an “About Gap Logo Remix” area to explain its purpose. As the event unfolded, this section was updated with more relevant copy.
I created a monetary prize summary that was placed beneath the “About Gap Logo Remix” section. While financial incentives can strongly influence participation, this placement just gave a more logical flow for the page.
As an artist, I want to upload my submission to participate in Gap Logo Remix.
Allow users to submit artwork.
Due to our external host falling through, the team decided that we were going to have users submit through a branded, third-party form. The Gap Logo Remix informational page had the link to perform that action.
As a voter, I want to engage with submissions I care about, so they have a chance at winning.
Allow users to vote for multiple submissions. For validation, ensure voters can only vote once per submission.
When users voted for a submission, the button would display how many votes that particular design received. If they were to click again, it would remove the vote. There was worry about cheaters, and I did want to have IP address limitations; however, that was not possible, and the development team had to manually ban cheaters.
As an NFT collector, I want a simple way to bid or purchase NFTs, so I can grow my collection.
For the charity auction and general NFT purchases, give users a way to access Interpop, the host of this experience.
On the Gap Threads informational page, there’s…
As a Gap enthusiast, I want to expand my collection, so I need clear information on when items are available.
Allow users to know when items are available for purchase.
This result relates to Persona 1: I placed the event dates near the top of the Gap Logo Remix informational page. Plus, each date had its own banner design, making it easier for users to know what’s currently happening within the event.
As a Gap admin overseeing the contest, I want to ensure entries stay true to the brand and don’t violate intellectual property rights.
The ability for admins to approve or deny submissions, and ban artists if necessary.
I created a whole user flow for this experience. Sadly, this idea didn’t make it to the final product.
After understanding the business and user needs of Gap Logo Remix, I didn’t start designing wireframes. Instead, I went straight to the web and looked at how other big brands were handling Web3 initiatives and community-based voting. A major source of inspiration was Ideas by Legos. Legos allows their community to submit Lego designs, vote for those submissions, and shop the winners—EXACTLY what we wanted to accomplish for this event!
Our external partner, who would host the whole Gap Logo Remix experience, made it clear that I had full creative freedom. So after gathering my design inspiration, I began mapping out three big user flows for the overall contest experience:
Let’s be reminded of the project challenge/opportunity: How might we create an engaging logo redesign contest while utilizing Web3?
From the beginning, my team prioritized community engagement; therefore, it was decided that we were going to invite Web3 and art influencers to participate, which would hopefully influence their followers to participate as well. With that in mind, I created an extensive flow to capture learning about Gap Logo Remix, submitting art, and more.
View “Before Contest” User Flow
During this phase of Gap Logo Remix, users could share and vote for their favorite designs, learn about the artists, and more.
View “During Contest” User Flow
The after-contest experience was broken down into the following phases:
the announcement, where the winners were revealed
the charity auction, where users bid on the winning designs for charity
View “After Contest: Charity Auction” User Flow
the hoodie collection, where users purchased Gap hoodies featuring their favorite winning design
View “After Contest: Collect Hoodies” User Flow
After creating user flows to map out Gap Logo Remix, I started designing low- and high-fidelity wireframes and placing them in another iteration of the user flows to ensure I designed for everything.
The external partner, who was going to host the whole experience, fell through while I was in the middle of designing wireframes. With them hosting, I had complete creative control over the user experience. Now, my team had to rethink the whole thing.
Since the external host of Gap Logo Remix fell through and the planned launch date was approaching soon, my team quickly found a solution for hosting internally: Athleta had a digital experience where its users could vote, so we repurposed it.
Repurposing an experience from another brand meant I had to cut many planned features; however, the majority of those features were honestly nice-to-haves and weren’t necessary for a minimally viable product (MVP). As long as users could learn about the event, vote, bid, and buy, while still keeping the experience as engaging as possible, that’s all that mattered.
I kept the design inspiration from earlier, but I heavily revised the user flow to mimic the Athleta experience we were repurposing.
As I repurposed the Athleta experience, the wireframes I created needed to match the new user flow. Before, I mainly focused on creating low-fidelity wireframes; however, with the launch date quickly approaching, I stuck to solely creating high-fidelity ones.
Also, Gap could only host so much of the experience. We planned to use our Gap Threads landing page as the informational page of the event, while Gap.com became the host of the voting experience, and Interpop.io became the host of the auction experience.
I had complete creative control over the Gap Threads landing page, some control over the Gap.com voting experience, and minimal control over the Interpop auction experience.
So, how did we create an engaging logo redesign contest while utilizing Web3?
Gave users some way to engage with every contest phase
Ensured that action items were placed at the top
Interacted with our community on Discord (utilizing Web3 social media)
So, how did we create an engaging logo redesign contest while utilizing Web3?
Note: The design has been updated after its launch to showcase my current design skills.
View Gap Logo Remix UI/UX
View Gap Logo Remix Display Ads
View Gap Logo Remix Social Media Graphics
Over 60 artworks submitted
Over 10,000 unique users participated worldwide
Over 100 new members joined the Gap Threads Discord server
Over 300 limited-edition hoodies sold out
“Thanks for the opportunity”
– Phoenyx, a Gap Threads Discord member
“Congratulations to the winners! All dope logos!”
– NCtwin, a Gap Threads Discord member
“I can’t wait to see the IRL sweatshirts! Have you seen the digital one? It’s so cool, I can’t believe it!”
– Vash (Soldado), a Gap Threads Discord member
Always be adaptable when creating an experience. You never know when requirements can drastically change.
Sudhakar Potineni
Senior Director of Project Management
Trent Hoverman
Senior Project Manager
Alexandre Mendes
Software Engineer
Brandon Sokolowski
Software Engineer
David Lee
Software Engineer
Erick Dumitrescu
Software Engineer
Jeff Yu
Software Engineer
Joshua Castillo
Software Engineer
Joshua Morris
Software Engineer
Patrick Seals
Software Engineer
Neil Salazar
Software Engineer
Nico Curl
Software Engineer
Scott Teschendorf
Software Engineer
Morgan Shada
Copywriter
Raven Caffey
UI/UX Designer
DressX
Non-Fungible Token (NFT) & Augmented Reality (AR) Hoodie Creators
Eunsan Huh
Behance Social Team Member
Interpop
NFT Display & Auction Site
UI/UX Design Portfolio: Year 6 Edition
Case Study
How might we create an engaging logo redesign contest while utilizing Web3?
0 to 1 Design
End-to-End UX
External Partnerships
Omnichannel
Project Management, Software Engineering, User Experience, Behance (External Partner), DressX (External Partner), & Interpop (External Partner)
Fact 1: This was a global event where anyone could participate.
Fact 2: Not all interested parties were knowledgeable about the Web3 elements of the event
Fact 3: This experience was going to be hosted by an external partner.
Fact 4: Overall, the purpose of Gap Logo Remix was to engage with our community in a bigger way than before and to end the year with a bang; therefore…
Solution: Let’s make this experience as interactive as possible!
The business needs for this event were pretty straightforward; however, there were multiple user needs and personas to design for. After understanding those needs, I did some design research and then started creating user flows.
After creating user flows to map out Gap Logo Remix, I started wireframes. While doing so, a major project shakeup occurs, causing the team to make some fast decisions.
The team found a solution after the major project shakeup and pivoted from our original event plans. Since the launch date was approaching soon, I quickly iterated on what I originally created to deliver on time.
So, how did we create an engaging logo redesign contest while utilizing Web3? The team’s strategic decisions were validated throughout Gap Logo Remix, thanks to achieving great numbers and community praise.
My Takeaway: Be adaptable, because requirements can drastically change.
Lead UI/UX Designer
End-to-End UX
Visual Design
8 Months
Figma
Adobe Illustrator
Adobe Photoshop
Voting Experience
Auction Webpage
Informational Webpage
Display Ads
Social Media Graphics
Web Graphics
Design Research
User Flow Diagrams
Low-Fidelity Wireframes
High-Fidelity Wireframes
Prototypes
UI Assets
Gap Inc.
Apparel Retail
Crypto
Web3
The Gap innovation team, Gap Threads, successfully finished our third Gap x (Artist) collaboration. What came next was a big event that would close the year: Gap Logo Remix.
Imagine creating a work of art that won you a large sum of money and was featured on clothing from an iconic brand. Well, that’s exactly what happened to 3 lucky winners of Gap Logo Remix, a global, community-driven contest that allowed fans of the Gap brand to redesign its iconic arch logo. The top 3 winners won a cash prize, auctioned their art for charity, and displayed their art on various types of Gap hoodies:
Non-fungible token (NFT) hoodies available for purchase on Interpop or the Tezos marketplace, objkt.com (currently, only offers are available)
Gap Logo Remix was split into five phases, with each needing its own set of marketing material, social media & web graphics, and, of course, UI/UX designs:
This was a global event where anyone could participate.
This was a big user base; however, like with our past artist collaborations, the Gap Threads team targeted past audiences: users with basic knowledge of cryptocurrency and non-fungible tokens (NFTs).
Not all interested parties were knowledgeable about the Web3 elements of the event (cryptocurrency and NFTs).
Again, the team targeted past audiences: users with basic Web3 knowledge; however, fiat was available as an alternative method of purchase.
This experience was going to be hosted by an external partner. UI balancing text (please ignore) UI balancing text (please ignore) UI balancing text (pl...)
What were their development constraints? How much of the experience could we control?
Overall, the purpose of Gap Logo Remix was to engage with our community in a bigger way than before and to end the year with a bang; therefore…
How might we create an engaging Web3 contest?
How might we create a beginner-friendly Web3 experience for an engaging art contest?
How might we create an engaging logo redesign contest while utilizing Web3?
Let’s make this experience as interactive as possible!
Gap Threads, the team behind Gap Logo Remix, was responsible for keeping the Gap brand up-to-date with the latest technological trends. The business needs for this event were pretty straightforward:
Gap Inc. is a Fortune 500 company after all.
Giving users the ability to purchase items was planned for the event finale; however, how were we to encourage users to stick around until then?
Within the experience, we advertised purchase windows with compelling copy to help inspire users to make a purchase. For example, the planned auction was for charity; therefore, it was advertised as a charity auction.
This is Gap after all!
This was the fun part! At the time, Web3 user experiences had a lot of character, reminiscent of UI designs from the late 90s to early 2010s. How would I channel that?
While still adhering to accessibility guidelines and the Gap Threads branding, I designed an experience with lots of character.
Due to the nature of this event, there were multiple user personas to design for:
As an artist interested in participating, I need to understand Gap Logo Remix, so I can be fully informed about the opportunity.
On the informational webpage, allow users to learn about…
Since the event dates were really important, I placed them in two locations: right underneath the banner (for a quick rundown) and near the end of the page (for an in-depth explanation of what occurs during a particular event phase).
Beneath the top event date section, I added an “About Gap Logo Remix” area to explain its purpose. As the event unfolded, this section was updated with more relevant copy.
I created a monetary prize summary that was placed beneath the “About Gap Logo Remix” section. While financial incentives can strongly influence participation, this placement just gave a more logical flow for the page.
As an artist, I want to upload my submission to participate in Gap Logo Remix.
Allow users to submit artwork.
Due to our external host falling through, the team decided that we were going to have users submit through a branded, third-party form. The Gap Logo Remix informational page had the link to perform that action.
As a voter, I want to engage with submissions I care about, so they have a chance at winning.
Allow users to vote for multiple submissions. For validation, ensure voters can only vote once per submission.
When users voted for a submission, the button would display how many votes that particular design received. If they were to click again, it would remove the vote. There was worry about cheaters, and I did want to have IP address limitations; however, that was not possible, and the development team had to manually ban cheaters.
As an NFT collector, I want a simple way to bid or purchase NFTs, so I can grow my collection.
For the charity auction and general NFT purchases, give users a way to access Interpop, the host of this experience.
On the Gap Threads informational page, there’s…
As a Gap enthusiast, I want to expand my collection, so I need clear information on when items are available.
Allow users to know when items are available for purchase.
This result relates to Persona 1: I placed the event dates near the top of the Gap Logo Remix informational page. Plus, each date had its own banner design, making it easier for users to know what’s currently happening within the event.
As a Gap admin overseeing the contest, I want to ensure entries stay true to the brand and don’t violate intellectual property rights.
The ability for admins to approve or deny submissions, and ban artists if necessary.
I created a whole user flow for this experience. Sadly, this idea didn’t make it to the final product.
After understanding the business and user needs of Gap Logo Remix, I didn’t start designing wireframes. Instead, I went straight to the web and looked at how other big brands were handling Web3 initiatives and community-based voting. A major source of inspiration was Ideas by Legos. Legos allows their community to submit Lego designs, vote for those submissions, and shop the winners—EXACTLY what we wanted to accomplish for this event!
Our external partner, who would host the whole Gap Logo Remix experience, made it clear that I had full creative freedom. So after gathering my design inspiration, I began mapping out three big user flows for the overall contest experience:
Let’s be reminded of the project challenge/opportunity: How might we create an engaging logo redesign contest while utilizing Web3?
From the beginning, my team prioritized community engagement; therefore, it was decided that we were going to invite Web3 and art influencers to participate, which would hopefully influence their followers to participate as well. With that in mind, I created an extensive flow to capture learning about Gap Logo Remix, submitting art, and more.
View “Before Contest” User Flow
During this phase of Gap Logo Remix, users could share and vote for their favorite designs, learn about the artists, and more.
View “During Contest” User Flow
The after-contest experience was broken down into the following phases:
the announcement, where the winners were revealed
the charity auction, where users bid on the winning designs for charity
View “After Contest: Charity Auction” User Flow
the hoodie collection, where users purchased Gap hoodies featuring their favorite winning design
View “After Contest: Collect Hoodies” User Flow
After creating user flows to map out Gap Logo Remix, I started designing low- and high-fidelity wireframes and placing them in another iteration of the user flows to ensure I designed for everything.
The external partner, who was going to host the whole experience, fell through while I was in the middle of designing wireframes. With them hosting, I had complete creative control over the user experience. Now, my team had to rethink the whole thing.
Since the external host of Gap Logo Remix fell through and the planned launch date was approaching soon, my team quickly found a solution for hosting internally: Athleta had a digital experience where its users could vote, so we repurposed it.
Repurposing an experience from another brand meant I had to cut many planned features; however, the majority of those features were honestly nice-to-haves and weren’t necessary for a minimally viable product (MVP). As long as users could learn about the event, vote, bid, and buy, while still keeping the experience as engaging as possible, that’s all that mattered.
I kept the design inspiration from earlier, but I heavily revised the user flow to mimic the Athleta experience we were repurposing.
As I repurposed the Athleta experience, the wireframes I created needed to match the new user flow. Before, I mainly focused on creating low-fidelity wireframes; however, with the launch date quickly approaching, I stuck to solely creating high-fidelity ones.
Also, Gap could only host so much of the experience. We planned to use our Gap Threads landing page as the informational page of the event, while Gap.com became the host of the voting experience, and Interpop.io became the host of the auction experience.
I had complete creative control over the Gap Threads landing page, some control over the Gap.com voting experience, and minimal control over the Interpop auction experience.
So, how did we create an engaging logo redesign contest while utilizing Web3?
Gave users some way to engage with every contest phase
Ensured that action items were placed at the top
Interacted with our community on Discord (utilizing Web3 social media)
Note: The design has been updated after its launch to showcase my current design skills.
View Gap Logo Remix Display Ads
View Gap Logo Remix Social Media Graphics
Over 60 artworks submitted
Over 10,000 unique users participated worldwide
Over 100 new members joined the Gap Threads Discord server
Over 300 limited-edition hoodies sold out
“Thanks for the opportunity”
– Phoenyx, a Gap Threads Discord member
“Congratulations to the winners! All dope logos!”
– NCtwin, a Gap Threads Discord member
“I can’t wait to see the IRL sweatshirts! Have you seen the digital one? It’s so cool, I can’t believe it!”
– Vash (Soldado), a Gap Threads Discord member
Always be adaptable when creating an experience. You never know when requirements can drastically change.
Sudhakar Potineni
Senior Director of Project Management
Trent Hoverman
Senior Project Manager
Alexandre Mendes
Software Engineer
Brandon Sokolowski
Software Engineer
David Lee
Software Engineer
Erick Dumitrescu
Software Engineer
Jeff Yu
Software Engineer
Joshua Castillo
Software Engineer
Joshua Morris
Software Engineer
Patrick Seals
Software Engineer
Neil Salazar
Software Engineer
Nico Curl
Software Engineer
Scott Teschendorf
Software Engineer
Morgan Shada
Copywriter
Raven Caffey
UI/UX Designer
DressX
Non-Fungible Token (NFT) & Augmented Reality (AR) Hoodie Creators
Eunsan Huh
Behance Social Team Member
Interpop
NFT Display & Auction Site
UI/UX Design Portfolio: Year 6 Edition
Case Study
How might we create an engaging logo redesign contest while utilizing Web3?
0 to 1 Design
End-to-End UX
External Partnerships
Omnichannel
Project Management, Software Engineering, User Experience, Behance (External Partner), DressX (External Partner), & Interpop (External Partner)
Fact 1: This was a global event where anyone could participate.
Fact 2: Not all interested parties were knowledgeable about the Web3 elements of the event
Fact 3: This experience was going to be hosted by an external partner.
Fact 4: Overall, the purpose of Gap Logo Remix was to engage with our community in a bigger way than before and to end the year with a bang; therefore…
Solution: Let’s make this experience as interactive as possible!
The business needs for this event were pretty straightforward; however, there were multiple user needs and personas to design for. After understanding those needs, I did some design research and then started creating user flows.
After creating user flows to map out Gap Logo Remix, I started wireframes. While doing so, a major project shakeup occurs, causing the team to make some fast decisions.
The team found a solution after the major project shakeup and pivoted from our original event plans. Since the launch date was approaching soon, I quickly iterated on what I originally created to deliver on time.
So, how did we create an engaging logo redesign contest while utilizing Web3? The team’s strategic decisions were validated throughout Gap Logo Remix, thanks to achieving great numbers and community praise.
My Takeaway: Be adaptable, because requirements can drastically change.
Lead UI/UX Designer
End-to-End UX
Visual Design
8 Months
Figma
Adobe Illustrator
Adobe Photoshop
Voting Experience
Auction Webpage
Informational Webpage
Display Ads
Social Media Graphics
Web Graphics
Design Research
User Flow Diagrams
Low-Fidelity Wireframes
High-Fidelity Wireframes
Prototypes
UI Assets
Gap Inc.
Apparel Retail
Crypto
Web3
The Gap innovation team, Gap Threads, successfully finished our third Gap x (Artist) collaboration. What came next was a big event that would close the year: Gap Logo Remix.
Imagine creating a work of art that won you a large sum of money and was featured on clothing from an iconic brand. Well, that’s exactly what happened to 3 lucky winners of Gap Logo Remix, a global, community-driven contest that allowed fans of the Gap brand to redesign its iconic arch logo. The top 3 winners won a cash prize, auctioned their art for charity, and displayed their art on various types of Gap hoodies:
Non-fungible token (NFT) hoodies available for purchase on Interpop or the Tezos marketplace, objkt.com (currently, only offers are available)
Gap Logo Remix was split into five phases, with each needing its own set of marketing material, social media & web graphics, and, of course, UI/UX designs:
This was a global event where anyone could participate.
This was a big user base; however, like with our past artist collaborations, the Gap Threads team targeted past audiences: users with basic knowledge of cryptocurrency and non-fungible tokens (NFTs).
Not all interested parties were knowledgeable about the Web3 elements of the event (cryptocurrency and NFTs).
Again, the team targeted past audiences: users with basic Web3 knowledge; however, fiat was available as an alternative method of purchase.
This experience was going to be hosted by an external partner.
What were their development constraints? How much of the experience could we control?
Overall, the purpose of Gap Logo Remix was to engage with our community in a bigger way than before and to end the year with a bang; therefore…
How might we create an engaging Web3 contest?
How might we create a beginner-friendly Web3 experience for an engaging art contest?
How might we create an engaging logo redesign contest while utilizing Web3?
Let’s make this experience as interactive as possible!
Gap Threads, the team behind Gap Logo Remix, was responsible for keeping the Gap brand up-to-date with the latest technological trends. The business needs for this event were pretty straightforward:
Gap Inc. is a Fortune 500 company after all.
Giving users the ability to purchase items was planned for the event finale; however, how were we to encourage users to stick around until then?
Within the experience, we advertised purchase windows with compelling copy to help inspire users to make a purchase. For example, the planned auction was for charity; therefore, it was advertised as a charity auction.
This is Gap after all!
This was the fun part! At the time, Web3 user experiences had a lot of character, reminiscent of UI designs from the late 90s to early 2010s. How would I channel that?
While still adhering to accessibility guidelines and the Gap Threads branding, I designed an experience with lots of character.
Due to the nature of this event, there were multiple user personas to design for:
As an artist interested in participating, I need to understand Gap Logo Remix, so I can be fully informed about the opportunity.
On the informational webpage, allow users to learn about…
Since the event dates were really important, I placed them in two locations: right underneath the banner (for a quick rundown) and near the end of the page (for an in-depth explanation of what occurs during a particular event phase).
Beneath the top event date section, I added an “About Gap Logo Remix” area to explain its purpose. As the event unfolded, this section was updated with more relevant copy.
I created a monetary prize summary that was placed beneath the “About Gap Logo Remix” section. While financial incentives can strongly influence participation, this placement just gave a more logical flow for the page.
As an artist, I want to upload my submission to participate in Gap Logo Remix.
Allow users to submit artwork.
Due to our external host falling through, the team decided that we were going to have users submit through a branded, third-party form. The Gap Logo Remix informational page had the link to perform that action.
As a voter, I want to engage with submissions I care about, so they have a chance at winning.
Allow users to vote for multiple submissions. For validation, ensure voters can only vote once per submission.
When users voted for a submission, the button would display how many votes that particular design received. If they were to click again, it would remove the vote. There was worry about cheaters, and I did want to have IP address limitations; however, that was not possible, and the development team had to manually ban cheaters.
As an NFT collector, I want a simple way to bid or purchase NFTs, so I can grow my collection.
For the charity auction and general NFT purchases, give users a way to access Interpop, the host of this experience.
On the Gap Threads informational page, there’s…
As a Gap enthusiast, I want to expand my collection, so I need clear information on when items are available.
Allow users to know when items are available for purchase.
This result relates to Persona 1: I placed the event dates near the top of the Gap Logo Remix informational page. Plus, each date had its own banner design, making it easier for users to know what’s currently happening within the event.
As a Gap admin overseeing the contest, I want to ensure entries stay true to the brand and don’t violate intellectual property rights.
The ability for admins to approve or deny submissions, and ban artists if necessary.
I created a whole user flow for this experience. Sadly, this idea didn’t make it to the final product.
After understanding the business and user needs of Gap Logo Remix, I didn’t start designing wireframes. Instead, I went straight to the web and looked at how other big brands were handling Web3 initiatives and community-based voting. A major source of inspiration was Ideas by Legos. Legos allows their community to submit Lego designs, vote for those submissions, and shop the winners—EXACTLY what we wanted to accomplish for this event!
Our external partner, who would host the whole Gap Logo Remix experience, made it clear that I had full creative freedom. So after gathering my design inspiration, I began mapping out three big user flows for the overall contest experience:
Let’s be reminded of the project challenge/opportunity: How might we create an engaging logo redesign contest while utilizing Web3?
From the beginning, my team prioritized community engagement; therefore, it was decided that we were going to invite Web3 and art influencers to participate, which would hopefully influence their followers to participate as well. With that in mind, I created an extensive flow to capture learning about Gap Logo Remix, submitting art, and more.
View “Before Contest” User Flow
During this phase of Gap Logo Remix, users could share and vote for their favorite designs, learn about the artists, and more.
View “During Contest” User Flow
The after-contest experience was broken down into the following phases:
the announcement, where the winners were revealed
the charity auction, where users bid on the winning designs for charity
View “After Contest: Charity Auction” User Flow
the hoodie collection, where users purchased Gap hoodies featuring their favorite winning design
View “After Contest: Collect Hoodies” User Flow
After creating user flows to map out Gap Logo Remix, I started designing low- and high-fidelity wireframes and placing them in another iteration of the user flows to ensure I designed for everything.
The external partner, who was going to host the whole experience, fell through while I was in the middle of designing wireframes. With them hosting, I had complete creative control over the user experience. Now, my team had to rethink the whole thing.
Since the external host of Gap Logo Remix fell through and the planned launch date was approaching soon, my team quickly found a solution for hosting internally: Athleta had a digital experience where its users could vote, so we repurposed it.
Repurposing an experience from another brand meant I had to cut many planned features; however, the majority of those features were honestly nice-to-haves and weren’t necessary for a minimally viable product (MVP). As long as users could learn about the event, vote, bid, and buy, while still keeping the experience as engaging as possible, that’s all that mattered.
I kept the design inspiration from earlier, but I heavily revised the user flow to mimic the Athleta experience we were repurposing.
As I repurposed the Athleta experience, the wireframes I created needed to match the new user flow. Before, I mainly focused on creating low-fidelity wireframes; however, with the launch date quickly approaching, I stuck to solely creating high-fidelity ones.
Also, Gap could only host so much of the experience. We planned to use our Gap Threads landing page as the informational page of the event, while Gap.com became the host of the voting experience, and Interpop.io became the host of the auction experience.
I had complete creative control over the Gap Threads landing page, some control over the Gap.com voting experience, and minimal control over the Interpop auction experience.
So, how did we create an engaging logo redesign contest while utilizing Web3?
Gave users some way to engage with every contest phase
Ensured that action items were placed at the top
Interacted with our community on Discord (utilizing Web3 social media)
Note: The design has been updated after its launch to showcase my current design skills.
View Gap Logo Remix Display Ads
View Gap Logo Remix Social Media Graphics
Over 60 artworks submitted
Over 10,000 unique users participated worldwide
Over 100 new members joined the Gap Threads Discord server
Over 300 limited-edition hoodies sold out
“Thanks for the opportunity”
– Phoenyx, a Gap Threads Discord member
“Congratulations to the winners! All dope logos!”
– NCtwin, a Gap Threads Discord member
“I can’t wait to see the IRL sweatshirts! Have you seen the digital one? It’s so cool, I can’t believe it!”
– Vash (Soldado), a Gap Threads Discord member
Always be adaptable when creating an experience. You never know when requirements can drastically change.
Sudhakar Potineni
Senior Director of Project Management
Trent Hoverman
Senior Project Manager
Alexandre Mendes
Software Engineer
Brandon Sokolowski
Software Engineer
David Lee
Software Engineer
Erick Dumitrescu
Software Engineer
Jeff Yu
Software Engineer
Joshua Castillo
Software Engineer
Joshua Morris
Software Engineer
Patrick Seals
Software Engineer
Neil Salazar
Software Engineer
Nico Curl
Software Engineer
Scott Teschendorf
Software Engineer
Morgan Shada
Copywriter
Raven Caffey
UI/UX Designer
DressX
Non-Fungible Token (NFT) & Augmented Reality (AR) Hoodie Creators
Eunsan Huh
Behance Social Team Member
Interpop
NFT Display & Auction Site