CASE STUDY [ II ]
Design Journey: Product to Pixels
PureBlak Carbon Solution
STARTUP . PRODUCT DESIGN . WEB DESIGN . BRANDING
OVERVIEW
ROLES + RESPONSIBILITIES
PROJECT CONTEXT
TOOLS USED
Branding:
Logo Design, Color Scheme and Typography, Brand Guidelines
Product Design:
Concept Development, Sketching, Prototyping and Testing, Material Selection
User Research:
Competitive Analysis, Market Study
UX Design:
Content Strategy, Wireframing, Prototyping, Usability Testing
A subsidiary of a leading activated carbon producer in India, aiming to innovate the natural air filter market.
Ongoing
Figma
Adobe Photoshop
Miro
BRIEF
PureBlak, a subsidiary of India's leading activated carbon producer, faces delays and challenges in product development and entry into the B2C segment.
[User goals] Consumers cannot often distinguish bamboo charcoal from the superior coconut shell-based variety, with the market dominated by bamboo products. This confusion hampers informed, eco-friendly choices.
[Business goals] PureBlak aims to stand out by educating consumers on the benefits of coconut shell charcoal, using its parent company's standing as a critical supplier to bolster credibility and capture a niche in the eco-conscious market segment.
Steering The Industry From Bamboo To The Superior Coconut-Shell Based Charcoal
BRANDING
Our narrative began with 'PURBLAK,' a name reflecting the brand's purity and strength essence. However, confronted by trademark registration obstacles, we transitioned to 'PUREBLAK,' retaining our fundamental values while embarking on a renewed journey.
A Journey Through Brand Renaming and Redesign
Brand Name
Logo Design
The initial "PURBLAK" logo showcased a typographic ballet of contrasts, with "PUR" rendered in a light font and "BLAK" in a bold one, achieving harmony by merging 'R' and 'B' into a singular, fluid design. As the brand evolved to "PUREBLAK," this transition was marked by a bold, elongated type that evoked the complexity of a labyrinth, symbolizing the brand's deliberate journey from natural roots to innovative forefront.
Image Source: Author
First Logo finalized w/ the brand name PURBLAK
Image Source: Author
Final Logo after company registration w/ the brand name PUREBLAK
Color Scheme
Despite the name and font change, the logo retained its monochromatic color scheme, ensuring brand continuity and a strong visual connection to the product's carbon-based material.
Image Source: Author
Logo Development
#ffffff
WHITE
#e6e6e6
GREY
#323232
DARK CHARCOAL
#000000
BLACK
Typography
The transition from the balanced Montserrat to the impactful DELIRIUM NCV font in the second logo design aligned with the brand's evolution, aiming for a more pronounced and distinctive presentation.
INDUSTRIAL DESIGN
In my analysis, I found the market flooded with low-quality, bamboo-based air-purifying bags. Dissecting these products revealed their poor quality. Many had negative reviews due to unclear instructions on use and lifespan, contributing to a market crowded with uninspired, similar products.
PureBlak's Design Journey from Analyzing Competitors to Crafting 3D Models
Competitors
Image Source: Author
Products in the Market that were studied.
Image Source: Author
Dissecting air-purifying bag for quality study.
The client was initially open to an experimental design to differentiate their product. However, financial constraints and market competition led to a strategic shift towards a simpler, cleaner design that fits market norms but exceeds them in quality and standard. This product sets itself apart by providing clear usage instructions for enhanced performance, such as heating the product every six months to improve odor absorption.
Concept
STEP 1: Measure the required quantity
Depending on the space, more activated carbon can be used.
STEP 2: Reheating Product
Activated Carbon loses its potency over time and must be heated to increase absorbency.
STEP 3: Renewed absorbency
Use the product as usual after reheating its contents.
Image Source: Author
Extract from [Demo] User Manual
.jpg)
Design Development
Design 1 introduces a sleek, ellipsoid-shaped air freshener, distinct with its minimalist design and fabric finish, to enhance any car interior.
Design 2 mirrors traditional, cost-effective laundry sachet designs familiar in the charcoal product space, aiming for a quick market entry.
Design 3 expands the offering with larger, round-bottom drawstring bags and a novel refillable pouch concept, suitable for broader, more sustainable use.
Design 4 refines Design 2's approach, incorporating a new logo and honing in on product appeal and functionality to meet the needs of direct-to-consumer market dynamics.
DESIGN 1
DESIGN 2
DESIGN 3
DESIGN 4
Design Visualization
I translated conceptual designs into precise digital models using Rhino modeling software and Adobe Photoshop and created 2D drawings that outline the design's dimensions, proportions, and specifications. These drawings served as a blueprint, guiding the suppliers through the development of the Product.
Image Source: Author
Digital Models
Prototyping
In our prototyping process, we rigorously tested different sizes and materials, like linen, cotton, cotton blends, and rayon, based on my 2-D drawings, collaborating with numerous suppliers to identify the ideal fit for our product's needs. This meticulous approach helped us fine-tune the design to meet our high standards and user expectations.
Video Source: Author
Initial Prototype of Design 2
Video Source: Author
Supplier showcasing Design 3 Prototype
Video Source: Author
Final Design 4 Prototype
Final Design
The final design features a dark grey cotton bag, chosen for its eco-friendliness and durability, branded with our new logo. It's sealed with robust double cross-stitching and includes a practical buttonhole opening for easy hanging, catering to user convenience and aesthetic preferences while minimizing environmental impact.
Image Source: Author
Final Prototype
(will be refined further*)
Packaging Design
The final packaging unfolds on a deep black canvas adorned with line art that artistically echoes the intricate patterns of a coconut shell, subtly blending with the logo's presence. Each detail and symbol is meticulously embossed in lustrous silver, lending elegance to the modern design. The material in the final prototype developed so far may evolve to suit the packaging—a darker, subtly stripped material.
Image Source: Author
Final Packaging for the Air-purifying Bag
Design Strategy Emphasizing Coconut Shell Carbon's Edge Over Bamboo
WEB DESIGN JOURNEY
[Objective] Our web design strategy is crafted to not only showcase the superior quality of our coconut shell-based carbon products over bamboo but also to reinforce our authority in the niche through engaging coconut-themed graphics. This approach underlines our team's innovative spirit, problem-solving skills, and commitment to creating compelling user experiences, positioning our brand as a leader in the industry and appealing to like-minded professionals.
.png)
.png)
Image Source: Author
Sample Images created for Website
Web Analysis Insights in a Sector Dominated by Online Marketplaces
MARKET RESEARCH
For the Competitive Analysis, I used heuristic analysis to evaluate the user experience on drcharcoal.in and goodair.in. These sites stand out in a market where most competitors sell through platforms like Amazon. The Dr Charcoal website focuses on a straightforward e-commerce model, emphasizing product benefits, while Good Air's website aims to enhance its brand presence and offer franchise opportunities. Heuristic evaluation highlights were as follows:
-
Navigation: Users needed help navigating, with location awareness issues on DrCharcoal and a cluttered homepage on GoodAir reducing clarity.
-
Content Integrity: DrCharcoal's content lacked flow and uniqueness; GoodAir's design inconsistencies affected visual harmony.
-
Interactivity: DrCharcoal showed limited user feedback and personalization; GoodAir struggled with responsiveness and visual cues.
-
Form Usability: DrCharcoal faced challenges with error feedback and field clarity; GoodAir's forms had clarity and validation issues.
Assessing Communication of Coconut Carbon Quality via Usability Test
USABILITY TESTING
For the Ideation and Wireframes stage, we focused on creating a clean, simple demo site to announce the product's upcoming launch, aimed at capturing senior management's attention within the conglomerate. Emphasizing standout graphics, which I developed using Adobe Photoshop, was central to the client's vision. As project priorities shifted within the conglomerate's complex structure, we temporarily moved our focus toward securing a suitable supplier, putting web development on hold.
Video Source: Author
Screen-recording of Web Page
The teaser website was designed to focus on simplicity and visual appeal. I refined the initial ideas using wireframes, ensuring the site's structure would effectively announce the product's launch. While graphics took center stage in this phase, this emphasis meant that other UI elements like spacing and text received less attention in the design process.
Image Source: Author
Wireframes
(will open in a new tab when clicked*)
Crafting a Teaser Site for the Product's Debut
IDEATION AND WIREFRAMES
I conducted a simple usability test with 10 participants to gauge the clarity of our message regarding the quality of coconut shell-based carbon despite the site's incomplete state. The insights were as follows:
-
The site's professional look and quality visuals were well-received, fitting our modern brand identity.
-
A major usability issue was discovered with the shopping cart, leading users back to the homepage.
-
Suggestions for improvement included more visible call-to-action buttons and fixing the shopping cart for a smoother checkout process.
Adapting Design to Align with New Brand Logo
DESIGN REVISON
With our logo's redesign, we're updating the website to match this new direction, emphasizing the shift from natural to innovative. We're enhancing visuals to showcase the logo's evolution better, inspired by successful elements noted in competitor analysis. This revised design is currently under team review for further refinement and is more focused on explaining the functionality of the product.
Image Source: Author
New Iteration
Complexities and Synergies: PureBlak within a Corporate Ecosystem
NAVIGATING COMPLEXITIES
Navigating the complexities within the large conglomerate posed significant challenges, particularly in liaising with a key member newly transitioning into the firm. His learning curve and internal dynamics often delayed responses and required navigating internal politics to gain project buy-in. The presence of a seasoned coordinator focusing on strategy and growth proved crucial in bridging these gaps and advancing the project.
A Designer's Perspective: Learnings from the PureBlak Web Design
KEY TAKEAWAYS
Reflecting on the design journey of the "PureBlak" Website, I've gathered several insights that will shape my approach to future projects:
1. Design Flexibility: Adapting to changes, like the logo update, underscored the need for a nimble design approach.
2. Aesthetic-Functional Balance: Prioritizing graphics taught the importance of balancing visual appeal with usability
3. Stakeholder Navigation: Coordinating within a conglomerate emphasized clear communication and alignment to overcome internal challenges.
4. Incorporating Feedback: Market research and usability testing were crucial in refining the design to meet user and business needs.
Whether it's work plans or coffee plans, let's make them happen.
