Unlocking Sustainable Convenience

Unlocking Sustainable Convenience

Unlocking Sustainable Convenience

Template showing screens of the CIRCLE App

CIRCLE

CIRCLE is an application that simplifies zero-waste living by connecting you with plastic-free shops in Munich. This application provides a curated selection of sustainable shops and a pick-up and refill service for your favorite products. 

To view the prototype on a tablet or mobile device, you need the Figma Mirror app and an account. However, the desktop version allows you to visualize the prototypes without an account. Kindly check the prototype link in the desktop version.

To view the prototype on a tablet or mobile device, you need the Figma Mirror app and an account. However, the desktop version allows you to visualize the prototypes without an account. Kindly check the prototype link in the desktop version.

🗓️ Completion Date

March 2020

👩🏼‍💻 Design Process, I have been involved:

I have worked in the entire UX Design Process

🧑🏽‍🤝‍🧑🏻 Team

Project manager, 2 UX Designers and 2 Developers

📂 Deliveries I have been working on:

Assumption Map, Brainstorming insights, Empathy map, Test Landing Page, Product Requirement Sheet, Site map, User Flow, Sketches, Wireframes, UI Kit, Mockups, and Prototypes.

01 — THE CONTEXT

Limited zero-waste shops and high costs of sustainable products hinder the ability of a Munich resident to fully adopt a zero-waste lifestyle aligned with the city's 2025 goals.

02 — THE PROBLEM

Visiting multiple zero-waste shops with reusable containers is time-consuming and logistically challenging. It requires planning, coordination of locations, knowing which containers to bring, and knowing the shops' opening hours.

03 — THE SOLUTION

Circle bridges the gap between eco-consciousness and modern convenience. It offers plastic-free delivery and an easy refill service, making sustainable products accessible and convenient for all. 

Circle bridges the gap between eco- consciousness and modern convenience. It offers plastic-free delivery and an easy refill service, making sustainable products accessible and convenient for all. 

Four Screens of CIRCLEs App
Four Screens of CIRCLEs App
Four Screens of CIRCLEs App

04 — THE PROCESS

04.1 — 💛 EMPATHIZE

Dived into an intensive 2-week research sprint:

There were three key questions that we wanted to answer:

  • Current frustrations and pain points?

  • What did they really want?

  • What did they really need?

How did we answer those questions?

  • Investigating  forumsFacebook groups, and Reddit to know more about the topic.

  • Doing 11+ user interviews.

  • UX Shadowing: going to zero waste shops to observe how people behave and interact with the environment.

04.1.1 — SECONDARY RESEARCH & ASSUMPTIONS MAP
Conducting comprehensive secondary research prior to interviews.

To understand the challenges of zero-waste living, we conducted secondary research by reading about people's experiences, potential problems they face, and how they overcome them.

We organized the gathered insights into an assumptions map, categorizing them based on the following:

  • Their level of importance.

  • The strength of the evidence supporting them.

Assumption map with all the posits
Assumption map with all the posits
Assumption map with all the posits
Assumption map with some posits
Assumption map with some posits
Assumption map with some posits
04.1.2 — INTERVIEWS TO ECO-CONSUMERS
Validating the potential issues we identified through the secondary research.

After talking with people and observing them buying products in zero-waste shops, we figured out that carrying the containers is a potential problem.

🤔 Amalia Perez said:
"To live with minimal waste, I have to do much planning, carry my containers to the shops, and take a few days because they are so far away."

😣 Lisa Muller said:
"There are not enough plastic-free shops. I have to take the containers to work, go to different stores, waste time doing long travels from one shop to another."

04.2 — 🤔 DEFINE & IDEATE

We were overwhelmed with insights from the interviews, and we needed to prioritize and categorize them to form a strategy.

What experience are we going to have to design as a team?

04.2.1 — EMPATHY MAP
Empathy Mapping to organize the insights found in the interviews.

Main pain points

  • Plastic-free products are expensive.

  • Refill products are time-consuming.

  • Need to carry the containers during the day.

  • I have to go to different stores.

  • I have to plan in advance.

