GroundsUp

GroundsUp is a B2C Social Enterprise who collect spent coffee grounds from local coffee shops in Vancouver and Toronto, Canada and use it to make unique handcrafted & upcycled home products.

Global Goals #12 | Responsible Consumption & Production

GroundsUp homepage on a laptop as a mockup, with a paper background.
GroundsUp homepage on a laptop as a mockup, with a paper background.
GroundsUp homepage on a laptop as a mockup, with a paper background.

What was my role based on defined problem statements?

What was my role based on defined problem statements?

Illustration of a paper in Notion style, black and white.
  • End-to-end Product Design

  • Design Systems

  • User Research

  • Usability Testing

Additional Touches

Coding & E-commerce

  • Customized a contact form for collaboration and customer communication.

Client Guidance

  • Managed the technical aspects, guiding the client through the design process for a functional e-commerce website.

  • Created a comprehensive presentation outlining pros and cons for each platform (Webflow and Shopify), recognizing the challenge in making this choice.

SEO Optimization:

  • Optimized SEO settings using Etsy keywords for organic user search.

Five GroundsUp user interface samples, including the homepage, shopping cart, impact, and products page.

Started with a Problem

Started with a Problem

Prior to this redesign, GroundsUp conducted sales through Etsy and a limited number of in-person markets, lacking a dedicated e-commerce website and missing information.

Outcomes

Outcomes

95%

met sustainability expectations.

84.2%

received top marks in navigation.

90%

of users said the brand identity aligns with business goals.

22%

increased sales after launching the product.

Thanks to Miray's exceptional illustration skills, she brought our product vision to life right from the initial interview stage.

Her artistic talent not only enhanced our product's visual appeal but also played a pivotal role in boosting our sales by an impressive 22%. Miray's contribution exemplifies the power of effective design in driving business success.

Katrina Carlton

Founder | GroundsUp

Word cloud displaying The most frequently used words about the product identified through UX research.
Word cloud displaying The most frequently used words about the product identified through UX research.
Word cloud displaying The most frequently used words about the product identified through UX research.

The most frequently used words about the product identified through UX research.

The most frequently used words about the product identified through UX research.

UX Research & Decision Process

UX Research & Decision Process

Design Thinking process framework to emphasize research and design.
Design Thinking process framework to emphasize research and design.
Design Thinking process framework to emphasize research and design.

UX Research

Understanding User Needs

  • Addressed the client's initial confusion about goals and the decision to sell their product.

  • Applied insights from Etsy to enhance meta descriptions, alt texts, and keywords for Google Search Results, improving the overall e-commerce strategy.

Information Architecture

  • Organized GroundsUp's story and products with a well-structured information layout.

  • Aligned the products on the landing page in accordance with the selling strategy.

Competitor Analysis

  • Researched potential competitors in the market selling handcrafted products on Shopify, focusing on local small businesses in different countries and fields.

  • Analyzed competitors for aesthetic and organizational aspects, particularly examining landing pages.

Logos of companies from competitor analysis.
Logos of companies from competitor analysis.
Logos of companies from competitor analysis.

Tone & Voice

  • Aligned design elements and UX writing with business objectives and tailored designs to resonate with target audience.

Decision Process

Strategic Planning:

  • Conducted two initial meetings and stakeholder interviews to comprehend business goals and the owner's vision for the redesign.

  • Identified key priorities, emphasizing the quantifiable impact of upcycling coffee grounds and promoting coffee table sales to coffee stores.

User-Centric Website Design:

  • Recognized the significance of these objectives, strategically featuring them on the home page.

  • Developed an intuitive and well-organized layout to make primary goals easily accessible and highly visible to visitors.

  • Ensured the website effectively communicated the company's core objectives from the moment users landed on the home page.

Design Thinking process framework to prototype.
Design Thinking process framework to prototype.
Design Thinking process framework to prototype.

Design | Sketches & Wireframes

Design | Sketches & Wireframes

Design Thinking process framework to emphasize research and design.
Design Thinking process framework to emphasize research and design.
Design Thinking process framework to emphasize research and design.

Design

UX Writing — Voice & Tone

  • Aligned design elements and UX writing with business objectives and tailored designs to resonate with target audience.

Sketches

  • The very first design always starts with a pen and paper for me — includes digital one! 📝

  • Stakeholder's positive reaction affirmed, on the first hand, the suitability of the sketch for the brand's essence.

  • Developed a strategic design system — favourite part 💛

UX Writing — Voice & Tone

  • Aligned design elements and UX writing with business objectives and tailored designs to resonate with target audience.

Sketches

  • The very first design always starts with a pen and paper for me — includes digital one! 📝

  • Stakeholder's positive reaction affirmed, on the first hand, the suitability of the sketch for the brand's essence.

  • Developed a strategic design system — favourite part 💛

Wireframes & Iterations

  • Introduced the idea of featuring coffee grounds' beauty as a hero image. ☕️

Low-fi landing page for GroundsUp displayed on a phone mockup.
Low-fi landing page for GroundsUp displayed on a phone mockup.
Low-fi landing page for GroundsUp displayed on a phone mockup.
Hi-fi landing page for GroundsUp displayed on a phone mockup.
Hi-fi landing page for GroundsUp displayed on a phone mockup.
Hi-fi landing page for GroundsUp displayed on a phone mockup.

Before & After

Before & After

Quick look — How did GroundsUp appear before this design?

Challenges & Learnings

Challenges & Learnings

Challenges

Changing Brand Identity Post-Prototype

  • Client expressed a desire to shift from a fresh-modern aesthetic to a vibrant-vintage look after the first prototype, carefully selected the new assets for a transformative redesign.

Limited Pages

  • GroundsUp faced a unique challenge with Shopify, primarily focused on product sales and limited to a single page template.

Budget Constraints with Free Template:

  • Constrained by the client's limited budget, had to work with a free Shopify template, imposing limitations on the project.

    💡 How did I surpass challenges? — Employed coding techniques and edited JSON pages to achieve desired customization within budget constraints. Demonstrated patience and adaptability, resulting in a final design that captured the desired aesthetic.

Learnings

Unique Branding Insights

  • Gained a different perspective on color branding, steering away from common sustainability associations.

Coding for User Experience:

  • Prioritized user experience by coding enhancements, such as adding a dropdown menu to the contact form for better user understanding.

AI Integrations For …

  • A Better UX Writing

    • Revamped UX writing, maintaining a keen focus on SEO settings by strategically incorporating keywords and utilizing appropriate headings.

    • Crafted fresh descriptions and visual presentations for all GroundsUp products, ensuring a seamless transition without compromising original meaning.

  • Research & Testing:

    • Used Notion AI to refine and optimize research questions, leveraging its valuable insights and suggestions.

    • Applied AI for meaningful organization of search engine result descriptions, optimizing the testing approach.

Making a difference with UX?
Let's connect!

Making a difference with UX?
Let's connect!