An intelligent, web-based and thematic gift assistant

We wanted Dreambuddy to become the reference for finding the perfect gift. This is how we designed this experience.

Project roadmap

Here's what the development process looked like, from start to finish.
1.5 hours

Lightning Decision Jam

A structured exercise to solve any problem, to avoid making unfounded decisions.
1 week

Design Sprint

Answer crucial business questions and validate ideas with end-users in just 4 days.
5 weeks

Execution Sprint

Refine what you’ve already built, focusing on high impact iterations towards an MVP.
1 week

Launch Sprint

Launch & assure stability. Measure & learn. Plan to adapt to customers’ changing needs.

The challenge

Dreamland is a large, Belgium-based retailer specializing in toys, gifts, multimedia, and other seasonal products. Adhering to a bricks & clicks business model, the company sought to boost their revenue generated from online sales. Moving away from more traditional advertising practices, Dreamland opted to implement a custom-tailored experience into their online store.
  • Project

    Embedded A.I.-powered chatbot
  • Deliverables

    Prototype, UX, UI, front-end, user testing
  • Partners

    Froomle

The solution

This challenge was then further conceptualized, and the solution was aptly dubbed as “the Dreambuddy”. We decided to build an A.I.-powered gift asisstant. Customers would no longer have to browse through the entire Dreamland catalog in order to find the perfect gift, thus increasing the likelihood of an additional conversion.

Design sprint

To kick off a new project, a four day design sprint is almost always the order of the day. A fragmented and timeboxed process designed to deliver a high-level prototype as well to immediately validate your efforts, is a great way to jumpstart the development process.

Monday

Define

Tuesday

Decide

Wednesday

Prototype

Thursday

Test

Monday

We started off by stipulating the key challenges of the project; these need to addressed first. The goal here is to get the ball rolling and to create some momentum. We’ve established our main challenge, target demographic, and long-term goal. Everyone at the table is to then develop their own solutions first.

Tuesday

We reviewed and voted for our favorite solutions we had conceptualized the day before. Moving on, one single concept was chosen that would serve as the foundation of the prototype, to be built on Wednesday. The final concept here was in fact a combination of multiple solutions we’d previously came up with: the explicit flow was designed by Stef, whereas the implicit concept flow was designed by Bart.

Wednesday

Our internal prototyping team, strengthened by Bert, bent the laws of space and time to create a high fidelity prototype within a time frame of a mere 24 hours. Also we planned the interviews and testing for the next day.

Thursday

Time to put this bad boy to the test! We tested the prototype with a handful of potential users. Every interviewee was handpicked due to the niche nature of the subject matter. Each and every invitee turned out to be an actual goldmine of feedback, allowing us to formulate concrete next steps. During the following execution sprints, this prototype was the foundation upon which the final product was built.

Execution sprints

With the prototype finished and tested, we’ve established some clear next steps and are now ready to develop and build the Dreambuddy for real. During the course of four execution sprints, our developers built the application from the ground up using HTML and Javascript. To make life a little better (and easier), we’ve also used a couple frameworks to get the job done.

Frameworks

Sapper

A framework for building high-performance web applications. Offering all current-gen development practices such as code-splitting, server-side rendering and offline support, this is a great framework for building progressive web applications (PWA). Since it’s powered by Svelte, an UI framework that compiles app components into Javascript modules, instead of React, it allows for ludicrous performance with only tiny amounts of code required.

Vue

A progressive Javascript framework for building user interfaces. It’s easy to pick up and integrates really well with other libraries or existing projects, which is exactly what we needed for this project, since Dreamland already had their webstore up and running.

Development

Content Management System (CMS)

This is essentially what we’re building. Dreamland has a huge database of content, being their product catalog. The application returns results via translation keys; the CMS itself handles the multi-language management. Whenever the content changes, the application is re-compiled using Sapper to a static site for optimal performance.

Logical flows

The flow is defined as a list of possible intents and dynamically loads extra data and possible answers. The flow itself is agnostic towards the framework that’s been put in place.

Web chat

The Dreambuddy user experience is very similar to that of a web chat session. Again by using Vue, the user interface was designed as such to deliver a dynamic experience.

Smart launcher

Naturally, the correct version of Dreambuddy needs to be loaded in depending on a set of conditions, such as the chosen language, and from which point the launcher has been activated. For these reasons, multiple versions of Dreambuddy in multiple languages were developed.

The finished product

After 6 weeks of development, Dreambuddy was ready to launch; here’s what it looks like!

DREAMBUDDY GIFT ASSISTANT

Let us know who you’re buying a gift for

Some basic demographics, a budget and a few category constraints is all Dreambuddy needs to get you started.

DREAMBUDDY GIFT ASSISTANT

Save yourself a headache with personalized gift suggestions

Dreambuddy then makes a refined selection from the entire Dreamland product catalog, just for you.

Check it out
No items found.

Ready to tackle a business challenge of your own?

Hit us up!

Stef Nimmegeers

Bothrs co-founder
+32 499 48 01 20