Maps Renderer

Designing internal CMS tool for Ticketmaster

About Maps Renderer

Maps Renderer is a enterprise tool of Ticketmaster used to design “Style templates” for the Interactive Seat Maps

Ticketmaster’s (ISM - Interactive Seat Map) style designers used to write down several lines of codes for styling maps templates to render them on the live website.

The brief

With the increase in the ISM production/week it was becoming unproductive to keep up with the high demand. Updating the ISM styles and publishing them quickly was becoming a challenge

• Design a CMS tool which can be used to design the “style templates” for ISM quickly
• To increase the “style template” production rate
• To decrease the complexity and time to publish the changes in a style template

The team

I worked as “Individual Contributor” with my manager Suman Kukreti.

Collaborated with internal stakeholders, current ISM style designers, Senior Directors of Maps Division of Ticketmaster and development team of Maps Renderer.

My Role

Being an individual contributor, I was responsible for:

• Competitive UX Research
• User Interviews and Stakeholder Interviews
• UI and Interaction design
• Design QA and Dev Support

Research approach

Considering all the constraints in mind I decided to conduct following research activities to come up with my design decisions:

• Focus group discussion (with stakeholders) - to understand the business goals and pain-points
‍
• Competitive analysis - to understand the kind of layouts being used in the industry to solve such kind of problems
‍
• User Interviews (with ISM style template designers) - to understand their current workflow, challenges, pain points and to understand the kind of tools they are familiar with in day to day life.
‍
• Defining Success Metrics - to keep the goals of business and potential users aligned

Insights

2 Big Challenges

• Making changes in the already published ISM style template and then re-pusblish it quickly is a very slow process right now

• Coding from the scratch every time a style templated needs to designed and publish is a headache.

Defining Goals

Getting insights from the research done so far I defined some key success metrics to help me ensure that my ideations are in the right directions and also to keep the user & stakeholders aligned with the required outcomes

• Easy to use CMS for styling Maps and Render Templates
• Ability to save style templates. (Style Library). Thus there should be no need to design style templates from scratch always.
• Ability to share the templates with others.
• Ability to publish the template easily.
• Adaptable & Informative
• Build and launch MVP within 6 months

Ideations

Interface Design

Based upon all the insights and defined success metrics I used Ticketmaster’s design system to design the interface screens.

Access control

Dashboard for the user to access all the template created and shared with them

Collaborate easily

Ability to share the created style templates with other users for easy collaboration

Control setup

Ability to set up the controls for the style template

Design Style Template for ISM

Ability to set up the controls for the style template

Save style properties

Ability to save style properties to access them across the style templates which enable the user to avoid styling new templates from scratch always

Manage Backups

Ability to restore and delete the backups for the style history of the ISM style templates

Publish quickly

Publish easily all the changes in a style template with one click button

Impact & outcome

With usability testing of Figma prototypes stakeholders and users were happy with the MVP designs

We were able to achieve:

• Increase in ISM style template design production by 70%

• Decrease the publish time for the changes in already created templates by more than 50%

• Easy to use CMS to design style templates for rendering Maps.
• No need to write down the codes / use libraries to create “style templates”.
• New and Improved Maps Rendering Technology by the tech team.
• Fast rendering process and light on web.
• Adaptable & Informative
• Build and launch MVP within 6 months
• Loaded with many other features like sharing templates, quick style changes, quick publish, saving style templates.

Learnings

• Not every design project can be solved with the same approach.
• Sometimes we have to craft the design process balancing with the business purposes and priorities.
• Defining Success Metrics always helps for our ideations and design iterations in the right direction.
• Designing wireframes over paper first helps to test lots of ideas quickly within the team.
• This project helps me to understand how rendering technology for maps works.

Merci :)