AI powered WebApp
Brief
Objectives
- Users can log in and edit their profile information
- Join or create a 'Food Community'
- Create 'meal events' within one's 'food community' and allow others to RSVP
- Browse other meal events in your community and RSVP to them.
- Change your RSVP
- Edit the details of a meal event.
- Use Google places to locate meals on a map.
Tools
Process
Step 1
Determine User Requirements
As with any product, it’s crucial to first define the problem we’re trying to solve. Big Meal Share is a movement to address the lack of neighborly connection we suffer from in modern society, at times this can be isolating and we may feel disconnected from those around is. Secondary problems include the rising cost of living, poor diets and food waste. These are prevalent and complicated problems so it was important to define specific user needs.
Step 2
Define the Data-Model
With the problem outlined, the next step was to define the most vital user journeys required for an MVP. I based these on a variety of interviews and personas and from here I could determine the data-model. Understanding which data tables were required took some experimentation. Building the platform using Airtable connected to Memberstack and the Webflow CMS meant that I needed to understand which information could be linked using a single-reference field vs a multi-reference field, and when to use each. After some research into data-structures, join tables, and some trial and error I was able to refine the model to reduce the amount of moving parts (automations).
Step 3
Build the UI and Database
With the project scope sufficiently outlined and with a solid understanding of user needs this I began the UI journey by creating an Atomic Design System (more about this process here). Once the design system was in place it was a relatively straight forward process of designing and building the UI based on the defined user journeys.
Step 4
Connect Automations & Webhooks
Next was to connect Webflow form submissions with Airtable and Memberstack. I used the automation tool ‘Make’ to handle this. In this step I was able to connect to third party APIs, and drew upon OpenAI’s Dalle.2 to generate the meal images. Some automations contained up to eight branches and grew in varying degrees of complexity due to the limits of the Make and Airtable arrays. I also ran into the problem of quickly approaching the 10,000 automations per month limit, to address this I researched and implemented custom Webhooks to reduce the automation count.
Step 5
Test, Launch and Iterate
With the UI and database built I was ready to test the platform with some friends and volunteers. We facilitated over 150 meals with 30+ users which proved the robustness of the platform. A heavily requested feature was multiple food communities per user, so I modified the Database, UI and Automations to include this feature.
Outcome
Summary
(more info coming soon)
Learnings
- (coming soon)
