UI/UX Design Portfolio: Year 6 Edition
HELLO RAVEN
Case Study
Perfecting a Playful Palette for Accessibility
How might we introduce a vibrant artistic style while maintaining an accessible experience?
Accessibility-First Design (A11y)
External Partnership
Visual Design
WCAG 2.2 AA
A Collaboration Between 4 Teams:
Project Management, Software Engineering, User Experience, & Demit Omphroy (External Collaborator)
Fine Print
Role
Lead UX Designer
Lead Visual Designer
Responsibilities
UX Design
Visual Design
Duration
2 Months
Tools
Figma
Adobe Photoshop
Primary Deliverables
Rebranded Webpage
Reusable "Light Mode" Theme
Display Ads
Social Media Graphics
Web Graphics
Discord Stickers
Secondary Deliverables
High-Fidelity Wireframes
Prototypes
UI Assets
Company
Gap Inc.
Industry
Apparel Retail
Crypto
Web3
At a Glance
Chapter 01
The Challenges
- The theme of the Gap Threads website wouldn’t match Demit’s branding.
- Most of Demit’s color palette didn’t comply with accessibility standards.
Solution: Let’s create a new “light mode” theme for the Gap Threads website, and ensure any colors used from Demit’s palette meet the latest accessibility guidelines.
Chapter 02
The Discovery
The team needed to ensure that this was another successful collaboration, while ensuring users could easily learn about Demit, understand the non-fungible token (NFT) collection process, and engage with key events.
Chapter 03
The Design
I created a light mode theme for the Gap Threads website and rebranded it with Demit’s artwork.
Chapter 04
The Final Results
- A new “light mode” webpage theme was created.
- A webpage that matched Demit’s branding.
- All colors met WCAG 2.2 AA accessibility guidelines.
My Takeaway: Following accessibility guidelines doesn’t have to limit creativity.
The Introduction
Gap Threads, the innovation team behind the Gap brand, was set to launch our third Gap x [Artist] installment, following our successful collaborations with Frank Ape and Dapper Dan. This time, the spotlight was on the vibrant artist Demit Omphroy.
Demit Omphroy has been creating his entire life—creating, unlearning, and relearning, even if his efforts don’t lead to him painting. It's part of his process, and his process produces whimsical works loved by many, including Gap.
The Challenges
Mismatched Aesthetics
Demit had an art palette bursting with color, which was perfect for a blank canvas; however, the Gap Threads website was a canvas set in dark mode—which could still work with Demit’s colors, but the vibe wouldn’t match his work.
Accessibility Compliance
Demit’s color palette was perfect for canvases, but not for websites. If I were to incorporate his colors into the user interface, they needed to be optimized for accessibility compliance.
How Might We…
How might I match Demit’s style to create a fun visual experience?
How might we stay accessible while incorporating an artist’s style?
How might we introduce a vibrant artistic style while maintaining an accessible experience?
The Challenges
The Solution
Let’s create a new “light mode” theme for the Gap Threads website, and ensure any colors used from Demit’s palette meet the latest accessibility guidelines.
The Discovery
Business Needs
Work with Demit to make this another successful collaboration.
User Needs
Just like the two prior collaborations, users should be able to learn…
- about Demit Omphroy
- how the non-fungible token (NFT) collection process works
- when key events take place and take action during those events.
The Design
Light Mode
I briefly collaborated with another designer named Paolo, the former Gap Threads lead designer. Together, we created the new light mode color palette for the Gap Threads website.
Branding
Once the light mode theme was created, I started rebranding the Gap Threads website for Demit, bringing in his backstory and artistic flair. He generously designed custom graphics for key areas of the website, which I integrated into the experience. I noted to developers that those graphics needed alternative text within the code.
To complement Demit’s style, I added playful doodles and splashes of color throughout the website. I even designed a pastel blur background inspired by his artworks. This detail was so well-received that the background was later used on the Gap x Demit non-fungible tokens (NFTs).
Speaking of splashes of color, some of Demit’s color palette didn’t comply with the latest WCAG 2.2 AA accessibility guidelines. To combat this problem, I subtly darkened the UI colors until they complied. That way, I didn’t deviate far from Demit’s branding.
Condensing
Once the Gap x Demit website was visually finished, I began condensing the website without disrupting the user experience or removing any important information.
The Final Results
Outcomes
So, how did we introduce a vibrant artistic style while maintaining an accessible experience?
New Web Theme
Created a new website theme
Branding Collaboration
Worked with Demit to match his branding
Accessibility Check
Ensured all graphics had alternative text and colors met the latest WCAG 2.2 AA accessibility guidelines
Experiences
Project Achievements
Over 8,560 NFT Sales Accomplished*
Over 9,670 Unique Owners Purchased*
Over $19,000+ in Crypto Revenue Earned*
*Estimates from the Tezos blockchain
The Final Results
My Takeaway
Following accessibility guidelines doesn’t have to limit creativity.
Credits
Project Management
Sudhakar Potineni
Senior Director of Project Management
Trent Hoverman
Senior Project Manager
Software Engineers
Nico Curl
Software Engineer
Scott Teschendorf
Software Engineer
User Experience
Morgan Shada
Copywriter
Paolo Duerte
UI/UX Designer
Raven Caffey
UI/UX Designer
External Partners
Demit Omphroy
Artist
UI/UX Design Portfolio: Year 6 Edition
Case Study
Perfecting a Playful Palette for Accessibility
How might we introduce a vibrant artistic style while maintaining an accessible experience?
Accessibility-First Design (A11y)
External Partnership
Visual Design
WCAG 2.2 AA
A Collaboration Between 4 Teams:
Project Management, Software Engineering, User Experience, & Demit Omphroy (External Collaborator)
At a Glance
Chapter 01
The Challenges
- The theme of the Gap Threads website wouldn’t match Demit’s branding.
- Most of Demit’s color palette didn’t comply with accessibility standards.
Solution: Let’s create a new “light mode” theme for the Gap Threads website, and ensure any colors used from Demit’s palette meet the latest accessibility guidelines.
Chapter 02
The Discovery
The team needed to ensure that this was another successful collaboration, while ensuring users could easily learn about Demit, understand the non-fungible token (NFT) collection process, and engage with key events.
Chapter 03
The Design
I created a light mode theme for the Gap Threads website and rebranded it with Demit’s artwork.
Chapter 04
The Final Results
- A new “light mode” webpage theme was created.
- A webpage that matched Demit’s branding.
- All colors met WCAG 2.2 AA accessibility guidelines.
My Takeaway: Following accessibility guidelines doesn’t have to limit creativity.
Fine Print
Role
Lead UX Designer
Lead Visual Designer
Responsibilities
UX Design
Visual Design
Duration
2 Months
Tools
Figma
Adobe Photoshop
Primary Deliverables
Rebranded Webpage
Reusable "Light Mode" Theme
Display Ads
Social Media Graphics
Web Graphics
Discord Stickers
Secondary Deliverables
High-Fidelity Wireframes
Prototypes
UI Assets
Company
Gap Inc.
Industry
Apparel Retail
Crypto
Web3
Outline
Front Matter
Chapter 01
Chapter 02
Chapter 03
Chapter 04
Appendix
The Introduction
Gap Threads, the innovation team behind the Gap brand, was set to launch our third Gap x [Artist] installment, following our successful collaborations with Frank Ape and Dapper Dan. This time, the spotlight was on the vibrant artist Demit Omphroy.
Demit Omphroy has been creating his entire life—creating, unlearning, and relearning, even if his efforts don’t lead to him painting. It's part of his process, and his process produces whimsical works loved by many, including Gap.
The Challenges
Mismatched Aesthetics
Demit had an art palette bursting with color, which was perfect for a blank canvas; however, the Gap Threads website was a canvas set in dark mode—which could still work with Demit’s colors, but the vibe wouldn’t match his work.
Accessibility Compliance
Demit’s color palette was perfect for canvases, but not for websites. If I were to incorporate his colors into the user interface, they needed to be optimized for accessibility compliance.
How Might We…
How might I match Demit’s style to create a fun visual experience?
How might we stay accessible while incorporating an artist’s style?
How might we introduce a vibrant artistic style while maintaining an accessible experience?
The Challenges
The Solution
Let’s create a new “light mode” theme for the Gap Threads website, and ensure any colors used from Demit’s palette meet the latest accessibility guidelines.
The Discovery
Business Needs
Work with Demit to make this another successful collaboration.
User Needs
Just like the two prior collaborations, users should be able to learn…
- about Demit Omphroy
- how the non-fungible token (NFT) collection process works
- when key events take place and take action during those events.
The Design
Light Mode
I briefly collaborated with another designer named Paolo, the former Gap Threads lead designer. Together, we created the new light mode color palette for the Gap Threads website.
Branding
Once the light mode theme was created, I started rebranding the Gap Threads website for Demit, bringing in his backstory and artistic flair. He generously designed custom graphics for key areas of the website, which I integrated into the experience. I noted to developers that those graphics needed alternative text within the code.
To complement Demit’s style, I added playful doodles and splashes of color throughout the website. I even designed a pastel blur background inspired by his artworks. This detail was so well-received that the background was later used on the Gap x Demit non-fungible tokens (NFTs).
Speaking of splashes of color, some of Demit’s color palette didn’t comply with the latest WCAG 2.2 AA accessibility guidelines. To combat this problem, I subtly darkened the UI colors until they complied. That way, I didn’t deviate far from Demit’s branding.
Condensing
Once the Gap x Demit website was visually finished, I began condensing the website without disrupting the user experience or removing any important information.
The Final Results
Outcomes
So, how did we introduce a vibrant artistic style while maintaining an accessible experience?
New Web Theme
Created a new website theme
Branding Collaboration
Worked with Demit to match his branding
Accessibility Check
Ensured all graphics had alternative text and colors met the latest WCAG 2.2 AA accessibility guidelines
Experiences
Interact with Landing Page
Project Achievements
Over 8,560 NFT Sales Accomplished*
Over 9,670 Unique Owners Purchased*
Over $19,000+ in Crypto Revenue Earned*
*Estimates from the Tezos blockchain
The Final Results
My Takeaway
Following accessibility guidelines doesn’t have to limit creativity.
Credits
Project Management
Sudhakar Potineni
Senior Director of Project Management
Trent Hoverman
Senior Project Manager
Software Engineers
Nico Curl
Software Engineer
Scott Teschendorf
Software Engineer
User Experience
Morgan Shada
Copywriter
Paolo Duerte
UI/UX Designer
Raven Caffey
UI/UX Designer
External Partners
Demit Omphroy
Artist
UI/UX Design Portfolio: Year 6 Edition
Case Study
Perfecting a Playful Palette for Accessibility
How might we introduce a vibrant artistic style while maintaining an accessible experience?
Accessibility-First Design (A11y)
External Partnership
Visual Design
WCAG 2.2 AA
A Collaboration Between 4 Teams:
Project Management, Software Engineering, User Experience, & Demit Omphroy (External Collaborator)
At a Glance
Chapter 01
The Challenges
- The theme of the Gap Threads website wouldn’t match Demit’s branding.
- Most of Demit’s color palette didn’t comply with accessibility standards.
Solution: Let’s create a new “light mode” theme for the Gap Threads website, and ensure any colors used from Demit’s palette meet the latest accessibility guidelines.
Chapter 02
The Discovery
The team needed to ensure that this was another successful collaboration, while ensuring users could easily learn about Demit, understand the non-fungible token (NFT) collection process, and engage with key events.
Chapter 03
The Design
I created a light mode theme for the Gap Threads website and rebranded it with Demit’s artwork.
Chapter 04
The Final Results
- A new “light mode” webpage theme was created.
- A webpage that matched Demit’s branding.
- All colors met WCAG 2.2 AA accessibility guidelines.
My Takeaway: Following accessibility guidelines doesn’t have to limit creativity.
Fine Print
Role
Lead UX Designer
Lead Visual Designer
Responsibilities
UX Design
Visual Design
Duration
2 Months
Tools
Figma
Adobe Photoshop
Primary Deliverables
Rebranded Webpage
Reusable "Light Mode" Theme
Display Ads
Social Media Graphics
Web Graphics
Discord Stickers
Secondary Deliverables
High-Fidelity Wireframes
Prototypes
UI Assets
Company
Gap Inc.
Industry
Apparel Retail
Crypto
Web3
Outline
Front Matter
Chapter 01
Chapter 02
Chapter 03
Chapter 04
Appendix
The Introduction
Gap Threads, the innovation team behind the Gap brand, was set to launch our third Gap x [Artist] installment, following our successful collaborations with Frank Ape and Dapper Dan. This time, the spotlight was on the vibrant artist Demit Omphroy.
Demit Omphroy has been creating his entire life—creating, unlearning, and relearning, even if his efforts don’t lead to him painting. It's part of his process, and his process produces whimsical works loved by many, including Gap.
The Challenges
Mismatched Aesthetics
Demit had an art palette bursting with color, which was perfect for a blank canvas; however, the Gap Threads website was a canvas set in dark mode—which could still work with Demit’s colors, but the vibe wouldn’t match his work.
Accessibility Compliance
Demit’s color palette was perfect for canvases, but not for websites. If I were to incorporate his colors into the user interface, they needed to be optimized for accessibility compliance.
How Might We…
How might I match Demit’s style to create a fun visual experience?
How might we stay accessible while incorporating an artist’s style?
How might we introduce a vibrant artistic style while maintaining an accessible experience?
The Challenges
The Solution
Let’s create a new “light mode” theme for the Gap Threads website, and ensure any colors used from Demit’s palette meet the latest accessibility guidelines.
The Discovery
Business Needs
Work with Demit to make this another successful collaboration.
User Needs
Just like the two prior collaborations, users should be able to learn…
- about Demit Omphroy
- how the non-fungible token (NFT) collection process works
- when key events take place and take action during those events.
The Design
Light Mode
I briefly collaborated with another designer named Paolo, the former Gap Threads lead designer. Together, we created the new light mode color palette for the Gap Threads website.
Branding
Once the light mode theme was created, I started rebranding the Gap Threads website for Demit, bringing in his backstory and artistic flair. He generously designed custom graphics for key areas of the website, which I integrated into the experience. I noted to developers that those graphics needed alternative text within the code.
To complement Demit’s style, I added playful doodles and splashes of color throughout the website. I even designed a pastel blur background inspired by his artworks. This detail was so well-received that the background was later used on the Gap x Demit non-fungible tokens (NFTs).
Speaking of splashes of color, some of Demit’s color palette didn’t comply with the latest WCAG 2.2 AA accessibility guidelines. To combat this problem, I subtly darkened the UI colors until they complied. That way, I didn’t deviate far from Demit’s branding.
Condensing
Once the Gap x Demit website was visually finished, I began condensing the website without disrupting the user experience or removing any important information.
The Final Results
Outcomes
So, how did we introduce a vibrant artistic style while maintaining an accessible experience?
New Web Theme
Created a new website theme
Branding Collaboration
Worked with Demit to match his branding
Accessibility Check
Ensured all graphics had alternative text and colors met the latest WCAG 2.2 AA accessibility guidelines
Experiences
Interact with Landing Page
Outcomes
So, how did we introduce a vibrant artistic style while maintaining an accessible experience?
Project Achievements
Over 8,560 NFT Sales Accomplished*
Over 9,670 Unique Owners Purchased*
Over $19,000+ in Crypto Revenue Earned*
*Estimates from the Tezos blockchain
The Final Results
My Takeaway
Following accessibility guidelines doesn’t have to limit creativity.
Credits
Project Management
Sudhakar Potineni
Senior Director of Project Management
Trent Hoverman
Senior Project Manager
Software Engineers
Nico Curl
Software Engineer
Scott Teschendorf
Software Engineer
User Experience
Morgan Shada
Copywriter
Paolo Duerte
UI/UX Designer
Raven Caffey
UI/UX Designer
External Partners
Demit Omphroy
Artist
UI/UX Design Portfolio: Year 6 Edition
Case Study
Perfecting a Playful Palette for Accessibility
How might we introduce a vibrant artistic style while maintaining an accessible experience?
Accessibility-First Design (A11y)
External Partnership
Visual Design
WCAG 2.2 AA
A Collaboration Between 4 Teams:
Project Management, Software Engineering, User Experience, & Demit Omphroy (External Collaborator)
At a Glance
Chapter 01
The Challenges
- The theme of the Gap Threads website wouldn’t match Demit’s branding.
- Most of Demit’s color palette didn’t comply with accessibility standards.
Solution: Let’s create a new “light mode” theme for the Gap Threads website, and ensure any colors used from Demit’s palette meet the latest accessibility guidelines.
Chapter 02
The Discovery
The team needed to ensure that this was another successful collaboration, while ensuring users could easily learn about Demit, understand the non-fungible token (NFT) collection process, and engage with key events.
Chapter 03
The Design
I created a light mode theme for the Gap Threads website and rebranded it with Demit’s artwork.
Chapter 04
The Final Results
- A new “light mode” webpage theme was created.
- A webpage that matched Demit’s branding.
- All colors met WCAG 2.2 AA accessibility guidelines.
My Takeaway: Following accessibility guidelines doesn’t have to limit creativity.
Fine Print
Role
Lead UX Designer
Lead Visual Designer
Responsibilities
UX Design
Visual Design
Duration
2 Months
Tools
Figma
Adobe Photoshop
Primary Deliverables
Rebranded Webpage
Reusable "Light Mode" Theme
Display Ads
Social Media Graphics
Web Graphics
Discord Stickers
Secondary Deliverables
High-Fidelity Wireframes
Prototypes
UI Assets
Company
Gap Inc.
Industry
Apparel Retail
Crypto
Web3
Outline
Front Matter
Chapter 01
Chapter 02
Chapter 03
Chapter 04
Appendix
The Introduction
Gap Threads, the innovation team behind the Gap brand, was set to launch our third Gap x [Artist] installment, following our successful collaborations with Frank Ape and Dapper Dan. This time, the spotlight was on the vibrant artist Demit Omphroy.
Demit Omphroy has been creating his entire life—creating, unlearning, and relearning, even if his efforts don’t lead to him painting. It's part of his process, and his process produces whimsical works loved by many, including Gap.
The Challenges
Mismatched Aesthetics
Demit had an art palette bursting with color, which was perfect for a blank canvas; however, the Gap Threads website was a canvas set in dark mode—which could still work with Demit’s colors, but the vibe wouldn’t match his work.
Accessibility Compliance
Demit’s color palette was perfect for canvases, but not for websites. If I were to incorporate his colors into the user interface, they needed to be optimized for accessibility compliance.
How Might We…
How might I match Demit’s style to create a fun visual experience?
How might we stay accessible while incorporating an artist’s style?
How might we introduce a vibrant artistic style while maintaining an accessible experience?
The Challenges
The Solution
Let’s create a new “light mode” theme for the Gap Threads website, and ensure any colors used from Demit’s palette meet the latest accessibility guidelines.
The Discovery
Business Needs
Work with Demit to make this another successful collaboration.
User Needs
Just like the two prior collaborations, users should be able to learn…
- about Demit Omphroy
- how the non-fungible token (NFT) collection process works
- when key events take place and take action during those events.
The Design
Light Mode
I briefly collaborated with another designer named Paolo, the former Gap Threads lead designer. Together, we created the new light mode color palette for the Gap Threads website.
Branding
Once the light mode theme was created, I started rebranding the Gap Threads website for Demit, bringing in his backstory and artistic flair. He generously designed custom graphics for key areas of the website, which I integrated into the experience. I noted to developers that those graphics needed alternative text within the code.
To complement Demit’s style, I added playful doodles and splashes of color throughout the website. I even designed a pastel blur background inspired by his artworks. This detail was so well-received that the background was later used on the Gap x Demit non-fungible tokens (NFTs).
Speaking of splashes of color, some of Demit’s color palette didn’t comply with the latest WCAG 2.2 AA accessibility guidelines. To combat this problem, I subtly darkened the UI colors until they complied. That way, I didn’t deviate far from Demit’s branding.
Condensing
Once the Gap x Demit website was visually finished, I began condensing the website without disrupting the user experience or removing any important information.
The Final Results
Outcomes
So, how did we introduce a vibrant artistic style while maintaining an accessible experience?
New Web Theme
Created a new website theme
Branding Collaboration
Worked with Demit to match his branding
Accessibility Check
Ensured all graphics had alternative text and colors met the latest WCAG 2.2 AA accessibility guidelines
Experiences
Interact with Landing Page
Outcomes
So, how did we introduce a vibrant artistic style while maintaining an accessible experience?
Project Achievements
Over 8,560 NFT Sales Accomplished*
Over 9,670 Unique Owners Purchased*
Over $19,000+ in Crypto Revenue Earned*
*Estimates from the Tezos blockchain
The Final Results
My Takeaway
Following accessibility guidelines doesn’t have to limit creativity.
Credits
Project Management
Sudhakar Potineni
Senior Director of Project Management
Trent Hoverman
Senior Project Manager
Software Engineers
Nico Curl
Software Engineer
Scott Teschendorf
Software Engineer
User Experience
Morgan Shada
Copywriter
Paolo Duerte
UI/UX Designer
Raven Caffey
UI/UX Designer
External Partners
Demit Omphroy
Artist