INDUSTRY:
TECH, INFORMATION AND INTERNET
COMPANY:
BLOQ.IT
YEAR:
2024
ROLE:
UX/UI DESIGNER
Bloq.it
about.
Bloq.it is a portuguese technology company that specializes in providing advanced smart locker solutions. The platform integrates cutting-edge hardware with a robust software ecosystem to offer customizable, efficient, and secure parcel management systems. The smart lockers are designed to enhance the efficiency of last-mile delivery, streamline package retrieval, and provide secure storage solutions for various industries, including retail and logistics.
My role as a UX/UI designer within the company had two primary focuses. The first involved designing new projects and features to enhance our product's user experience and functionality. The second was creating and maintaining a cohesive design system, ensuring consistency and efficiency across all digital interfaces.
challenge.
The company has been growing fast with relevant clients like VintedGo and DHL eCommerce in which it was important to have robust back-office software to deliver an efficient service. Also, the company has worked on an innovative project consisting of a lockers network and because of this, it will be needed to create new features for the application. To facilitate development, the Element UI library was used. However, it was quite restrictive, allowing only basic components and patterns, which began to limit better solutions.
The challenge consisted of a product legacy redesign which it was necessary to work on new features to adjust the product for the network project and improve the visual and library with a restricted number of components and patterns. Also, the product had a lot of inconsistency in its UI such as components, navigation and patterns, and consequently, users find it hard to track their progress and navigate through features.
It was defined some primary goals to work on:
Create new features and improve others existing.
Modernize the aesthetic and enhance the accessibility.
Usage of brand scheme colours on the product and creation of a white label for the clients.
Keep using the current Element UI library.
Design of new patterns and guidelines.
Create a design system management.
research.
Workshops
To gain a deep understanding of client needs, we conducted workshops with key stakeholders from Bloq.it and DHL eCommerce. These sessions allowed us to uncover critical product features, streamline workflows, and key pain points, providing valuable insights for shaping the solution.
Competitor analysis
Looking at the popular software applications it was noted how they use clean layouts with a focus on the main actions and considering the plenty of information existing on the pages like data and statuses. Also, the navigation and patterns are consistent helping the users complete the tasks easily, with a clean visual hierarchy. Also, the motivation colour schemes encourage user engagement.
Deconstruct existing design
A crucial step in the design process was conducting a thorough inspection of the current design to understand its functionality and the rationale behind each decision. By mapping the entire application, we were able to identify key issues and uncover opportunities for improvement.
Here were the main problems found in the UI:
A lot of information on the page with no clear visual hierarchy.
There were complex workflows where tasks were difficult to understand and complete.
Confusing navigation.
Component usage in the wrong way and inconsistent as well.
Use of small fonts and cramped layouts.
Colours without accessibility and not related to the brand.
Inconsistent icons.
Poor use of white space.
design new feature.
To enhance the back-office application, it was created new features based on the client's feedback and business needs. Here it will show just one of them.
User network management
In a locker management system, different users such as administrators and supervisors require varying levels of access to the system. However, the current system did not allow easy assignment of roles, leading to confusion about permissions. Additionally, tracking which user has performed specific actions is difficult, resulting in potential security risks and accountability issues.The user network management feature would allow administrators and supervisors to efficiently manage user roles, permissions, and network access within the back-office locker management system. This feature enables the management of locker access control, user hierarchy, and audit trails for actions taken by each user.
User flow diagram
The user flow diagram was designed to illustrate the steps users take to complete key tasks within the feature. By mapping out these interactions, the diagram highlights the sequence of actions and decision points, helping to identify potential bottlenecks.
high fidelity prototype.
Also, it was presented a high-fidelity prototype to show final design elements, visual details, and user interactions. It provides a clear vision of the end product, allowing stakeholders to experience the look and feel of the interface and test core functionality before development.
visual interface.
At this stage, the focus was to create the new look and feel of the back-office application. The goal was to ensure the UI was not only visually appealing but also functional, intuitive and accessible.
UI style guide
It is essential to establish a cohesive UI style guide, this will serve as the foundation for all visual elements throughout the application and ensure consistency in design.
design system.
A crucial part of delivering a well-structured and scalable UI is creating detailed documentation for the design system. This ensures consistency across the application as it evolves, helps onboard new team members, and supports developers in correctly implementing the designs. In this way, it was started to create the documentation.
Compenent guidelines
Content
Governance
It was created a design system governance to provide structure to manage changes. These processes and protocols were used for maintaining and updating the design system, even for small adjustments.
outcomes.
The outcomes of this project were significant in enhancing both the user experience and operational efficiency of the back-office application. By implementing the new user network management feature, administrators gained greater control over user roles and permissions, improving security and accountability.
The modernized aesthetic and UI style guide not only enhanced visual appeal but also facilitated a smoother navigation experience, allowing users to complete tasks more efficiently. Overall, the project addressed the critical pain points identified during research, paving the way for streamlined workflows and a more intuitive platform.
