UX/UI Design, User Research, Branding, Marketing, Content Strategy
When first beginning the project, I was provided with Dell’s application UI library. This system was visually outdated and not touch- or responsive-friendly, with tiny, flat UI elements. As the product grew I modernized the overall aesthetic of the UI elements, and established a visual identity that was rooted in Dell’s brand but also independent and unique, grown to meet the needs of our users.
I updated and refined components for better usability based on feedback from users, developers, project managers and stakeholders. I found we needed larger click-targets, better visual affordances for interactive elements, and clear hierarchy.
I built out a library of reusable components in Adobe XD with variations of components to be flexible enough to meet user needs in different scenarios while still staying visually consistent. Using the concept of Atomic Design, I started with the basic building blocks that form more complex components and templates.
Along with documenting all possible states of components, I included instructions and examples of their proper usage. I established rules for spacing, margins, and sizes for these components as a guide for the design team to keep our mockups consistent and be able to design more efficiently.
I worked closely with our front-end developers to understand what was needed and to follow best development practices. They worked on implementing the patterns as React components in Storybook, a front-end UI library. This would allow back-end developers to easily select and use components without the need for extensive front-end training.
Why is a UI library important? Let me count the ways.
If you have any sort of digital product, a UI library is crucial and ties in with your brand standards.