Empathy map with all the insights
Empathy map with all the insights
Empathy map with all the insights
Empathy map with some insights
Empathy map with some insights
Empathy map with some insights
Empathy map with some insights
Empathy map with some insights
Empathy map with some insights
04.2.2 — BRAINSTORMING: 30MIN SESSION
We ideated potential solutions to address the challenges faced by eco-conscious consumers.

After gathering insights and brainstorming ideas, we identified the need to prioritize efforts to alleviate the inconvenience of carrying and refilling reusable containers. Our actions in this area can create a meaningful impact.

04.2.3 — TESTING OUR IDEA
We worked on creating a simple prototype to validate our idea by creating a Landing Page with Shopify.

The landing page introduces our solution, which provides convenient access to plastic-free products and streamlines the process of refilling empty containers.
How does our test works?

  • People access the landing page via Facebook groups and subscribe with their email. 

  • We send a product order form. They place orders and schedule delivery. 

  •  On the delivery day, we purchase products, deliver them to their location, and conduct an interview explaining the refill service.

Ideation with some insights
Ideation with some insights
Ideation with some insights
Ideation with some insights
Ideation with some insights
Ideation with some insights
Ideation with some insights
Ideation with some insights
Ideation with some insights
04.2.3 — TESTING OUR IDEA
We developed a basic prototype to validate our idea before delving into content and design. We created a Landing Page on Shopify.

The landing page introduced our solution, which provides convenient access to plastic-free products and streamlines the process of refilling empty containers. 

How did our test work?

  • People had access to the landing page via Facebook groups and subscribed with their email.

  • We sent them a product order form, and they placed their orders and scheduled the delivery.

  • On the day of delivery, we bought their products, brought to them to their location, conducted an interview to explain the refill service, and inquired about the current process.

Full landing page
Full landing page
Full landing page
Landing page how it works
Landing page how it works
Landing page how it works
Full landing page
Full landing page
Full landing page
04.2.4 — GATHERING THE INSIGHTS
What did we learn from our previous tests?
  • People are willing to embrace reusable plastic alternatives when plastic-free options are unavailable.

  • By combining our delivery service with a refilling solution, we offered a cost-effective alternative to traditional shopping methods.

  • People expressed their satisfaction with our service's time-saving aspect, as it alleviated the burden of traveling long distances to various shops for their zero-waste needs.

Our team with Lisa
Our team with Lisa
Our team with Lisa
Our team with Christoph
Our team with Christoph
Our team with Christoph
Our team with Lisa
Our team with Lisa
Our team with Lisa

85%

Of the people participated in our test. They placed an order using our landing page, and we delivered the groceries to them on the day they chose.

33%

 Of people became our actual customers to deliver plastic-free products.

40 u.

We sold 40 products, including nuts, rice, detergent, and plastic-free utilities to people and offices.

04.2.5 — DEFINING OUR FIRST MVP
We prioritized features for a unique and valuable solution.

After validating our solution through user testing, we developed a product requirements document to prioritize essential features for our Minimum Viable Product (MVP). This strategic approach ensured our initial offering would uniquely address the core needs of our target audience.

Screenshot of the mus have features
Screenshot of the mus have features
Screenshot of the mus have features
04.2.6 — SITE MAP & USER FLOW
Understanding the entire journey of our potential product.

The site map helped us to organize the content and functionalities in a way that is intuitive for zero-waste shoppers.

The user flow helped us visualize step-by-step user interactions, identify potential friction points, and optimize the path for users to complete specific tasks seamlessly.

CIRCLE APP site map
CIRCLE APP site map
CIRCLE APP site map
CIRCLE APP site map
CIRCLE APP site map
CIRCLE APP site map

04.3 — 🎨 DESIGNING & PROTOTYPING

From Sketching to Prototyping.

We kept in mind the following:

  • Make it easy for people to accomplish their tasks

  • Improve memorability, maintaining consistency

  • Keep the design clean and clear

