Working on this project came with a number of organizational and technological challenges. Building a UI component library is a great way to enforce consistency throughout an organization. Throughout the process of building the library from scratch, I learned how to better communicate with management, plan, build, and distribute a complete UI component library for a corporate global company.
The idea was to build a UI library for designers to reference to create efficiencies and consistency across the .com platform. The goal is to help improve the customer experience by creating a consistent mental model of patterns during the exploration and purchasing experience.
During the creation of this project I played many roles. First, my role was advocating and creating understanding to the importance of a UI library to the business. Next, I become the lead designer. And now I manage the UI library. During all phases I’ve cross collaborated with global teams, stakeholders and with developers to build and support the components created in the library.
Designers and developers were working from scratch each time a component was built. The user interface was lacking consistency for the user and efficiency for the design and developer team.
Create a UI library as a source of truth and create components that can be arranged in many different ways in order to achieve multiple types of layouts, utilizing the same actionable items that react the same across the platform. The idea is this will help create a seamless experience for the user, and help build efficiencies for the business. Once created, keep working on improving the experience and components.
This builds business efficiency with new builds and helps the user have the same global experience throughout all funnels. It also helps with global component updates by creating once source.
Research and Data
In order to understand the customers pain points and solve, the teams utilize google analytics and heat-maps. This helps us understand how the user is interacting with each component, the flow and the funnel at a micro and macro level. We then take these understandings and apply them to design iterations to help update and create better designs for the user.
Brainstorming and Lo-Fi Wireframes
When starting this project, I wanted to keep in mind that there is currently already a flow and actions on the .com experience that the user is currently interacting with. So I dove into exploring what those actions were. The idea was not to disturb the UI/flows that are working, and to update and understand pain points that are not working and how to solve them. We also wanted to keep in mind that we didn’t want to create a huge step forward, but an iteration approach to be able to slowly introduce new models and patterns globally, so that we weren’t creating new pain points but in fact progressing the interface forward for a better customer experience. This took a lot of collaboration back and forth with different teams from developers, stakeholders, business analysis, designers and content administrators.
The Final Solution
The UI library has now grown to be a robust source of components and a source of truth for different teams to utilize. It’s now a house for technically feasible, creatively approved collaboration of designs, specs, requirements and components. It houses the building blocks to all things .com, specs, patterns, and helps with creating efficient UI and UX. Designers globally now have a resource to utilize to help them make sure they are staying on brand. It is a source of truth and used on teams throughout the global business. Site architects, developers, stakeholders, designers, content authors all utilize the library in their work flow.
Categories: My designs