top of page

CASE STUDY [ II ]

Design Journey: Product to Pixels
PureBlak Carbon Solution

STARTUP . PRODUCT DESIGN . WEB DESIGN . BRANDING

713.jpg

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

Steering The Industry From Bamboo To The Superior Coconut-Shell Based Charcoal

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.

BRANDING

A Journey Through Brand Renaming and Redesign

Brand Name

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.

logo.png
Logo_PureBlak.png

Image Source: Author

First Logo finalized w/ the brand name PURBLAK

Image Source: Author

Final Logo after company registration w/ the brand name PUREBLAK

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.

Logo_Dev_edited.jpg

Image Source: Author

Logo Development

(will open in a new tab when clicked*)

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.

Color Scheme.png

#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.

delirium_ncv1.png

PRODUCT DESIGN

PureBlak's Design Journey from Analyzing Competitors to Crafting 3D Models

Competitors

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.

Untitled-3_edited.jpg

Image Source: Author

Products in the Market that were studied.

Dissected_edited.jpg

Image Source: Author

Dissecting air-purifying bag for quality study.

Concept

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. 

PHOTO-2023-07-11-17-10-02_3_edited.jpg
PHOTO-2023-07-11-17-10-02_edited.jpg
PHOTO-2023-07-11-17-10-02_1_edited.jpg

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

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

DEV (1).jpg

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.

Range.jpg

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: Supplier

Supplier showcasing Design 3 Prototype

Video Source: Supplier

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.

Fnal 2.jpg

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. 

Render_Mockup.jpg

Image Source: Author

Final Packaging for the Air-purifying Bag

WEB DESIGN JOURNEY

Design Strategy Emphasizing Coconut Shell Carbon's Edge Over Bamboo

[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.

Untitled (22).png

Image Source: Author

Sample Images created for Website

Untitled (24).png

Image Source: Author

Sample Images created for Website

MARKET RESEARCH

Web Analysis Insights in a Sector Dominated by Online Marketplaces

  • 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.

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:

IDEATION AND WIREFRAMES

Crafting a Teaser Site for the Product's Debut

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. 

Untitled-1_edited.jpg

Image Source: Author

Wireframes

(will open in a new tab when clicked*)

USABILITY TESTING

Assessing Communication of Coconut Carbon Quality via Usability Test

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.

DESIGN REVISON

Adapting Design to Align with New Brand Logo

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.

Artboard 1.jpg

Image Source: Author

New Iteration  

NAVIGATING COMPLEXITIES 

Complexities and Synergies: PureBlak within a Corporate Ecosystem

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. 

KEY TAKEAWAYS 

A Designer's Perspective: Learnings from the PureBlak Web Design

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.

bottom of page