tmONE Design Framework

amgr-skills

Ticketmaster’s style guide is one that is always changing and growing. Thanks to that fact, it’s always pretty hard to keep the documents updated. And it’s even more difficult to get a new team member up to speed. We needed a cross-team solution that would cater to designers, and be a quick code repository for developers — unifying our style as an organization.

core-logo

That’s where Ticketmaster CORE Guide comes in. I was given the task to build a site that would house the style guide and code excerpts for our B2B departments. We would need a clear and concise way to communicate an element’s status, provide the interactive example, and coding excerpt.

Previously, team members would have to pass around style guides via .sketch files whenever the lead designer would make updates. It was a slow and unassisted process, so it’s no surprise that it was always out of date. I dreamed up a solution that would alleviate this issue and partially automate the workflow.

Let’s take this experience through the eyes of a UX team member

We’ll name him Michael, the designer.

michael

Michael is a a new hire to the B2B department at Ticketmaster. Along with his meticulous design style, he also always names his files and layers well, and is extremely helpful from within a team. It makes sense that he would get hired as an interaction designer.

During Michael’s first week, he spent time with each of his new teammates in order to find out more about the project’s they’re each working on. He saved the notes from each of his meetings, but they weren’t enough to inform his style.

shot-1

That’s where the tmONE style guide comes in. Each component in the guide displays a status label. This feature was implemented to allow the style guide to live in all of its different states: UX Research, In Development, and Up-to-date. When a user pushes an update, they are to adjust the status of that individual element, allowing the rest of the team to decipher what’s an updated style or code excerpt.

To get started, Michael can download the grid layout sketch file and get started on his new app wireframe.

While developing his interactive wireframe prototype, Michael cross-referenced all of the relevant components and their case studies, enabling him to sculpt a great initial wireframe concept that is consistent with the design organization’s standards.

shot-5

All of the designers on Michael’s team are responsible for updating elements when there is a case not represented in the guide. This happened when Michael was trying to create a new flow inside of his app design. After creating the new element variation, he can add his live example to the CORE guide, allowing his teammates to see his example from the component’s page.

shot-3

Presto! Michael has successfully got himself up to speed using the style guide and then submitted his own amendments for reference.