Challenge 🏆

🏆 Flowmo is a brand new idea made for the Build the Galaxy's Best Checkout hackathon by Rapyd

What is flowmo? 👾

Flowmo is a floating monster assistant for a simple and gamified shopping flow. It flows on the screen during the shopping and gives notifications, tips and suggestions to reduce the chance of cart abandonment. One of the biggest value propositions is to provide this service in a GDPR- and CCPA compliant way.

Inspiration 💡

We had a lot of bad shopping experiences. Some of them caused cart abandonment. We are not so proud about it, but these experiences helped us to decide to run on this challenge. Webshops and marketing agencies have been trying to solve this problem for a very long time. There are really good examples on the web about a good checkout process. That’s why we want to create something different. Since we originally are lawyers, and work as freelance developers, we want to build a personalized and gamified solution with a proper legal background. We live in the EU 🇪🇺 (European Union), GDPR is a cornerstone for us, but we are really familiar with CCPA thanks to our freelance projects.

We feel, nowadays personalization means only pop ups that offer some discount or free shipping. Chatbots 🤖 are really dumb 🙃 and usually they are based on a preprogrammed workflow. Webshops usually provide chatting possibilities with their employees, but it is usually exhausting for both parties. We think a funny-looking assistant can reduce the stress of shopping by giving necessary information about the items or the order and provide fun facts.

What it does ❓

Flowmo provides the basic webshop functionality on a higher level. It floats on the screen and gives personalized or event-based contents, notifications, tips and messages to provide a gamified and customer-centric personalized shopping experience.

So flowmo basically tries to solve the payment problem by providing a good shopping experience before the payment process. We achieve this goal with multiple features:

  • automatic form filling: If the user is logged in, flowmo can transfer the user's data to the appropriate fields of the shopping checkout form. Aside from payment data points flowmo can store every data points of the user. The relation with the payment details can be changed in the future depending on the level of cooperation with Rapyd.

  • storing and handling multiple shipping addresses: People who use multiple shipping addresses usually suffer from giving it again and again.

  • combinable wearable items for the assistant: Flowmo has a non-realistic body. Different wearables on it can make users smile. Shopping decisions are made easier by happy users. Flowmo assistant represents body-positivity: it is a little chubby, but it wears different things very happily.

  • warning about possible interruption of shopping: The minority of users go back to an abandoned cart after they left the webshop. A cart-content related notification system reminds the user why they put that item into the cart.

  • shopping tips and suggestions: When a user browses shoes it is exhausting to always care about the size, it is a good selling point to get notification that a shoe is available in the desired size without clicking. If the user has a non-confection body-type and adds that data to the flowmo assistant, we can warn them if the viewed item has the desired attribute.

  • giving item-related fun facts: Shopping is frustrating for some users, since they have to care about a lot of things to select the most optimum product and they have to bear the pain of paying as well. A fun fact can give a little happiness and lower the stress.

  • showing the cost of the order: People like to know the total cost of an order, but some webshops have pricing plans that are difficult to understand.

  • GDPR and CCPA consents: Data protection is an important field of cross-site services since business entities risk penalties. Nowadays more and more users care about the protection of their data. Flowmo has simple and transparent data flow to eliminate users’ fear of storing and sharing data through us.

How does it work? ⚙

workflow

  • registration or login: When users visit a webshop that uses Rapyd’s service and flowmo at the same time, they see our floating monster assistant on the site. If a user has never used our service, flowmo provides a registration form. If a user is already registered, they can login into our service. Since flowmo is website-independent, if the user has a live session cookie, they do not need to login again.

  • using the service: Users can shop in a normal way. If flowmo senses the possibility of action, it will throw a message or warning. For example, it can show the total cost of the order, fun facts about the selected item. If there is an available wearable in the script, the assistant picks up the item.

data

Principles:

  • be clear, simple and transparent

  • everyone stores data of their own interest

  • hide users’ identity as much and as long as possible/required

  • provide clear data-flow-path to ensure GDPR/CCPA rights

Entities affected in the dataflow:

  • user

  • shop

  • Rapyd

  • flowmo