04.3.1 — SKETCHING
It allowed us, as a team, to ideate rapidly, think creatively, and design with our people in mind.

We started with paper sketching, which allowed for easy and rapid iteration while keeping in mind the core MVP features.

We then transitioned to Figma for better team collaboration, centralized comments, design changes, and decision tracking in one place.

Me sketching on yellow posits
Me sketching on yellow posits
Me sketching on yellow posits
CIRCLE Sketches
CIRCLE Sketches
CIRCLE Sketches
Comment sketches
Comment sketches
Comment sketches
04.3.2 — WIREFRAMES
We created Mid to High-fidelity wireframes in Figma to refine the structure, layout, and information architecture.

Wireframing allowed us to visualize the user experience, identify usability issues early, and iteratively improve through feedback and testing.

04.3.3. — UI STYLE GUIDELINE
We created a Style-Guideline and UI Components:
  • To speed up the design process.

  • To achieve consistency.

  • To learn and master our UI SKills.

Screenshot of the UI Style guideline
Screenshot of the UI Style guideline
Screenshot of the UI Style guideline
04.3.3. — UI STYLE GUIDELINE
Creating a UI Kit for CIRCLE is essential for various reasons:
  • We wanted to speed up the design process.

  • We pushed to achieve consistency.

  • We wanted to learn and master our UI SKills.

04.3.4 — FINAL DESIGN
HOW CIRCLE WORKS?

04.4 — 🤓 NEXT STEPS, TEST & ITERATE

What would be next?

Due to COVID-19, we had to return to our countries before border closures, and for that reason, we couldn't continue the project. But the desire following steps would be:

  • Conduct usability testing with the prototype to evaluate the UI design's effectiveness and gather insights from real users.

  • Based on the user testing feedback, we would iterate on how to address any usability issues and make improvements.

  • Once the UI design is finalized, after a few interactions and tests, we will document it and hand it off to the development team for implementation. . 

04.5 — 🎨 LEARNINGS

Work and communicate with a multicultural and multidisciplinary team
  • Immersing myself in an interdisciplinary team taught me to communicate daily through stand-ups and meetings so that everyone was on the same page.

  • Every Friday, I had to prepare a presentation about our project findings in front of other stakeholders; this practice improved my storytelling skills.

  • Working with other designers has its pros and cons; we engage in open-minded communication and support each other throughout the process.

04.4 — 🤓 NEXT STEPS, TEST & ITERATE

What would be next?

Due to COVID-19, we had to return to our countries before border closures, which unfortunately ended the project. The following steps would be:

  • Conduct usability testing with the prototype to evaluate the UI design's effectiveness, identify pain points, and gather insights from real users.

  • Based on the user testing feedback, iterate on the UI design to address any usability issues and make improvements.

  • Once the UI design is finalized and documented, hand it off to the development team for implementation. 

CIRCLE Team in the snow
CIRCLE Team in the snow
CIRCLE Team brainstorming
CIRCLE Team brainstorming
Digital Product School Team
Digital Product School Team

04.5 — 🎨 LEARNINGS

Work with a multicultural and multidisciplinary team
  • Immersing myself in an interdisciplinary team taught me to communicate daily through stand-ups and meetings so that everyone was on the same page.

  • Every Friday, I had to prepare a presentation about our project findings in front of other stakeholders; this practice improved my storytelling skills.

  • Working with other designers has its pros and cons; we engage in open-minded communication and support each other throughout the process.

04.5 — 🎨 LEARNINGS

Work and communicate with a multicultural and multidisciplinary team
  • Immersing myself in an interdisciplinary team taught me to communicate daily through stand-ups and meetings so that everyone was on the same page.

  • Every Friday, I had to prepare a presentation about our project findings in front of other stakeholders; this practice improved my storytelling skills.

  • Working with other designers has its pros and cons; we engage in open-minded communication and support each other throughout the process.

CIRCLE Team in the snow
CIRCLE Team in the snow
CIRCLE Team brainstorming
CIRCLE Team brainstorming
Digital Product School Team
Digital Product School Team