MOCHUB

Like the individual pieces of a LEGO® set when put together, us humans are greater as a collective. We Love What You Build (WLWYB) approached Cheppers with the idea of creating a social hub for builders; a hub that connects them with LEGO® enthusiasts from around the globe; a hub that allows them to share their creations, (My Own Creation - MOC), while also being rewarded for it. Thus, MOCHUB was born.

You can build anything you want, that's why I love LEGO®.

It's expensive, but because it's reusable, it's actually cheap.

LEGO® has always been known as one of the most creative toys in the world, engaging young and adult minds alike. Piece by piece we are building new worlds in a timeless existence; submerging in the process of constant combining, searching, building, only surfacing now and then to admire the newly born creation from every angle. It is one of those rare things around us these days that has remained practically unchanged in its original form.

While there are platforms out there that showcase MOCs, and other platforms that allow buyers to purchase LEGO® parts, there’s nothing on the market that serves both sides. Builders are usually forced to dig through unofficially named bits and pieces from enormous and difficult to use databases, and that’s an arduous task.

Cheppers and WLWYB addressed this issue by creating a website where builders can upload their MOCs along with the building instructions so that anyone can purchase them in one go. The MOCHUB team takes care of the product orders from part sourcing through to logistics and shipment. Buyers no longer have to spend time figuring out what parts they need, or where and how to buy them.

First steps

Our design team started the research in the beginning of summer 2017. The competitor analysis uncovered that there’s no direct competition on the market. Along with the business goals, this information helped the researchers to define the Unique Selling Points that WLWYB offers.

We organised interview sessions at the client’s office and warehouse. We spoke with WLWYB’s customer service representatives  who take care of the logistics and shipping. Understanding their point of view and work method was crucial as they are the ones who interact with orders arriving from the website. 

The UX backlog grew hour by hour and later, when we conducted 9 more interviews with the target group, we realised two major things: 

1. MOCHUB will be a real solution to the LEGO® community’s real problems; 
2. Our goal is to launch the website in time, so MVP features must be carefully selected from our backlog. 

There were many things the community needed, but in order to deliver a usable product, the Cheppers and WLWYB team worked hard to find the most important features from both the community’s and the business’ perspective. 

I’d like to see what others build, and how they connect the different pieces.

UX design

We, UX designers, are not inventors - most of the things we put on websites nowadays, users are already familiar with, and that’s why these elements are so easy to handle. Take the search bar for example: you know how it works and what it’s supposed to do, so you will have no problem using it on a site. And this is why we include a pattern analysis step in the UX design phase, to see which components fit well together and which components are easily understood by our users.

For MOCHUB’s case, the patterns were similar to many social channels, so components such as embedded videos, image gallery, feedback, comments and search bar were initially all part of the Library. Later, however, as we reduced the number of features for the MVP, some of these elements had to go. 

The personas that our team created in the previous research served as starting points for writing scenarios for both buyers and sellers. Based on these scenarios and the patterns we have gathered, we dived into wireframing and prepared an InVision prototype for testing. 

Testing a prototype with users overseas wasn’t the easiest, but our team enthusiastically approached the problem. It took 2 weeks to schedule and conduct the usability tests, and the gaps between each test gave us time to iterate. 

By the end of the UX design process, we had all the necessary insights on how potential users would use the website and how they craved a new platform that MOCHUB could embody.

UI design

Following client input, our design team took the time to carefully select the best font family for the website, and we proudly say that it works perfectly with the MOCHUB brand! Rubik with its curved edges harmonizes well with the notion of LEGO® building. Its proportionate spacing also gives a nice structure to any text content, and most importantly, works ideally with the color scheme we’ve chosen. 

Even from the beginning, we have aimed for a fresh, clean look where the LEGO® creations can stand out, spiced up with some playfulness. Purple and yellow complement each other nicely on the buttons and the CTAs, while the illustrations give users the intuition to play and create.

When WLWYB reached out to members of the LEGO® community, and invited them to sign up to MOCHUB as earlybird sellers, they faced enormous interest. As the research demonstrates, builders and sellers are equally hungry for a platform that serves their needs. They want to inspire others and be inspired. They want to be able to purchase LEGO® parts while also connecting with others from the LEGO® community. 

Website development

As a kid, as a parent, LEGO® has been a part of our lives that we at Cheppers all remember fondly. WYLWYB approached Cheppers with the idea of creating a platform where creative individuals can share and sell their creations using the vast supply of LEGO® components from WYLWYB. It’s an everyone wins scenario - we can finally purchase awesome kits, including building instructions and components, and as a creative, we can get paid for it.

The MOCHUB website has a relatively simple architecture: users upload their creations (My Own Creation - MOCs), and visitors can purchase them. Each purchase credits a portion of the income to the builder’s account, which they can then withdraw. Shipment tracking, workflow control, payment integration and e-commerce have all been incorporated and streamlined, with a stunning visual design to make both the provider’s and the consumer’s workflows incredibly easy to use. The idea was to create a platform for the MOC builders where they can showcase their work of art and that also allows them to make money of their hobby. 

When we heard about the project and reviewed the requirements, Drupal was the easiest and best framework of choice. The number of off-the-shelf components for the display layer, commerce functionality and administrative workflow, allowed the team to deliver the MVP site in just two months, despite several tweaks and additional new custom functionalities.

Our aim was to deliver a fully functional site, with a social ecommerce featureset and a great visual design, in a short timeframe. Naturally the frontend had to be fully responsive and overall, easy to use. Thanks to our UX and Design department and the thorough interview and design phase, the final visuals have met client expectations and will hopefully be positively received by the LEGO® community.

Modules we've used

Here is are some key modules used in the project:

• Drupal Commerce
• Bootstrap
• Panels and Page Manager
• Views
• Search API Solr
• Simple Hierarchical Select
• Slick
• Social Media API, Social Auth (Google and Facebook), Disqus
• SVG Image, Simple Styleguide, Blazy, Colorbox, Crop, DropzoneJS
• Webform

Drupal Commerce (Commerce, Order, Payment, Paypal, Price, Shipping) was an obvious choice for the ecommerce functionality, including association of prices to product, implementation of a simple checkout workflow, processing payment results and administering shipping.

Social integrations Disqus for comments, and Social Auth to support social logins, are our go-to solutions. They are reliable and very stable. Similarly, the Mailchimp integration is an excellent choice to power mailing lists, with no coding work necessary.

We even have a few patches in the tube that are being reviewed and rolling out for the following modules:

• Several patches for Drupal Commerce (Product, Shipping)
• Field groups
• Views

The illustrations used on the actual website and logo design are created by Missing Cloud.