Data of the user data source

  • personal data: name, address, etc.: user can store these data points at flowmo and the user can transfer the data points to the shops’ forms.

  • identity: the user has 3 digital identity type at flowmo; flowmo ID, flowmo shop user ID, flowmo session ID - if the user lets the shop know their identity, shops receive a flowmo shop user ID to identify the user, if the user don’t let the shop to identify, the shop receives a flowmo session ID only. Though some sort of identity will go to the shop if the user gives the billing and shipping details, the user browses goods in de facto private mode with its advantages and disadvantages.

  • goods history: if a user puts goods into the cart the item is added to the user history as well, if the user deletes a good from the cart, the event is added to the good as well. Goods history provides important hints to the user about specific attributes of future shopping since it holds information about the user's preferences, like sizes, colors, etc.

Data of the shop data source

  • item info

  • event info: shop must place specific markert tags for buttons and other surfaces which fires, emits or handles user’s activities that changes the content of the cart.

  • cart content: shop must transfer the information about the the content of the cart with the payment process to ensure full transparency

  • total cost: shop must always provide the total cost of the content of the card available for flowmo since one of our core values is to show total cost for the user unambiguously

  • additional costs: shop must provide for flowmo an absolute minimum and maximum additional cost range, it is important not to underestimate the maximum additional cost since one of our core values is to show additional cost for the user unambiguously

  • Rapyd credentials: this belongs to the Rapyd-shop interaction

  • flowmo app ID: shop has a unique flowmo app ID, the should place it on the page, shop can provide its ID via cookie, session variable or in tag of the page

  • checkout ID: this belongs to the Rapyd-shop interaction

Data of the Rapyd data source

  • checkout ID: this belongs to the Rapyd-shop interaction

  • information about success or failure: this belongs to the Rapyd-shop interaction

Data of the flowmo data source

  • user session ID: every shopping session has a unique session ID at flowmo, if the user is not logged in or if the user doesn’t let the shop to know their identity, the shop receives the session ID only as an identification opportunity. However at the end of a successful shopping journey the user lets flowmo to transfer personal data to the shop

  • user shop ID: if the user is logged in and the user gives permission to share their identity, the shop receives a permanent and unique ID for every user, the ID is always the same for the same user. A user has different IDs at different shops, this avoids shops to interchange users’ data.

  • user related content: flowmo sends different content to the user during shopping sessions (journeys) to increase users’ experience

  • user settings: flowmo stores different data points that affect the users’ shopping- and flowmo-experience.

Data flow on events and actions

  • user opens a webshop site
    • shop loads flowmo and provides app ID
    • llowmo checks if user is logged in
    • flowmo sets its state according to user’s relation
  • if registration needed
    • registration form opens in modal
    • user gives data
    • flowmo stores data
    • flowmo provides user session ID or user shop ID
  • if login selected
    • user sends credentials
    • flowmo provides user session ID or user shop ID
  • user adds goods to the cart
    • flowmo checks for specific content
    • flowmo adds the item to item history
    • flowmo warns if size doesn’t fit earlier data
    • flowmo gives hint on different size or other attribute
    • flowmo changes the skin depending on circumstances
    • flowmo shows fun facts
  • user deletes goods from cart
    • flowmo changes item’s state
  • user fills address form
    • flowmo provides one-click fill opportunity with additional settings
  • user tries to exit the shopping process
    • flowmo informs about the disadvantages of the potential exit and offers to continue
  • user opens flowmo menu
    • change settings available
    • behavior change available

legal

Flowmo is a GDPR and CCPA compliant service. Users have all the rights that those acts grant for them. Users can see, modify, delete or manage their personal data stored in the flowmo system. Since we focus on security as well, users have the chance to share or not share their identifier with the webshop. Each user has three kinds of identifiers: A general and unique flowmo ID is used to identify a user for flowmo and it is visible only to us. User has a session identifier and a webshop-level identifier. Each user has as many webshop level identifiers as the service they use. When a user does not share their own webshop ID with the webshop, the site sees them as a new customer. It is similar to browsing in private mode. In this case flowmo shares a session ID with the shop. If a user wants to ask the webshop to delete their collected data, the user can refer to this session ID anytime. Session or user identifiers help webshops to provide GDPR- or CCPA compliance easily, since users can ask webshops directly to delete their user-related data.

