Qlmieto ltd
/kyo͞o-el-mē-ēē-tɔ/
/kyo͞o-el-mē-ēē-tɔ/
I worked as UX/UI Lead Designer at BBH London (hands-on), taking charge of the redesign, strategy and rebranding of the website for Movu Robotics, a warehouse robotics solutions company producing automated integrated ecosystems. The design of the new website was part of the extensive rebranding process from Stow Robotics to Movu Robotics, led by BBH London.
The work involved an equal 50-50% split of UX and UI design, executed within a very tight timeframe of three and a half months.
What initially seemed like a straightforward microsite design project, evolved into a complex and challenging task, that involved audits and discovery phase, the development of digital content strategy, structuring and organising information architecture, creating user journeys and flows, conducting workshops and client interviews, working closely with copyrighter to produce content, creating and testing interactive prototypes and designing a modular and reusable UI design system with elements of immersive 3D animations.
Previously known as Stow Robotics, Movu Robotics was rebranded and repositioned by BBH London as an innovative cutting-edge warehouse robotics solutions company producing automated integrated ecosystems.
The goal of the project was to create an immersive website for Movu Robotics and to bring the new brand to life. The objective was to differentiate them from competitors by blending creativity with cutting-edge technology and to position them as leaders in warehouse automated solutions.
The main challenge was lack of understanding of the core products and offerings, how to best structure and identify the various solutions the company provides, how to simplify the narrative avoiding excessive technical jargon and how to engage and retain users with diverse goals.
Another significant challenge was determining the optimal design and content strategy within a remarkably tight delivery timeframe of three and a half months.
The design principles were established early on during the Drill and Define phases. The idea was to achieve a bold design, utilising strong typography, a simple yet punchy colour palette, easy navigation & UX, video content and immersive 3D experiences. The kinetic movement and 3D immersive experience were identified as points of differentiation from competitors.
The cohesive visual language was crated utilising atomic and modular approach. The narrative unfolds through strategic storytelling, interactive elements and a commitment to innovation, showcasing excellence and dedication in shaping the future of warehouse robotics.
CGI on-scroll animations were used to create a compelling narrative through immersive 3D experiences to showcase the products and solutions in all their glory.
The 3D renders and sequences were created in-house by CGI artists at BBH London. My role involved ideating the narrative, liaising with the copyrighter so that the animations work from the storytelling perspective, aligning renders with the brand, creating storyboards and directing and guiding the production of the 3D sequences for four different products.
Due to time constraints during both the design and development phases, the decision was made to primarily focus on desktop and mobile breakpoints. In this compromise, the tablet breakpoint closely mirrored the desktop rules, including a 12-column grid, layout and spacings, while the maximum width for desktop content was limited to easily switch between tablet and desktop views.
Atomic design principles and modular approach were used to consistently and effectively communicate brand through design system. This approach enabled us to create a cohesive visual language and facilitate easy updates, design iterations and design system maintenance. Each atomic element represents a fundamental aspect of the brand, contributing to a cohesive visual identity.
The modules and atomic elements had been created with different design, alignment and background variants, utilising Figma variables for easy colour and breakpoints changes.
Figma components
& variables
Each component works in dark and light mode, with different states, design variations, text and image alignments set within component set. By utilising Figma variables to define each element, it became easy to quickly make changes to the module layout, colour mode or breakpoint.
Before entering the design phase, a comprehensive discovery phase was conducted. This included research and audits, workshops and client interviews, the development of a digital content strategy, structuring and organising information architecture, creating user journeys and flows and working on wireframes and high-level prototypes.
The whole process was broken down into five phases: Drill, Define, Design, Develop and Deliver.
Overall, the old Stow Robotics website was very light, lacking in visual and written content, with dated user experience. It didn't drive traffic, generate leads or inform about products. The website technically didn't match the ambition. There was nothing in the current website that was worth taking forward to the new reality. A complete overhaul was needed from a user experience, visual design, information architecture and content strategy perspective.
A thorough audit across the 18 identified competitor brand websites surveyed the current landscape to identify opportunities and pitfalls. The sites were examined in terms of content type, content hierarchy, messaging and primary calls to action.
The main findings indicated lack of innovation in terms of content and use of imagery and film. The UI design and methods were generic and conventional. The movement (or lack of it) was identified as a point of differentiation from competitors.
Expanding the reference pool to encompass beacons beyond the category, including those in tech, EV and industrial design, allowed for a more comprehensive understanding of the potential approach to website structure, design and content.
Smooth interactions, a clear content structure, bold design and immersive and engaging experiences were immediately recognised as the primary differentiators.
From stakeholder interviews and workshops, six main user groups with different challenges, goals and motivations had been identified.
From there, we progressed into the Define phase and have started to map out six different user cases and journeys that will identify key website content areas and initiate the shaping and development of the website's information architecture.
The content hierarchy and the sitemap underwent continuous refinement during the define and design phases to adapt to various users and their requirements. With the content expanding through various iterations, the adoption of a Mega Menu structure for the main navigation emerged as a logical solution for easy and intuitive navigation.
Due to time constraints, high-level wireframes were created to identify main pages and conversation areas. The strategy was to address most of the UX considerations during the UI design stage. As a starting point a high-level wireframe prototype was developed in Figma to both test and facilitate discussions with the client.
During this exercise, major content areas and overall narrative had been defined. The primary challenge was to identify and categorise product and solution offerings and how to communicate them clearly. Certain doubts and content refinements were left to be addressed during the UI phase.
