Case study presenting a quick recap of the design journey from concept to launch of the multi-platform MOVEX Live Shopping product.
Create a cutting-edge live shopping platform that would connect shoppers with their favorite brands and products through interactive streaming sessions, creating an immersive shopping environment. The product should meet the needs of users and differentiate itself from competitors in the market.
Combine an efficient user experience with intuitive, user-centric and easy-to-use interfaces based on solid user research. The product consists of an app, a back-office platform and a landing page with video content to embed in customers' e-commerce.
In addition, clear communication of the design process is essential to align design goals with business objectives and user needs. Along with close collaboration with cross-functional teams such as engineers, product managers, marketing managers, sales, designers and executives.
A design strategy, as well as agile methodologies, were followed to approach the development of the Movex Live Shopping product. It was divided into stages, was a non-linear process and involved the collaboration of cross-functional teams.
To develop an effective digital product, it is essential to understand the target users, their behaviours, needs and expectations. Therefore, research was carried out in the discovery stage to gather user insights in order to define problems and user-centric solutions.
Conducted extensive market research and benchmarking. Analysed the performance of competitor products. The focus was on functionalities, core sections, information architecture and logic applied to live shopping platforms, in order to gather weaknesses to improve and best practices to implement.
Talked to people who might use the product or that have been using a similar product, to gather insightful information and learn about their expectations, their needs, and to discover pain points.
In the definition stage, the information gathered during the discovery stage was organised and analysed to define the core sections of Movex Live Shopping, the key features and functionalities, the problems to be solved and best practices to be applied.
Fictional characters were created based on research in order to represent the different types of users that might use the product. Role-based personas help to understand the goals, demands, and challenges of each role.
During the ideation phase, user-centred ideas were generated to tackle the design of a live shopping product that meets the user's needs and stands out from competitors in the market, based on user understanding provided by the previous stages.
To guide design decisions towards improving the user experience and the success of the digital product, a number of principles were followed, the main ones of which are: user-centricity, consistency, simplicity, hierarchy, accessibility, adaptability, user control and error prevention.
The information architecture of the MOVEX Live Shopping product is based on user roles. This means that the content and structure varies according to user roles, and that each role has specific permissions. The main information architecture tasks were to structure and organise content, create site maps and navigation systems.
It covers the activities of the users and the tasks to be performed in each section. It includes the content of the sections, defines interactions, error prevention, and acceptance criteria.
Low-fidelity wireframes were created to think and communicate the product structure quickly and with few resources.
Some thoughts on the main research findings and solutions applied to the product.
Solution: The product has two main sections for adding videos: shows for creating live and VoD content, and clips, for creating short VoD content.
Solution: Video content can be automatically selected and filtered by tags in sections: Shows, Clips and Media Library.
Solution: The section for creating the landing page that is embedded in the client's website was defined as Media Library, and the content is organised by Playlists. Playlists can include shows or clips to differentiate long video content (shows) from short videos (clips).
Users can add as many playlists as they wish and easily rearrange the order (with drag and drop), filter and edit the video content, and view the created playlists as a list or gallery.
Solution: Settings section was defined to allow users to customize the shop with flexible branding features. The section enables the user to: customize buttons, adjust layout, add logo, change colour scheme and fonts.
Solution: Analytics section was implemented, containing graphs of the shop performance, based on key interactions data such as video views, product clicks, comments and viewing time.
The goal of this stage was to create an intuitive, coherent, simple, practical, accessible and user-friendly interface for the product. The user interface design process focused on the look and feel of the interface to enhance the overall experience and encourage users to maintain interest, easily access information and perform tasks.
A design system was created and maintained to establish consistency and streamline the design process. Utilized Material UI react component library and Font Awesome icon set library, customizing components with Movex LS styles.
Wire flows were created to define the scope, content and actions of each section. The documentation of each section was based on wire flows: hi-fi wireframes that highlight various user paths, documenting all screens and interactions involved in each section.
We could highlight two key features of MOVEX Live Shopping platform design:
Clean, minimalist design that focused on the essential elements and reduced clutter. The use of white space, legible typography and consistent visual elements contribute to a clear and modern interface. The overall colour palette relied primarily on a combination of neutral greys and light backgrounds, used to provide a clean design, and bright accent colours to draw visitors' attention to interactive highlights, CTA elements and important details.
A modular design framework was implemented that organised information into reusable modules in different sections. The aim of the design was to simplify the process for developers and to create a solid structure with a scalable design system.
