BRIEF
Clarity was the first project I was assigned to when I began working at Dell. The existing library was made by a small team of designers with help from a remote front-end development team. It had been neglected and wasn't considered a priority.
I saw this as a huge opportunity for Dell to create a design system teams could reference and use to help push software forward. I expressed a deep interest and began leading the project.
ux. design system. copywriting. component development.
1. LIBRARY DEVELOPMENT
Guidelines + usage
The most important piece of this project was the content. Deciding what to include, how to discuss it and what to supply to visitors was very difficult. I researched how others had configured their libraries and the topics they chose to focus on. I dug into every Dell program I could find to build a list of UI elements I found on each. A huge amount of data was generated that pointed to what topics and UI elements were most commonly used.
Foundations
Foundation UI elements provide guidance on how to create simple and flexible interfaces. I believe the foundation topics are the most critical topics to ensure Dell software maintains a consistent look and feel.
Examples: accessibility, color, data visualization, grid, iconography, modularity, motion, typography, voice
Creating Components
Components are simple UI building blocks. They are standalone elements, existing independently of each other. Each component has a specific function and personality, actions and motion.
All components include guidelines to help teams decide when and how to use them properly.
Examples: alerts, badges, buttons, check-boxes, drop-downs, input, pagers, progress bars, radio buttons, sliders
2. SITE DESIGN
Giving Clarity a home
Once the content had been locked down and agreed upon by all teams and stakeholders, I began creating designs for the website. Similar to its content, I focused on making the design scalable to accommodate future additions and changes. It had to also be striking and beautiful, as it would be the entry-point for all Clarity visitors.
Site Templates
Designers requested templates for documentation pages to help guide their thinking and writing. I created these templates in Sketch and shared them amongst the group to be edited and uploaded to InVision, where our developers could see and track updates.
Navigation
Organizing the site content logically was a constant focus as the system developed. I tried to stay months ahead of our current status, so I could better anticipate what changes would be needed as content was added the system grew in size. I explored several types of navigation options and shared them with key stakeholders to:
get feedback
keep them up to date about the direction Clarity was headed
share concerns that needed to be addressed
3. Dell Design System
New Phase
Fast forward a few months and Clarity becomes Dell Design System. Along with the name change, dozens more designers and developers have joined the team. There is a new executive sponsor with a new vision. Her first priority is creating working groups for the major initiatives. I have been tasked with leading two of those groups, focused on researching tooling and the documentation website.
Working Group: Tooling
This working group is tasked with suggesting what suite of tools will best support the work for our design team. We met with teams from Adobe, InVision, and Figma to better understand their roadmap and get a deep-dive on each of their products.
Working Group: Website
This working group was tasked with recommending how the Dell Design System would be accessed and shared online. I led a small team that included a developer, researcher, and visual designer. We began by seeking to understand how Clarity users interacted and consumed past content. We created a questionnaire to better understand their pain points and goals.
4. Results
Lessons Learned
The Dell Design System has grown significantly in the past 3 years. I played a large part in introducing practices and processes that would ensure the system remains fluid and constantly growing. More than ever, the system is under intense scrutiny as Dell continues to grow as more software acquisitions are added to the Dell Technologies family. Each new acquisition brings new styles, processes, and needs that the Dell Design System team must understand.
Transitioning from Clarity to Dell Design System brought a completely new approach to previous work. Although the content I heavily contributed towards in Clarity is getting reworked (and largely removed), I am happy to see the team adopt and embrace the processes I fought so hard for with Clarity. Designing atomically is the adopted practice and the conversations revolve around what value users will see and experience. For that, I am incredibly proud of the contributions I made.