Atom Design Logo, White A shape

The Lab

The Lab is a learning platform that offers paid educational videos on no-code tools, built in Bubble.io using Bubble's new responsive engine. It looks great across all devices and integrates with Stripe for a seamless payment experience.

The Problem:

No-code designers and developers don’t have many high quality places to learn no-code tools from the experts.

Documentation

We designed the concept for The Lab in Notion and FigJam, planning out the type of concept we would want to share with others. From here we could move into Figma, using a UI kit to speed up the process. We discussed:

  • User stories which allowed us an insight into how actual users could interact with the site and helped get us on the same page for our overall vision.
  • Building out any complex workflows to ensure that every area of the site, crucial or not worked exactly as expected and in a highly efficient and responsive manner.
  • Setting out the site architecture including deciding on what plugins and external tools we wanted to use to help keep the site light and nimble but incredibly feature complete.
FigJam documentation with graphs and workflow plans
Figma designs of The Lab dashboard

Building

Building the dashboard out in Figma first was essential, as we could plan out the colours and design, and visualise it before developing it within Bubble.io.

  • We chose a sleek and minimal grey palette as it not only fits with the Atom Design brand but is also incredibly readable and accessible.
  • We set up Stripe payments to work smoothly with the app, and a settings page for the user to quickly adjust settings. We used entirely free and readily available plugins as a proof of concept for how easy it is to implement.

Next steps

We're currently in the middle of the testing process, and plan to release the dashboard as a Bubble.io plugin, and share our own content with the world. The next steps are:

  • Comprehensive black and white box testing to ensure that we identify and eliminate as many bugs and UX issues as possible.
  • Plan and deliver exceptional video content for the service that exemplifies our quality as an agency whilst providing a deeply educational experience for users.
  • Deliver a template of the site to be sold for other Bubble.io users to give them a head start on their next video based web app.
The Lab settings page showing input for email and names

We use third-party cookies in order to personalise your experience. Read our Cookie Policy.