POND5

Design System

Project Overview

Over the years, Pond5’s UI standards have changed but were not recorded in the database for all the designers and engineers to easily have access to. I wanted to eliminate the confusion between internal teams and improve the frustrations we face because of the inconsistent designs. It was challenging for the designers to find the right icon or color to use, and hear back from the engineers that this isn’t the correct color they have in their library. I guess you can say, I had enough of all the confusion and mess. No more hunting down an icon that lived in someone’s Sketch file. With this project, I will show the process of how I was able to create a design system that is usable for designers and engineers and get buy-in from internal teams.

Our Goals

Design Debt

Reduce design debt that we have accumulated over the years.

Industry Standards

Understand what devices and how our users are viewing the Pond5 site. Update the screen sizes and breakpoints based on market research and best practices

Reduce Confusion

Improve the amount of back and forth between designers and engineers

Accessibility

Create a library of assets and components that can be updated and changed at any given moment by eligible users.

Consistency

Unify all styles by creating components that can be used creatively


Inventory

The first thing I did was take an inventory of all visual attributes, such as the colors and icons.

Colors

I worked closely with the front-end developer to put together a visual library of all the colors the developers had in their database library. The image below shows all the colors they had on their end.

  • The naming convention is causing confusion for all users. It will be very difficult to remember which gray is Alto,

  • The grays are all very similar and I could see why there was so much confusion between designers on which gray they should use in their designs.

  • There are a few colors we have never used on Pond5 before, but they still exist in the library.

 Iconography

Next, I took a look at our library of icons the designers had and the icons collected on the developer side.

  • Files were a mix of SVG and PNG formats. The image below is all the PNG icons in each color stored in the database.

  • Inconsistent stroke weights and sizes

  • No clear indication of what these icons are or are used for

  • On the designer’s end, there was a library of icons but it was very out-of-date, which meant a lot of “newer” icons were never added to the library.

Inventory of Icons throughout the site. All icons were exported as PNGs

 Devices & Browsers

Next, I wanted to take a look at what our users were using to visit Pond5. We used Google Analytics to track all the devices and browsers used in the past 3 months. Narrowing the dates to 4 months, gave us a clear indication of the users coming to Pond5 recently.

Browsers

  • Using Chrome - 66%

  • Using Safari - 15%

  • Using Firefox - 6%

  • Other browsers - 13%

Operating Systems

  • Windows - 38%

  • Android - 25%

  • Mac - 18%

  • iOS - 10%

  • Other - 9%

Mobile OS

  • Android - 70%

  • iOS - 30%

Device Breakdown

  • Desktop - 92%

  • Mobile - 7%

  • Tablet - 1%

Desktop Screen Resolutions (Top five results)

  • 1920x1080 - 60%

  • 2560x1440 - 18%

  • 1440x900 - 13%

  • 1366x768 - 7%

  • 1680x1050 - 2%

Mobile Screen Resolutions (Top five results)

  • 360x640 - 40%

  • 412x732 - 12%

  • 375x667 - 10%

  • 414x736 - 5%

  • 360x720 - 5%

Screen Sizes and Breakpoints

Comparing the data above with the screen sizes the UX Design team was originally designed for, I have discovered the screen sizes and breakpoints were no longer relevant for our users. The data indicates that 60% of our users view Pond5 on a 1920px screen resolution and 7% on a 1366px, which means the 1360px desktop size was no longer important. As well as the breakpoints were also not ideal sizes for our current users.

Original Screen Sizes for Design & Breakpoints

  • Desktop - 1360px

  • Small Desktop - 960px

  • Tablet - 640px

  • Mobile - 320px

 Presenting the Findings

I put together a short presentation for the Product team and the Front-End Developers to show a visual of the current state of the site. Along with presenting the findings, I wanted to have a conversation on why we should fix this. We were all in agreement, that by correcting these issues, we would be able to work quickly and efficiently across all teams. A lot of team members work remotely and internationally. Between 50 developers and a design team, we need to have an up-to-date Design System.

After a successful discussion, my next steps were to provide solutions on how we can seamlessly unify the UI standards.

“Design systems enable teams to build better products faster by making design reusable—reusability makes scale possible. This is the heart and primary value of design systems.”
— "Design Systems Handbook" By Marco Suarez, Jina Anne, Katie Sylor-Miller, Diana Mounter, and Roy Stanfield

 Solutions

My goal this year was to create a design system that could work internally between the designers and developers. Working closely with the designers and the front-end lead developer, we have created a list of areas that need to be updated and refined. Below, you will see some of the solutions to foundations and components to help our team work seamlessly and drive success. The reusable foundation and components are available for the team through Invision DSM. DSM is a great tool and easy to sync for designers using the Sketch application, but DSM is only a temporary solution for developers.

 

Screen Sizes & Breakpoints

Based on the data, research into market trends, and best practices, we are suggesting that we begin designing for screen sizes our users typically view in. As well as update the breakpoints for a more seamless responsive and fluid site.

New Breakpoints

  • Desktop - 1025px +

  • Tablet - 768px - 1024px

  • Mobile - 320px - 767px

New Screen Sizes for Design

  • Desktop - 1920px

  • Tablet - 768px

  • Mobile - 360px

 Grid Layout

During the audit, I also discovered a lot of inconsistent layouts. Almost every page wasn’t designed to a grid, which takes up a lot of the developer’s time and resources to work on the designs. I spoke with the developers and they were pleased to hear I wanted to provide designs that aligned to the same grid moving forward.

 Foundation

Color Palette

  • Get rid of colors that are too close in similarity

  • provide more range of colors

  • Keep the primary colors

  • Rename colors to be Color # (Blue 200) No more Razzle Dazzle

Typography

  • Keep consistency with headings, body copy, etc.

  • Separate type treatment rules for mobile

  • Have a proper name for each type of treatment H2, H1 Mobile, etc

Iconography

  • Organize each icon into categories

  • Reduce the rate of creating new icons by looking at the library first and pulling from existing assets

  • Export all icons to SVG, this way the developers can alter the size and color appropriately

  • Update all icons to match stroke weights and style

 Components

Buttons

  • Provide a set of button options and titles to indicate what they are used for

  • Standard button size of height and bottom but the length can vary

Elements

  • Having elements on a single page and categorized will help designers know what already exists and reuse elements. This will also allow for a quicker workflow for the developers.

Key Learnings & Next Steps

  • Invision DSM is great, but it is also a temporary solution until we can create a Design System that can be synced to Pond5’s database so it could be easily accessible to all engineers

  • Implement SVG’s to all icons throughout the site

  • Designers should maintain the design system as things change (as they should)