DreamBox is an online platform where users create/submit generative AI art/designs, then sell those designs as physical products. Examples include plushies, 3d figurines, prints, jewelry, apparel, and digital assets.

To deliver high-quality, complete, responsive (mobile, tablet, desktop) Figma web designs in for the upcoming DreamBox Marketplace.

Cofounder/designer Ivan Surguroff designed the 

 brand, website, and AI creation UI. However, due to the platform’s rapid success and growing cofounder responsibilities, Ivan decided to outsource the design role for new features and products.

My role was scoped solely on the Marketplace: an Etsy-inspired marketplace for generative AI. 

Research for this project was quick and efficient, scoped to DreamBox’s existing offerings and the Etsy’s current live version. Specifically links to browsing and single product templates:

Before beginning the Marketplace UI design, I took the time to first identify brand styles, fonts, colors, and existing components from Ivan’s previous designs. I created a quick brand style guide sheet in Figma to reference as I designed the Marketplace.

dreambox-brand-and-components.jpg

Afterwards I began designing mockups for the Marketplace Home and Single Item Pages. 

The Marketplace Home Page is designed to focus attention on products (primarily) and storefronts (secondarily). The UI grids sit in the background as the image content remains in focus. Inside ProductCard components, product images are intentionally the largest visuals on the screen, to focus the user’s attention and entice them to click through to a product page. Each ProductCard component contains a “quick add to cart” button in the top right corner for impulse buyers.

Searchbar, filters, arrival times, recently viewed queue, and sorting options are all available and logically placed to quickly guide customers to relevant products.

“Good design is as little design as possible”, is a quote by legendary industrial designer Dieter Rams that strongly believe. While not perfect, that ideology shines through these UI designs.

dreambox-marketplace-overview-compressed.jpg

The Marketplace Single Item Page design focus on a single product. All features are aimed to provide relevant, accurate information that would go in to a purchase decision. 

For those just browsing, the following queues are provided on the tops and bottoms of the page: similar items, more items from this shop, and related shops.

dreambox-marketplace-single-compressed.jpeg

The client was very pleased with the finished designs. They judged the designs to be on-brand and to have achieved the project objective: an Etsy-style generative AI marketplace. Upon delivery, they immediately shared the designs with their developers to begin building the marketplace. Very smooth process. I look forward to working with them again someday. 

I spent a lot of time trying to incorporate video reels into the marketplace home design. This ate up a lot of time, and didn’t end up in the final designs. It reiterated an important concept in design: start simple. I could have saved a lot of time by starting simple.

This was my first project designing around AI generative art. I learned a lot about how AI businesses are built, the thought processes behind combining old and new technology, and how to integrate an industry-standard design concept (like an eCommerce storefront) with an exponential technology (Generative AI). I learned a lot about Midjourney, decentralized production, auto layout in Figma, and building an online community around a shared interest.

230903-dreambox-cover.jpg

A.I.

eCommerce

dreambox.png

DreamBox.AI Marketplace Design

The DreamBox Marketplace is a custom eCommerce webapp (currently in development) where customers browse generative AI art/designs from DreamBox creators, then submit orders for physical products using the designs. Essentially Etsy for generative AI.

Web Design

Figma

Midjourney

Telcoin creates fast and affordable, decentralized end-consumer mobile products. Their main two products are a decentralized crypto exchange on the Polygon blockchain and fiat remittance service (bank account to mobile money eWallet).

To design and build a professional and approachable company website that:

To begin, I determined the website structure. Most of the pages are informational, describing the company and relevant information regarding its products (remittances and digital asset trades). 

230910-telcoin-site-structure.jpg

Three components on the site are interactive, enabling the visitor to input information:

With a site structure and brand (created separately) determined, I proceeded to wireframe and design mockups for each page. Below are desktop versions of some of these pages.

The home page introduces the visitor to Telcoin. The purpose is to briefly explain what Telcoin is, the products it offers, and give an easy way to find out more information. It’s an overview of the entire website.

230910-telcoin-home.jpg