business

The core of the business idea is based on Rapyd’s solution: pay-as-you-go. It is really useful, since our promise is to reduce the abandonment rate. A success-oriented payment system motivates us to make our service better and ensures that webshops pay only for successful checkout processes.

How we built it 🔨

The core idea was to build an easy-to-integrate, an easy-to-run and an easy-to-update solution at the same time. Why are these criteria so important?

Webshop maintainers are very different people around the world. They have more or less coding knowledge and even if they know well how to code they may get afraid of a complicated implementation process. So we imagined a solution which can be implemented with 4 lines of code only. Of course a really deep implementation can consume much more time, but to have a basic feeling about flowmo 4 lines is just enough. To spare some time for everyone now it works without registration; however it is really just a proof of concept at the moment. Users are using very different computers around the world and they use cellphones as well. We have to calculate with low and high performance too. In this case we decided to use server side as much as it makes sense. This approach ensures that we can implement even AI without the need of high performance hardware on the user side.

The server side hard work approach helps us to manage future updates more easily since the frontend engine (flowmo.js) gives flexible ways to use its functionality. Server can send direct tasks to the JavaScript with timing and importance level.

Challenges we ran into 💪

Rapyd’s implementation guide was really useful, but sometimes we had a feeling that there are potential banana peels in the code intentionally. This was really fun, since a lot of programmers use CTRL-C + CTRL-V (in memoriam Larry Tesler), and it's always good to implement a code with brain instead of muscle memory.

Frankly, it was harder to make free webshop templates work than implement Rapyd. Since we didn’t want to build a webshop engine, we searched for free templates, but a lot of them were hard to implement.

Accomplishments that we're proud of 😎

We made an easy-to-use PHP script to access the Rapyd API and we also added an action to create a checkout page with the Rapyd Checkout Toolkit. It accepts each parameter with get or post method just the same way to be as convenient as possible. We think it simplifies the integration of the Rapyd Checkout Toolkit for everyone. Unfortunately there is not enough time to make a good documentation to it but we will make it soon.

This is a brand new idea, so we are really proud that we made a working demo to show our concept. Any hackathon is a new experience for us. We like to learn new things and hackathons can widen our boundaries. We are really proud that we made something that funny and working at the same time.

What we learned 📘

How to make a web-based project from zero and how to implement Rapyd. Usually we create desktop or mobile solutions, so php and html always mean a unique experience. During the hackathon we coded a lot and tried to make a business model for the project. However, it was exhausting, but the “checkout experience” from this hackathon is really cool.

What's next for flowmo ⏱

During the hackathon we made a fully working demo with a lot of features. We made an implementation guide and detailed documentation. The data model and data workflow is GDPR- and CCPA compliant. The assistant got combinable wearables with more than 1000 possible combinations.

In the future there are three different categories for things to do: 🟪 development, 🟨 team, 🟩 business.

🟪 Development

  • more and refined wearables: We want to cover more item categories and subcategories as well. For example T-shirts, coats, shirts, dresses from the fashion topic, and cell phones, drones from electronics. The ultimate goal is to cover all of the possible items that can be placed into the cart. These item models will be colorable to imitate the color of the selected item.

  • machine learning based item-recommendation system: A machine learning based recommendation system can suggest more desired items that might result in a successful checkout process.

  • calendar functionality: A warning system that sends notifications for the customer to avoid forgetting important dates like anniversaries or birthdays.

  • friend management system: It is super fun to have the chance to recommend goods for friends.

  • shareable wishlist: Buying a gift is usually really hard. It would be much easier when people can buy gifts from their loved ones wishlist. There is a new habit in wedding ceremonies: the newly-weds make a list of items that they want to give. It would be extended to new fields like birthdays.

  • taking selfie with the assistant: This is an option for fun without any deep meaning. An assistant with a lot of wearables can be funny-looking. Taking a selfie with it can make the customers or their friends smile.

🟨 Team

A good team is necessary for a good startup. That’s why we are looking for a graphic designer and a business person. Designer could help us to rework the assistant and create a lot of new wearables.

🟩 Business

A business person could help to monetize the hidden resources in flowmo like personal suggestions and item-related contents.

Built With

Share this project:

Updates