Designing a responsive marketplace website

Client:

Cyberpunk Hardware Decentralized Autonomous Organization (DAO)

Industry:

Bitcoin | Computer hardware | E-commerce

Role:

UX designer | UI designer | Visual designer | Creative director

Collaborators:

Cyberpunk founders | CEO

Output:

Tools:

Proto-

type

Context:

The Cyberpunks want to give people more privacy, security, and control over their cyber lives.

By designing, handcrafting, recycling, testing, and distributing computing hardware and instructional kits, the Cyberpunks enable users to construct personal lightning node networks.

These networks facilitate decentralized computing and open-source app usage, offering an alternative to centralized systems and third-party services.

Additionally, the Cyberpunks emphasize self-custody of cryptocurrency, ensuring that users have ownership of their digital assets.

Provide a concise summary of the project's goals, objectives, and requirements. Outline the problem or opportunity that the product aims to address or capitalize on. The brief paragraph may include information on the desired features, functionalities, or target market of the product. It should also mention any specific constraints or limitations that need to be considered during the design process, such as budget, time, or technical requirements.

Principles:

Decentralized Empowerment
Design with the ethos of decentralization at the forefront, reflecting the Cyberpunks' commitment to individual empowerment, privacy, and control over digital assets.
User-Centric Design
Prioritize user needs and experiences by ensuring the website is accessible, intuitive, and user-friendly, catering to a diverse range of technical backgrounds and abilities.
Crypto-Aesthetic Authenticity
Design with an authentic cyberpunk-inspired aesthetic that resonates with the target audience, emphasizing innovation and individuality.
Modularity and Scalability
Build a modular and scalable design system that accommodates the evolving product line and allows integration of new features and functionalities.

Scope:

Design a comprehensive marketplace website.

Create an authentic cyberpunk-inspired visual design that resonates with the target audience.

Include intuitive product display and purchase functionalities, integration of cryptocurrency payment options (such as bitcoin), and a community section for user engagement and guidance.

Discovery through comparative analysis and user interviews:

To begin, I collaborated closely with the Cyberpunks to understand their mission, values, and market positioning. Given my limited personal experience in this domain, thorough research was important.

I conducted an in-depth analysis of websites offering products and services for decentralized networks to assess content, features, and aesthetics. This comparative analysis helped identify standard features for the Cyberpunk Hardware website and revealed opportunities for differentiation.

The user interviews uncovered user needs and desires, which informed the development of a persona with specific qualities and philosophies. This persona highlighted characteristics such as a strong desire for security, autonomy, and community, as well as an affinity for punk or anti-establishment sensibilities.

Zippo represents a privacy-conscious individual who values principles, experimentation, and community engagement. They aim to build a Bitcoin lightning node and self-custody their crypto.

Key findings:

Differentiation potential
Direct and indirect competitors were analyzed, revealing key areas where Cyberpunk Hardware can excel. Clear and engaging aesthetics, aligned with the brand's philosophies, will set the website apart.
Educational Engagement opportunities
Users can be encouraged to engage with educational materials that explain the principles of sovereign computing. Users' desire to share knowledge with the community aligns well with the brand's values.
Newsletter vs. Chat Networks
Newsletter signup is not aligned with the group's philosophies due to honeypot concerns. Instead, using chat networks for updates and interactions aligns better with the community's values.

Potential challenges:

Scalability
Designing the website to accommodate an evolving line of products and features, as well as a growing community, without sacrificing the user experience.
Technical Jargon
The technical nature of decentralized computing components might be challenging for users who are less familiar with the terminology and concepts.
Balancing Aesthetics and Information
Creating clear and engaging aesthetics while providing comprehensive guidance on component compatibility and installation can be a design challenge.
Community Engagement
Building a collaborative community for troubleshooting and support requires careful design considerations to ensure a seamless and engaging experience.
Cyberpunk Aesthetic
Capturing the authentic cyberpunk aesthetic while ensuring the website remains user-friendly and accessible might present design challenges.

Wireframes and information architecture:

The development process began with a detailed content inventory outlining the functionality of the landing page, the market page, and individual Product pages. Wireframe sketches were created to rapidly iterate and refine ideas for displaying content, ensuring a logical flow and clear user journey

Click through wireframes increasing fidelity

Moodboard and Brand Identity:

A brand feeling exercise with stakeholders helped define key brand attributes. The resulting collection of keywords informed the brand direction.

Pioneering
Futuristic
Grungy
Anti-establishment
Punk
Candid
Clever
Honest
Eclectic
Dynamic
Authentic
Early-internet nostalgia

The exercise informed informed by a moodboard that captured the brand aesthetics and guided decisions on typography, color palette, and visual elements.