Rather than a single About page, it seemed appropriate to segment general information three categories. These became the three about pages: About Company, About The Telcoin App, About The Telcoin Platform. 

230910-telcoin-about-company.jpeg

The Digital Assets page lists the assets available to trade on the Telcoin App. Visitors can easily see what assets are available for trade, and receive basic charting information for each.

230910-telcoin-digital-assets.jpeg

Selecting a digital asset from the list brings you to its Digital Asset page, complete with a historical pricing chart and information on the asset.

230910-telcoin-digital-asset-chart.jpeg

Telcoin’s original flagship product was fiat remittances (sending money abroad) from USA and Canada to eWallets around the globe. The Remittances page’s purpose is to explain the product, show the benefits of Telcoin Remittances, and list the countries where the product is available.

230908-telcoin-remittances.jpg

The Newsroom’s purpose is to keep the visitor up to date on public information regarding Telcoin. It has the following structure:

Telcoin historically released news articles through their [Medium Page](https://telcoin.medium.com/). These same articles can now be viewed in the Newsroom when an article is selected.

230910-telcoin-newsroom.jpg

The support page became one of the most important pages on the website. Any time a customer faces a problem, they are directed to submit a ticket via this page. The simple interface is the entry point for the support team’s entire system. 

230910-telcoin-support.jpg

Depending on the Commercial Team’s needs, one-off pages are sometimes requested for campaigns and conferences they attend. Below is an example when they attended MWC Barcelona 2023.

230910-telcoin-mwc-2023.jpeg

The Telcoin website renewal was successful. The initial project took about two months of full-time work to complete, from initial wireframes to web development code completion. A robust, Next.js web application replaced a single static HTML company page, packed with useful information on the company, its products, and more.

Because we’ve migrated from a static HTML page to a robust web application with programmable CMS and predetermined component library, the web team can now design, build, and test on-brand webpages 10x faster than the previous setup. 

230903-telcoin-cover.jpg

DeFi

Finance

Blockchain

telcoin.png

Telcoin Company Website Design and Development

The Telcoin company website explains about the company and its products. It also has a a list of digital assets with current prices, a newsroom, company jobs postings, a support contact form, and a few campaign marketing pages.

Frontend Engineering

Typescript

TailwindCSS

Next.js

React.js

Adobe Photoshop

Adobe Illustrator

Namonai was a Japanese fine art eCommerce and portfolio creation platform based in Tokyo. The company helped undiscovered Japanese artists manage and sell their artwork globally. The name 'Namonai'  means 'Not even a name' in Japanese.

To create an eCommerce / art exhibition website for Namonai, a Japanese fine art eCommerce and portfolio creation platform based in Tokyo. We had collected 20+ Japanese fine artists interested in the project, and needed to create an English-based website where he could showcase their artworks for sale to the world.

And, of course, it needed a professional brand with complimentary marketing materials for Instagram, Pinterest, etc.

In the beginning, three of us worked on this project as cofounders. Akira focused on business strategy, Alex King focused on full-stack engineering, and I focused on web design and frontend engineering.

The Namonai brand is designed to be simple, pure, calm, and balanced. Colors are mostly grayscale, leaning towards lighter hues. Doing this allows the artists’ work to remain the focus on each page. 

230911-namonai-brand.jpg

The Namonai website was large. At a high level, it included browsing and accounts pages. Dynamic templates included artists’ portfolios, artworks, and artwork collections.

Both artists and collectors could log into Namonai, and depending on their user type, would see different options in their submenus. Collectors could favorite artworks, follow artists, and purchase artworks and paraphernalia. Artists could do all the same, as well as upload artworks and create their own portfolio.

230911-namonai-ecommerce-site-structure.jpg

The artist portfolio page is designed to be simple and comprehensive. We wanted to give our artists a way to share their works without needing to have their own website. The portfolio page include a hero image, profile image, name, about, socials, artworks, collections, history, awards, and exhibitions.

This design was based on actual research - we asked Namonai artists what they would want on a portfolio page.

230912-namonai-profile.jpg

Naturally, Namonai sold Japanese artists’ original artworks (paintings, ceramics, etc). But it also sold prints, shirts, tote bags, and mugs with said artworks on them (like Redbubble). Artwork pages included add-to-cart options for all of these items.

230912-namonai-artwork.jpg

In Winter 2021, Namonai held an online exhibition, introducing Japanese artists to the rest of the world. Our ambassador team of five people found nine Japanese fine artists, catalogued their artworks, and recorded video interviews for the online exhibition. 

Below are some page designs showcasing snippets of the video interviews, the artists, and their artworks.

230912-namonai-exhibition-home.jpeg

Artist interviews were the crux of the online exhibition. Collectors could learn more about the artist, and have the chance to resonate with the way they saw the world. Each artist  interview page contained their interview video, artworks they’d created, their overview, and a link to their profile for more.

230912-namonai-exhibition-artist.jpg

Namonai branding permeated throughout the entire website, including the checkout process. From first view until checkout and beyond, no detail was left unconsidered. 

230912-namonai-confirmation.jpg

We created multiple custom emails for communicating with both artists and collectors. All emails adhered to Namonai brand, colors, typography, and were written in both Japanese and English.

230911-namonai-email.jpg

Alex and I worked on developing Namonai part time (in addition to our full time jobs) for over a year. The project can be considered “complete” when we had launched the Winter 2021 Online Exhibition, as all major function of the site were live.

After launch, we sold around 5 - 10 products over the span of a few months. Likely this was due to lack of marketing effort and no investment to push the business forward. The idea and implementation were objectively good enough, but unfortunately I don’t think we had the skillset or experience to make Namonai succeed. Alex (full-stack developer) and I also had full time obligations that we needed to focus on post-launch. We ended up taking down the Namonai website in early 2023.

230903-namonai-cover.jpg

namonai.png

Namonai Brand, eCommerce Web Design, Frontend Development

The Namonai website was a custom PHP template built on Wordpress and WooCommerce. Notable sections included dynamic artist portfolio pages, artwork pages with checkout options for printing on multiple surfaces, an online exhibition with artist interviews, and a custom checkout flow.

Wordpress.org

WooCommerce

Sass

JavaScript

jQuery

Crystal Vision is visual artist Crystal Apodaca’s brand. Crystal is a talented body painter, illustrator, and multi-media artist.

To design and build an online portfolio that showcased Crystal’s artworks, driving demand for future project requests, collaborations, and commissions. 

Aside from Crystal’s actual artworks, I produced all materials.

To begin, Crystal gathered all recent examples of her artwork into a shared Google Drive folder. This included photographs of her recent body paintings, illustrations, and generative AI artwork. I downloaded all the examples and uploaded them to an fresh Adobe Lightroom Catalogue. In Lightroom, we chose the top artworks in each category, and applied color correction to the photos so that they would be aesthetically pleasing as a whole. We compressed and exported the photos for quick loading on the web.

I asked Crystal to create a list of brand adjectives that she would like to resemble her brand. After a few brainstorming sessions, we solidified the list in the style guide sheet below. Together with ample samples of imagery, I was able to pick a serif font she loved (serif for maturity) and begin developing a color palette focused on simplicity, balance (shades of gray) and creativity (purple). Lastly we added subtle iridescent hues of pink, purple, and blue to the brand, to add a sense of cosmic wonder and harajuku-inspired element.

crystal-vision-brand-style-guide.jpg

Next we needed a general site structure to frame the website’s content. You can think of the structure as an artistic portfolio / shop structure hybrid, expressed in the “Shop” and “Recent Artworks” columns below. The main intention was to give Crystal everything she would need to establish a profitable online presence.

We used a Notion database for project management and content creation. Content was created with the help of GPT4, then organized in Notion.

crystal-vision-site-structure.jpg

Brand and content structure combine to create the UI design below. Colors, typography, and imagery are consistent throughout. The home page structure is logical, in the section order of hero, about, multiple scrollable/clickable artworks organized by type, upcoming events, a contact CTA, and footer.

230824-crystal-vision-home-page.jpg

Components are easily repeatable and harmonic in style. For instance, if another “Recent Works” type is added (for instance, video creation), it could be easily added below “AI Generation”.

The about page explains who Crystal is, gives a bit of her relevant history, and encourages viewers to contact. Visually, it’s another extension of the Crystal Vision brand, with similar styles, components, and imagery as the home page. Imagery and biography compliment each other to give an overall idea of who Crystal is and what she does. 

Header imagery (as well as multiple profile pictures) are all chosen for their harmonious integrations into the brad. You’ll notice that almost everything has a hint of purple (the primary brand color), and lays easy on the eyes when together. The page has a slight metallic silver gradient through the background, which acts as an atmospheric backdrop cleanly tying the content together. 

I wrote the biography based on everything I know about Crystal, and also took most of the pictures with my Nikon D7100 + 35mm prime lens.

230824-crystal-vision-about.jpg

For the contact page, we went with a simple form for a name, email, phone number, and message. All bookings, inquiries, and general messages would come through this form, powered by Webflow. Fields are dark to draw attention to where the viewer should interact with the page. Half of the page is an image of my favorite of Crystal’s artworks, chosen for its quality and intricacy to suggest a professional tone for inquiries.

230824-crystal-vision-contact.jpg

Several other page designs are complete and available upon request.

To date (August 2023), the Webflow development of this site is not complete. However, Crystal has expressed approval and excitement towards the brand and site designs. We will continue once my schedule frees up.

Working with artists is very challenging, as being so visually creative tends to come with a general lack of structure in thought processes. But when you provide high quality structure to their creative expression, the results are often amazing. You have to be careful while doing this though, as your job as a designer is to let their work shine, and not get in the way.

Write more of the content (or asked Crystal to write more of the content) up front. This wasn’t a deal-breaker, but it would have led to a more efficient design and build process.

230903-crystal-vision-cover.jpg

crystal-vision.png

Crystal Vision Website Design

Crystal Vision web design showcases Crystal’s unique visual art style and previous projects, including body painting, illustration, and generative AI artworks. The site includes image galleries, details on each project, about, contact, and upcoming live events.

Webflow

Adobe Lightroom

Notion API

Chat GPT4

reserv is a ticketing platform that use the Polygon blockchain to issue event tickets as NFTs (imagine Eventbrite, but the tickets are NFTs). This empowers event creators to protect attendees from scams, capture revenue from secondary ticket sales, provide loyalty rewards, and deliver digital artwork collectibles for events verified on-chain.

To create a real-world use for blockchain technology.

To design and develop a brand and web3 ticketing application that:

I was one of three co-founders for reserv, overseeing Product. My role included:

In regards to the application specifically, I focused on design (100%) and frontend web development (40%). A full-time fullstack developer (another co-founder) and a blockchain developer also contributed heavily to bring this project to life.

In September 2022, I was visiting Medellin, Colombia, where I met the other two co-founders of reserv. We spent weeks brainstorming how to use our combined blockchain development knowledge/experience to create a web2-like web3 product that solved for a real-world use case. 

Eventually we landed on the concept of “reservations on the blockchain”. We chose this because we believed the verifiability, immutability, and proof of ownership of NFTs on the blockchain would translate well to buying and selling reservations. The idea was scalable, challenging, and exciting. It was something we all wanted to use in real life. “Reservations on the blockchain” led to the brand name “reserv”. It was slick, catchy, and relevant to the fundamental product offering. We would try to build a B2B2C platform.

A few weeks in to designing the “reservations on the blockchain” UI / UX, we realized that the concept would be hard to sell. It was difficult determining a specific niche to target, and therefore difficult to go zero to one with a focused brand, marketing message, and target market.

After consideration, we pivoted reserv to “ticketing on the blockchain”. This new concept was easier to brand, easier to explain, and easier to define target markets (event creators, music venues, conferences, exclusive parties). Personally, I was more excited about this direction because it was a way for me to combine my love for music and live events with a challenging project aimed at bringing real-world value to an exciting industry.

I took the concept of “ticketing on the blockchain” and created basic brand building blocks: logo, colors, personality, fonts, and icon library selection (Google Material Icons). The brand was attractive, mature, sexy, simple, legitimate, helpful, and easy. Gold was chosen as a primary color for its cultural relevance to hint luxury and attractiveness. Black as a primary backdrop was chosen for its elegance and allusion to nightlife. 

230103-reserv-brand-style-guide.jpg

Above all else, event page design and development was my primary focus. This is where our customer’s customer (event attendees) first experienced the product. First impressions needed to be perfect. The UX had to make sense, the UI had to impress, and the checkout process had to be seamless. If our customer’s customers were happy, then we knew our customer would be too.

The event pages intentionally displayed the most relevant information about the event first: the flyer, title, brand, date, time, location, image gallery, and about section. We also included the smart contract address for each event for web3 savvy individuals.

230827-reserv-event-page.jpg

Once purchased or claimed, NFT tickets and their accompanying QR codes were accessable anytime from the “Tickets” link in the left side navigation. The tickets view displayed relevant information about each ticket: event creator logo, ticket artwork,  ticket tier, ticket ID, event title, event date, event time, and redeemed status. Tapping on a ticket displayed the right side dynamic sheet, which displayed more information about the ticket, as well as the QR code denoting proof of ownership of the ticket (verified on the blockchain).

230827-reserv-profile-tickets.jpg

When checking in to an event, all attendees displayed these QR codes to prove ownership of their NFT ticket. An event verifier would then scan the QR code, verify the legitimacy of the ticket on the Polygon blockchain, and grant the attendee access to the event.

Web Application Design - Event Creator Dashboard

In the Event Creator Dashboard, event creators can see their current ticket sales, edit payment details, initiate loyalty programs, and add / edit events. It’s the B2B part of the B2B2C product offering, accessible to anyone who has created an event on the platform. 

230827-reserv-event-creator-dashboard-1.jpg

With reserv, I tried many different social media marketing strategies. Examples included customer success stories, industry updates, educational material, product benefits, and new product features.

reserv was at the intersection of ticketing and web3. Whenever there was a development in the industry we created Instagram and LinkedIn posts to share the news with our followers. You can see an example of this below, when an Argentinian airline began selling tickets as NFTs. 

For content, I took the source article, then had ChatGP4 summarize it into an 8-view Instagram reel. For the image, I asked Midjourney to create an airplane using reserv’s brand colors. Then I laid out the content and images in Figma to export post images. This specific post was our most popular post (most likes).

230827-reserv-instagram-marketing-flybondi.jpg

Below are more examples of individual social media posts I designed, including upcoming events, customer success stories, industry updates, product benefits, and product features. 

230827-reserv-instagram-marketing-general.jpg

In order to pitch reserv as a ticketing solution to venues, I wrote content and designed a pitchdeck for our sales team. Below are a few slide designs from the final presentation deck design. 

230827-reserv-pitchdeck.jpg

By early Q2 2023, the reserv MVP features were designed and developed, and we had launched around five irl events on the platform in Miami. The application was functional and truly did mint tickets as NFTs on the Polygon blockchain. reserv was gaining momentum and positive interest from the web3 community. We received constant positive feedback from both event creators and event attendees.   

To understand the effectiveness of our efforts, I decided to take responsibility and be doorman, ticketing our first four customers’ events in person. The last of these was the 

 event on April 7, 2023. This event attracted around 400 attendees. I used this opportunity to gain as much feedback as I could about reserv’s ticketing process:

Strategically, I would have spent more time understanding the current problems of the ticketing industry, and determine if there was a real solution that we could build that would solve those problems. I would ensure that the product we built was demand-based. That it solved for common pain points rather than just “added value”.

Design-wise, before beginning UI/UX design of the ticketing platform, I would have spent more time researching:

230903-reserv-cover.jpg

Web3

Ticketing

reserv.png

reserv Blockchain Ticketing Webapp Design and Co-Development

The reserv webapp is reserv’s flagship product. Initial design and development took around 7 months, and included marketing webpages, a full-fledged ticketing application on Polygon, event pages, and an event creator dashboard.

Strapi

RainbowKit

Polygon

GraphQL

Punta Brava is a luxury private golf and surf club located on the Pacific coast of the Baja Peninsula in Mexico. It's particularly known for its golf course, which is designed by legendary golfer Tiger Woods. By extension, Punta Brava Virtual Club is a member-led web3 virtual club representing the brand’s philanthropic arm. The virtual club focuses on philanthropy through securing donations for Punta Brava Medical (a Christian humanitarian organization) and Beyond the Brotherhood (a Navy SEALs post-active duty transition assistance program).

To design an NFT minting page for Punta Brava Virtual Club that:

Punta Brava Golf & Surf Club is a professional, established brand. When extending that brand to Punta Brava Virtual Club, special care was taken to preserve brand elements like existing typeface, imagery, spacing, components, and textures. 

About 70% of the PBVC brand is gathered from PBG&SC, the other 30% created to distinguish it from the parent brand. Particularly the selection of primary teal color, icon, abalone, certain grays, and web3 references put the “Virtual Club” in “Punta Brava Virtual Club”.

230619-punta-brava-virtual-club-brand-style-guide.jpg

Good design starts with pen and paper, or in my case, Apple Pencil and iPad. Below are wireframes for the PBVC webpage. The order of sections is intentional, aimed at providing the user with successive information required to make their purchase decision:

230619-punta-brava-virtual-club-wireframe.png

The webpage design below utilizes both PBVC brand and wireframe structure to showcase a page that is both professional and logical, with high quality content. The page is educational, honest, and inviting.

The hero and header navigation are the main “web3” elements of the page. Namely, a wallet connection button (to implement 

), as a minting section for the 1,800 membership NFTs.

The rest of the page details membership and philanthropy opportunities, as well as giving a nod to the Apes who commissioned the project.

Tablet and Mobile design versions available upon request.

220718-punta-brava-home.jpeg

Not included in the original PBG&SC brand, dark mode was requested to pay homage to the Nave SEALs involved in the project.

220718-punta-brava-home-dark.jpg

The three Apes who commissioned the project (Brass Grass, LT Trippy, and Highseas) loved the designed I created for them. The end product was a successful page that truly felt like an extension of the Punta Brava Golf & Surf Club, while tying in web3 and charity efforts for the local medical organization and Navy SEALs. 

Sadly, I don’t think these designs were ever developed. Last I heard, the Apes were waiting for the NFT market to turn back around to create the site and launch the 1,800 PBVC NFTs.

The designs provided above do not include the actual NFT artwork. If I did this project again, I may ask for the actual artwork before the UI UX design, then alter the website styles around it.

230903-punta-brava-cover.jpg

punta-brava.png

Punta Brava Virtual Club NFT Mint Website Design

The PBVC NFT mint website is a minting portal for the 1,800 available Punta Brava Virtual Club NFTs. The NFTs come with membership benefits, including access to exclusive IRL events, opportunities to interact with US Navy Seals, and member-only merchandise. The website details the program, benefits, and the club’s philanthropic efforts.

TELx is the decentralized liquidity engine of the Telcoin Platform. It’s a group of liquidity pools composed of two or more crypto assets (for example, a pool of 50% TEL 50% USDC). As of this writing, there are 32 pools, all on the Polygon Network. TELx liquidity pools are used to power DeFi transactions on the Telcoin Platform, such as crypto trades.

To design and build a web-based portal to allow users to provide liquidity to the Telcoin Platform and earn rewards for doing so.

Specifically, the application would enable users to:

Initial concept, general direction, documentation articles, and blockchain engineering (smart contracts) were provided. After a year, another frontend engineer joined to help update and maintain the project.

The home page is designed to guide users through understanding what TELx is at a high level. It explains the protocols it’s built on, the two products it powers (groups of liquidity pools), and how it works. This redesign was created mobile first.