Alida
Redesigning the product’s interface and creating a reusable design system.
Role
UX Designer
Duration
2 months
Deliverables
Information architecture, Design system, High-fidelity mocks, Interactive prototype
Challenge
Alida offers several solutions aimed at helping companies improve their customer experience management (CXM). As part of my work, I had the opportunity to participate in a project consisting of redesigning the interfaces of the products offered by the organization. The company had changed its name a few months earlier, previously named Vision Critical. A first significant update had already taken place on the company’s website to correspond to the new brand image. Members of the management team took this opportunity to form a small group in which we had the mandate to redesign and improve the interface of the products.
One of the project’s main challenges was standardizing the experience across many products. Considering the company has existed for several years, making the interfaces more cohesive was necessary to correct certain inconsistencies that had appeared over time. We also had to make sure that our proposals were realistic and considered the underlying architecture of the different products. Therefore, we worked closely with the team of developers throughout the project.
One of the project’s main challenges was standardizing the experience across many products. Considering the company has existed for several years, making the interfaces more cohesive was necessary to correct certain inconsistencies that had appeared over time. We also had to make sure that our proposals were realistic and considered the underlying architecture of the different products. Therefore, we worked closely with the team of developers throughout the project.
Problem Statement
“Products offered by the organization have some inconsistencies in their interfaces, which can confuse our users. How might we create a design system that harmonizes the interfaces to create a cohesive user experience that considers the constraints imposed by the underlying architecture of the current platform?”
Process
1 | Creating a design system
After joining the company, one of the first projects I participated in was creating a design system. In collaboration with the other designers on the UX team, we worked to set up a system of components in Figma based on the atomic design approach. This team initiative helped coordinate our work and improved cohesion between the new features we had to design. The design system also served as a foundation for the interface redesign project.
2 | Updating the user interface
The interface redesign project began by designing sections of the products with the most traffic. The structure of the different pages was improved as much as possible within the development constraints. The color palette was also updated to evoke the new brand identity while remaining appropriate for the context of a digital product. In addition, our team created some template pages to document design intentions and provide developers and other designers with guidelines. The design system was also continuously updated as work progressed.
3 | Stakeholders feedback / User testing
Given the project’s impact on the company’s products, several feedback sessions were carried out with stakeholders. Members of different departments were also consulted to obtain complementary perspectives on the products. Before publishing the new interfaces, user testing was conducted with users who were members of an early adopters program.
4 | Coordination and implementation
Collaboration with developers was essential throughout the project. Several implementation challenges appeared as the high-fidelity mocks were translated into code by the developers, which sometimes required adapting the design according to the architectural constraints of the platform. This close collaboration was genuinely motivating, in particular because of the open-mindedness and enthusiasm of all team members.
Results
Design System
The design system is the result of collaborative work between members of the UX team. Following an atomic design approach, we created a system of components in Figma that combines UI elements used across all of the company’s products. Figma’s variants properties were also used to increase the components’ flexibility. The design system played a central role in redesigning the interfaces. In addition, it also accelerated the speed at which new mocks could be created for upcoming features.
Homepage
The project was also an opportunity to redesign the platform’s homepage. As the number of products offered by the organization was growing, it was necessary to create a common landing page for them. This page allows users to understand the products they have access to and provides quick links to these applications. A first tab presents the main products available, while a second tab offers an overview of all the applications and features offered by the company.
App Drawer
The App Drawer is a new navigation menu designed during the project to allow users to navigate through all products offered by the company. Inspired by the new homepage design, the first tab of the menu presents the products to which a user has access, giving him quick links to the available applications and facilitating navigation through the platform. The "Discover" tab allows users to learn more about the organization’s products.
Products
The landing pages of flagship products such as Alida Sparq were redesigned to communicate relevant information to the users better. This page presents a dashboard highlighting data collected through the product pertaining to customer experience management. In addition, different visual strategies were used to prioritize information presented on the page according to its importance.
Survey Builder
Other features such as the Survey Builder were also revamped. In addition, the iconography was revised to represent the different types of survey questions and communicate certain features better. The color palette of the new brand identity was also integrated through the icons to highlight certain elements.
Dashboards
Colors from the new brand identity were integrated inside the dashboards of products such as Alida Analytics. In collaboration with the team of developers, some explorations were carried out with chart libraries to improve the dashboards’ interactivity. The objective was also to standardize the libraries used across the different products to enhance consistency.
Reflections
This project had a significant impact on the company’s products and received a lot of positive feedback from users. The improved navigation and the new homepage were particularly appreciated for their convenience. I believe this success results from the constant efforts and enthusiasm shared by each team member. Despite the tight deadlines, the collaboration and open-mindedness shown by everyone made it possible to achieve good results. Some findings include:
- Listen and respect others’ points of view to contribute to a good team spirit;
- Foster a collaborative atmosphere within the team to learn from other's experiences;
- Quickly share new ideas to feed discussions.