Theme Designer
Theme Designer
I took charge of the design project for Microsoft’s PowerNFT platform, from inception to end.
I took charge of the design project for Microsoft’s PowerNFT platform, from inception to end.
Duration
Duration
5 Months
5 Months
Role
Role
Product Designer
Product Designer
Company
Company
Microsoft
Microsoft
Project type
Project type
UX/UI, SaaS, Web3
UX/UI, SaaS, Web3
Tools
Tools
Figma, Teams
Figma, Teams
01
01
Background
Background
The “Theme Designer” feature was intended to be a supplement to the PowerNFT platform, which serves as a centralized hub for brands to manage and trade their Non-fungible Tokens (NFTs). Moreover, the platform can support brands’ marketing campaigns and promotes NFT airdrops. Please see table below for the PowerNFT product roadmap.
The “Theme Designer” feature was initiated to be a supplement to the PowerNFT platform, which serves as a centralized hub for brands to manage and sell their Non-fungible Tokens (NFTs). Moreover, the platform can support brands’ marketing campaigns and promotes NFT airdrops. Please see table below for the PowerNFT product roadmap.
02
02
Role Duties
Role Duties
As the sole designer leading this “Theme Designer” feature, I took charge of various project aspects, from competitor analysis and function planning to high fidelity-design and design iterations.
As the sole designer leading this “Theme Designer” feature, I took charge of various project aspects, from competitor analysis and function planning to high fidelity-design and design iterations.
03
03
Outcomes
In 5 months, I designed this feature from the ground up and led over 4 rounds of design iterations, resulting in the fruition of the Theme Designer MVP, which expands the capabilities of the PowerNFT platform. The final designs were delivered to devs for implementation.
In 5 months, I designed this feature from the ground up and led over 4 rounds of design iterations, resulting in the fruition of the Theme Designer MVP, which expands the capabilities of the PowerNFT platform. The final designs were delivered to devs for implementation.
04
04
Design Problem
Design Problem
Before the Theme Designer feature, PowerNFT offered only 2 storefront theme templates for brands to select from. Recognizing that many brands had established visual identities, management identified the necessity for customizable storefront design to suit brands’ various needs.
Before the Theme Designer feature, PowerNFT offered only 2 storefront theme templates for brands to select from. Recognizing that many brands have their own established visual identities, management identified the necessity for customizable storefront design to suit brands’ various needs.
05
05
Target Users
Target Users
Any major NFT brand or established business can be the beneficiary of the “Theme Designer” feature. They can leverage it to create a unique design language to make their storefront stand out to buyers or simply ensure the store appearance remains aligned with existing brand visual identities.
Any major NFT brand or established business can be the beneficiary of the “Theme Designer” feature. They can leverage it to create a unique design language to make their storefront stand out to buyers or simply ensure the store appearance remains aligned with existing brand visual identities.
06
06
Hifi Showcase
Hifi Showcase
The showcase highlights part of the final design. The theme settings panel on the left allows users to manipulate various metrics to adjust the store look. On the right, the preview area displays the changes in real time. Additionally, the top tool bar provides extra controls including page selector, undo/redo, and preview mode toggle.
The showcase highlights part of the final design. The theme settings panel on the left allows users to manipulate various metrics to adjust the store look. On the right, the preview area displays the changes in real time. Additionally, the top tool bar offers extra controls including page selector, undo/redo, and preview mode toggle.
07
07
Storefront Design
Storefront Design
The section below offers an in-depth demonstration of storefront designs, which serve as the foundation for the Theme Designer feature.
The section below offers an in-depth demonstration of storefront designs, which serve as the foundation for the Theme Designer feature.
Storefront Sitemap
Storefront Sitemap
The following sitemap illustrates the overall structure of the NFT storefront and relationships between various pages.
The following sitemap illustrates the overall structure of the NFT storefront and relationships between various pages.
08
08
General settings
General settings
There are four setting categories in general settings, which are “Color,” “Typography,” “Theme Selection,” and “Header/Footer.” All these settings are applied across the site. Store admins can simply adjust the metrics in general settings and the changes will pass down to various page elements. In other words, general settings provide a default value for page elements. In contrast, page settings gives admins more control over individual page elements, allowing them to make exceptions to override the defaults.
There are four setting categories in general settings, which are “Color,” “Typography,” “Theme Selection,” and “Header/Footer.” All these settings are applied across the site. Store admins can simply adjust the metrics in general settings and the changes will pass down to various page elements. In other words, general settings provide a default value for page elements. In contrast, page settings gives admins more control over individual page elements, allowing them to make exceptions to override the defaults.
Existing Templates
Existing Templates
PowerNFT offers 2 theme templates for all brands. The classical theme has a solemn look, ideal for traditional businesses, while the colorful theme emanates a more vibrant atmosphere.
PowerNFT offers 2 theme templates for all brands. The classical theme has a solemn look, ideal for traditional businesses, while the colorful theme emanates a more vibrant atmosphere.
Template Selection
Template Selection
Admins can select either theme template on the left panel. Both come with default settings to serve as the starting point for theme customization.
Admins can select either theme template on the left panel. Both come with default settings to serve as the starting point for theme customization.
Text Hierarchy
Text Hierarchy
Before delving into typography settings, I dissected every storefront page and extracted all text elements in the page. Afterwards, I categorized these elements based on text hierarchy and semantics, assigning labels ranging from “H1” all the way to “Caption” to each category. In the process, I made adjustments to the text elements when necessary to make sure those in the same category remain consistent in font size.
Before delving into typography settings, I dissected every storefront page and extracted all text elements in the page. Afterwards, I categorized these elements based on text hierarchy and semantics, assigning labels ranging from “H1” all the way to “Caption” to each category. In the process, I made adjustments to the text elements when necessary to make sure those in the same category remain consistent in font size.
Typography Settings
Typography Settings
Below is the complete text hierarchy of the storefront design. On the right, I also indicated the usage scenarios for each text category. This hierarchy was used as the guidance for the typography settings later on.
Below is the complete text hierarchy of the storefront design. On the right, I also indicated the usage scenarios for each text category. This hierarchy was used as the guidance for the typography settings later on.
Color Settings
Color Settings
Color settings allow admins to change color on a variety of page elements, including text, buttons, and backgrounds. Furthermore, a snippet of the selected color is displayed in the color selector for easy reference.
Color settings allow admins to change color on a variety of page elements, including text, buttons, and backgrounds. Furthermore, one snippet of the selected color is displayed in the color selector for easy reference.
Header & Footer
Header & Footer
The header and footer settings enable store admins to customize multiple elements, including text, background, icon, and search bar. See below for a structural analysis of the page header and footer.
The header and footer settings enable store admins to customize multiple elements, including text, background, icon, and search bar. See below for a structural analysis of the page header and footer.
Header Structure
Header Structure
Footer Structure
Footer Structure
09
09
Page settings
Page settings
I categorized page settings into six main sections, including “Text,” “Page Background,” “Button,” “Card Grid,” “Carousel,” and “Other.” While some settings overlap with general settings, such as text and color settings, they provide finer control at the page level. Others are totally new additions, such as card grid and carousel settings. Collectively, they provide admins with the complete toolkit to customize the store theme as they wish.
I categorized page settings into six main sections, including “Text,” “Page Background,” “Button,” “Card Grid,” “Carousel,” and “Other.” While some settings overlap with general settings, such as text and color settings, they provide finer control at the page level. Others are totally new additions, such as card grid and carousel settings. Collectively, they provide admins with the complete toolkit to customize the store theme as they wish.
Homepage
Homepage
Carousel Settings
Carousel Settings
Three layout types are available to display cards in the carousel, with an “Autoplay” option at the bottom.
Three layout types are available to display cards in the carousel, with an “Autoplay” option at the bottom.
Top collection
Top collection
Brands can feature up to 3 top NFT collections. When the max number is reached, the “Add Top Collection” button will be disabled.
Brands can feature up to 3 top NFT collections. When the max number is reached, the “Add Top Collection” button will be disabled.
Collection Gallery
Collection Gallery
Background
Background can be filled with color or image. If both are set, the image will override the color. Furthermore, adjustable overlay ensures proper contrast between image and text.
Background can be filled with color or image. If both are set, the image will cover the color. Plus, adjustable overlay can ensure proper contrast between image and text.
Text Editor
Admins can edit text content in the text editor. Various formatting tools are also available to make text bold, italic or change color.
Admins can edit text content in the text editor. Various formatting tools are available to make the text bold, italic or change color.
Collection Detail
Collection Detail
Text Color settings
Text Color settings
The colors of various text elements can be customized, including titles, body text, captions, etc.
The colors of various text elements can be customized, like titles, body text, captions.
Note: The text color settings are used for text elements whose content is not editable, such as NFT names or system instructions, whereas the text editor is used on text elements with customizable content, like titles or tag lines.
Note: The text color settings are used for the text elements whose content is not editable, including NFT names or system instructions, whereas the text editors are used on text elements with customizable content, like titles or tag lines.
Icon Settings
Icon Settings
Icon color and icon outline color can be revised as well to match brands’ visual language.
Icon color and icon outline color is adjustable as well to match brands’ visual language.
NFT Gallery
NFT Gallery
Filter Settings
Filter Settings
The filter settings enable admins to customize the colors of a variety of elements in the filters, like outline, background, icon and text.
The filter settings enable admins to customize the colors of a variety of elements in the filters, like outline, background, icon and text.
Card Grid Layout
Card Grid Layout
This section supports adjustment of card visual styles, such as color and shadow, and card grid spacing.
This section supports adjustment of card visual styles, such as color and shadow, and card grid spacing.
NFT Detail
NFT Detail
Tab Settings
Tab Settings
Tab settings enable users to modify the tab background and label colors in 2 states: active and default.
Tab settings enable users to modify tab background and label colors in 2 states: active and default.
Button settings
Button settings
In button settings, store admins can edit the button label, change outline and background styles, and specify a destination for the button.
In the button settings, store admins can edit the button label, change outline and background styles, and specify a destination for the button.
Airdrop Detail
Airdrop Detail
Tag settings
Tag settings
Tag settings allow admins to modify the colors of tag background, label, and icon.
Tag settings allow admins to modify the colors of tag background, label, and icon.
Image Focal Point
Image Focal Point
It’s likely that users prefer to display some specific area of the uploaded image. This is where the image focal point feature comes in handy.
It’s likely that users prefer to display some specific area of the uploaded image. This is when the image focal point feature comes in handy.
09
09
Design Iterations
Design Iterations
More than 4 rounds of iterations were completed over the course of this project. With each iteration done, the Theme Designer feature moved one step closer to fruition.
More than 4 rounds of iterations were completed over the course of this project. With each iteration done, the Theme Designer feature moved one step closer to fruition.
Font Selector
Font Selector
The font selector component is mostly used in “General Settings” to set up the typeface for the entire storefront site.
The font selector component is mostly used in “General Settings” to set up the typeface for the entire storefront site.
Collection menu
Collection menu
The collection menu is a homepage component that enables admins to pick collections for display in the “Carousel” or “Top Collection” sections.
The collection menu is a homepage component that enables admins to pick collections for display in the “Carousel” or “Top Collection” sections.
Image Upload
Image Upload
The image upload component allows admins to upload images to serve as the backgrounds of various page sections.
The image upload component allows admins to upload images to serve as the backgrounds of various page sections.
Button Settings
Button Settings
Initially, I established a clear division between solid and outline buttons. However, upon further examination of other design systems, I realized that some outline buttons could also have a solid background, and vice versa for solid buttons. As a result, I removed the button division in Version 3. Please see below for more details.
Initially, I established a clear division between solid and outline buttons. However, upon further examination of other design systems, I realized that some outline buttons could also have a solid background, and vice versa for solid buttons. As a result, I removed the button division in Version 3. Please see below for more details.
Top Bar Settings
Top Bar Settings
The top bar provides essential tools to help admins make changes to their store theme. The following offers a glimpse into its iteration process.
The top bar provides essential tools to help admins make changes to their store theme. The following offers a glimpse into its iteration process.
Card Grid Settings
Card Grid Settings
Card grid is crucial within Theme Designer as it appears on multiple pages. It underwent over 5 rounds of iteration to reach the latest version. During this process, I researched various design tools for reference.
Card grid is crucial within Theme Designer as it appears on multiple pages. It underwent over 5 rounds of iteration to reach the latest version. During this process, I researched various design tools for reference.
10
10
Project Takeaways
Project Takeaways
Taking on this project was a great learning opportunity for me. There are times when design problems got really challenging, but overcoming each obstacle has contributed to my personal growth as well.
Taking on this project was a great learning opportunity for me. There are times when design problems got really challenging, but overcoming each obstacle has contributed to my personal growth as well.
Glimpse into Web3
Glimpse into Web3
The Web3 world was uncharted territory to me before. In order to prepare for this project, I acquired Web3 domain knowledge by extensively reading newsletters and researching competitor products. All this new knowledge will enable me to get up to speed when I work on other Web3 projects.
The Web3 world was uncharted territory to me before. In order to prepare for this project, I acquired Web3 domain knowledge by extensively reading newsletters and researching competitor products. All this new knowledge will enable me to get up to speed when I work on other Web3 projects.
Design within System
Design within System
Throughout this project, I regularly referenced Microsoft’s design systems to ensure that my designs aligned with the corporate design language. This experience of working within design systems will help me adapt to other established design systems in the future.
Throughout this project, I regularly referenced Microsoft’s design systems to ensure that my designs aligned with the corporate design language. This experience of working within design systems will help me adapt to other established design systems in the future.
11
11
Hifi Prototypes
Hifi Prototypes
Below displays the hifi prototypes of Theme Designer. Please click through flows on the left to see how settings are configured for each page.
Below displays the hifi prototypes of Theme Designer. Please click through flows on the left to see how settings are configured for each page.
Thank you for stopping by.
Previous
UP next
