MENU
BREAD & BARTER
YEAR
2024
ROLES
Product Designer
Fullstack Developer
PROJECT SCOPE
Product Design
Frontend Development
Backend Integration
DESIGN TOOLS
Figma
TECH STACK
React
TypeScript
NextJS
GSAP
Supabase
OVERVIEW
Learning as a lifestyle
Bread&Barter is a edutech startup focusing on providing the platform for users to learn skills and new hobbies while creating a community of learners that embraces the learning lifestyle.
INITIAL CONCEPT
A learning marketplace
Why this? And why now? These are the questions that need to be asked. Currently, there are popular platforms that offer online courses like Udemy and Domesitka. However, there isn't any solution that allows people who are seeking to learn skills that are inefficient to be taught over the internet, like skateboarding, playing drums or cooking. And often, people who can teach these skills find it hard to scale. Leveraging on the scale of the internet, Bread&Barter aims to bring more classes to enrich the masses and more students for the teachers who are teaching these genre of courses. The solution is a learning marketplace.
KEY FLOWS
Teachers & students
The first steps for the design of the product is to identify the key essential flows for the platform to function. For Bread&Barter to function, there are two key flows - Teacher Flow and Student Flow. The Teacher Flow involves how a teacher will create a course, sign up for an account and track their lessons and earnings. The Student Flow involves the discovery process of courses, how the student books a class and the sign up process for the student. These are the two key flows for the product to function.
MINIMAL VIABLE PRODUCT
Discovery, checkout & accounts
Having an understanding of the dynamics between the teachers and students on the platform will inform the thinking behind designing for these two groups of users. Although, it is important to have ample options on the platform, the success of the platform relies heavily on students coming to the platform. So the entire process of discovery, checking out lessons and signing up for accounts for students needs extra attention. We need to ask the users for commitment at the right time. That's why we allow discovery of the lessons without signing up for an account. The user is only prompted to sign up for an account when they are at the end of the checkout flow.
IMPLEMENTATION
Shifting gears from design to engineering
The design process requires a mindset of exploration and possibilities, there are no clear cut answers. Experimentation and iteration gets you closer to a better solution. But engineering is a different game. The approach has to shift to one of efficiency and precision. In this project, we are using NextJS App Router for the frontend framework and Supabase for the backend, database, file storage and authentication.
AFTER THOUGHTS
The macro perspective
As a co-founder, designer and developer of this project, and going through the entire process from ideation, design to development is very illuminating. Sitting at a higher level of the decision making process puts the individual design or engineering tasks into perspective, giving clarity to how each task contributes to the balance between of building a product that suits the needs of the user and the business goals of the company. Some solutions might be great individually but when placed together with all other considerations needed for the product to be successful, it might no longer be feasible. Having broader context, makes one a better designer and developer.
BREAD & BARTER
OVERVIEW
INITIAL CONCEPT
KEY FLOWS
MINIMAL VIABLE PRODUCT
IMPLEMENTATION
AFTER THOUGHTS