Hi. I'm Paul, a French-born Digital Designer crafting apps and systems in London, UK. Currently Lead Designer at Metacell.

The model is built of nodes, projections and compositions. Each element has their own properties accessible from the Components Hierarchy.

When the user opens a composition, the Components Hierarchy panel automatically show which components are out of the view. This allows the user to drag components in this sidebar to include or exclude from a composition. This sidebar gives extra visibility and control to the user.

To build a node, the user can either drag-and-drop the placeholder node from the toolbar or select the tool by clicking on it and clicking on the canvas to add a node. A submenu to display and switch the type of node they're building also appears.

To create a composition, the user activates the tool in the toolbar and click-and-drag on the canvas to create the composition. This solution allows the user to keep control over their workspace and workflow since some users may prefer to start building their compositions before building their nodes, or vice-versa.

For the composition creation, we explored many different options. One of them was to click on the nodes the user wants to include in the composition. We gave up on this option for usability and technical constraints. Indeed, this would have led the UI to having to assume the position of the nodes in the composition.

The UI and brand are intended to be neutral in order to integrate with a maximum of restaurants and to highlight their dishes through photos.

The brand is intended to be neutral, yet it retains a refined and modern identity through the subtle details of the design.

The restaurant interface is mainly designed for tablets. It includes some components whose UX is complex like the system of editing the opening hours.

The interface follows the design guidelines of each device and OS to benefit from an optimal integration in native language and usual interactions.

As part of the rebranding we operated in 2021, we also created a new design system for our in-house products. As Lead Designer, I had the responsibility to collaborate with engineers and product teams in order to build a useful and scalable design system.

The UI uses different shades of dark and light grey in order to create structure and architecture in the design. The advantage of this system is that it can be replicated for all the apps of the suite in order to create unconscious content architecture across the products.

When zooming-out, the structure reveals its advantage in creating a consistent layout that can be reused across the views and products.

MetaCell Cloud Hosting offers a support center where users can discuss with technical support team members. This very-specific view also uses the structural layout and design system elements.

One of the biggest challenge on this project was to organize and display content in a way that doesn't hide valuable information to the user. In order to do so, displaying everything is not a solution since it creates visual overload. That's why we added table settings that allow the user to customize what they see.

Since new antibodies submissions have to approved, users were oftentimes submitting twice the same antibody. One of our mission was therefore to find ways to reduce the double-submissions. One of the solution was to give clear explanations when a user can't find the antibody they just submitted.

When user submits their antibodies, they get the information from the vendor product page. In order to assist them in getting the information easier, we embed the vendor product page next to the form so that they can copy content in the embedded and paste it in the form.

Demo of the prototype built in Figma.

Hero section

Graphic elements (WIP)

Integrations slider

CTA section (WIP)