The moodboard brings together aesthetic references for the visual design

Bringing together visual design elements:

Cyberpunk Hardware logo
The logo design drew inspiration from the moodboard's retro computer text vibe.
Iterative exploration of typefaces led to the selection of a two-line, pixelated logo design that balanced legibility and the desired esoteric brand feeling.
Adjustments to kerning, line spacing, and letter form corners contributed to a cohesive and balanced logo.
Typography
Typefaces were selected to enhance the brand feeling and to ensure a balanced hierarchy and readability.
Color Palette
After multiple iterations, a dark mode color palette was chosen to best capture the intended aesthetic.
The green chosen for text met accessibility standards and achieved the desired retro future/hacker mood against the dark background. Bright accent colors were incorporated to highlight key elements and create visual interest.
Hover States and Interaction
Design elements were developed to enhance user interactivity.
Color-inverted hover states were applied to buttons to indicate clickability, while differentiated color hover states were used for other clickable features like shopping cart and hamburger icons.

Creating a mascot and animated gif:

The creation of a mascot, inspired by sketches provided by the Punks, became a defining visual element. The mascot, represented by TVs "communicating" through glitches and changing colors, symbolized the community's conversations, knowledge-sharing, and exchanges. Animated GIFs added dynamism to the mascot and enriched the brand's visual identity.

Two punks "talking" about bitcoin and lightening nodes

Transition from Sketches to Photographs:

The choice to use photographs instead of illustrations for products was driven by the need for clear and realistic depictions of the hardware.

While the Cyberpunks initially considered illustrations for their product lineup, this approach posed challenges in terms of user comprehension and the practical feasibility of continuous illustration work as the product range grew.

Opting for photographs over illustrations not only ensured accurate representations of the hardware but also addressed uncertainties for users. Adopting a standardized photographic style allowed the Cyberpunks to maintain a cohesive visual approach across all products.

A concept for a product illustration with annimation

The final product image convention

Communicating Cyberpunk Hardware value propositions:

I faced a challenge to effectively communicate the Cyberpunks' various value propositions without overwhelming users with dense chunks of copy or individual concepts. As the design evolved into higher fidelity wireframes, a strategic approach was taken to address this challenge.

The solution involved incorporating a scrolling text banner. The dynamic element was strategically placed below the hero section and was repeated throughout the site. This design choice allowed for the efficient conveyance of important information to users while maintaining an engaging visual experience.

The scrolling text banner served as a user-friendly solution that effectively conveyed complex value propositions in a digestible format, ensuring that users could quickly grasp the key benefits offered by Cyberpunk Hardware's products and services.

The scrolling text banner calls out Cyberpunk Hardwares value propositions

Results:

The final design blends aesthetics, functionality, and project goals into a compelling whole.

I created a brand identity that stands out and resonates with the target audience. Combining dark mode with neon accents taps into early internet nostalgia and futurism simultaneously. The use of sketchy, glitchy GIFs authentically conveys the DIY ethos and anti-establishment values of the Cyberpunks, reinforcing the brand's identity.

The marketplace website design follows standard e-commerce logic, ensuring an intuitive and user-friendly experience for visitors.

Cyberpunk Hardware landing page design

The marketing landing page introduces visitors to Cyberpunk Hardware.

Cyberpunk Marketplace product directory

The marketplace shows visitors the entire product offering of Cyberpunk Hardware

Cyberpunk Hardware product page

The product page provides users with detailed information on individual products.

The inclusion of informative resources and community engagement channels empowers users with knowledge and support to navigate the world of decentralized computing.

Users can explore detailed product descriptions, allowing them to make informed decisions about their purchases and investments in decentralized hardware.

Effectively communicated value propositions, through the dynamic hype-type banner, addresses user needs while also capturing the essence of early internet nostalgia.

The dark mode, glitchy GIFs, and retro-futuristic typography contribute to an aesthetic that resonates with the target audience and communicates the brand's innovative and individualistic spirit.

Modularity is achieved in the layout, organization and treatment of content. The design consistency allows for the integration of new products while maintaining a cohesive brand identity.

Final thoughts:

The success of the Cyberpunk Hardware project was greatly influenced by the brand feeling workshops and moodboards and my teamwork with the Cyberpunks. These factors helped us nail down the brand's look and feel accurately.

As the project went on, I realized that having a clearer plan for organizing content would have been a big help. It would have made things consistent and smoother as the product range expanded. At the time the Cyberpunks vision for the website was a little unclear and their main focus was the visual design.

Another lesson learned was that even though our design work turned out well, some compromises were needed when we moved everything to the WordPress platform. To make sure design and functionality fi together open discussions between designers and developers are needed often and early.