Building a Next-Generation Platform Focused on Simplifying Client Ad Submissions

COMPANY

OUTFRONT Media

SKILLS

UX/UI, User Interviews, Primary and Secondary Research, User Stories, Wireframing, Low-Fidelity and High-Fidelity Prototypes, Presenting

Stakeholders

TOOLS USED

Figma and Miro

WHAT I DID

I conducted research to gather inspiration and ideas for the prototype and brainstormed concepts with the UX design team. I also presented my own design ideas and inspirations. To understand the needs for payment and contract integration, I conducted user interviews with different teams, as our team does not typically handle those aspects. I then created low-fidelity prototypes for the MyOutfront.com page. After collaborating with my team to define user stories, I worked on a high-fidelity prototype, which I later presented as the final design.

Clients

(Primary Users)

Management/Leadership

TIMELINE

June - August 2024

OVERVIEW (End Goal)

During the internship, the task was to design a MyOutfront.com page that enables clients to independently submit ads, with a focus on user-friendliness and ease of use. The page allows clients to view their contracts and connected campaigns, track the status of uploads (whether they succeeded, failed, or are pending), and provides a seamless experience for submitting work and monitoring progress. The goal was to create an intuitive, efficient design that simplifies the process and enhances the overall user experience.

Problem Statement

The current process for submitting ads relies heavily on support from other teams, which can result in delays if the submitted content does not meet guidelines for sizing, appropriateness, or other requirements. These delays hinder the timely display of ads and create inefficiencies for both clients and teams.

With advancements in technology, there is an opportunity to streamline this process by designing a self-service platform where clients can submit ads directly in a more efficient and user-friendly way. The proposed solution is a webpage that allows clients to log in, view their contract details, and upload ads with ease. The system will notify clients if sizing is incorrect or automatically adjust it, flag inappropriate content for review, and provide real-time updates on the status of their uploads. This approach aims to simplify the submission process, reduce delays, and enhance the overall user experience.

Internal Teams

(Ad Review and Compliance)

Why These Stakeholders Are Essential

  • Collaboration: Each group contributes unique perspectives and expertise, ensuring the platform is well-rounded and effective.

  • Alignment of Goals: Balancing the needs of all stakeholders ensures that the final product satisfies users while also meeting business objectives.

  • Continuous Improvement: Feedback from all three groups during prototyping helps identify issues early, saving time and resources in the long run.

By engaging these stakeholders throughout the prototyping process, I’m ensuring the platform is user-focused, strategically aligned, and operationally viable.

Design Research

When working on the MyOutfront.com site, design research was essential in guiding the design process and ensuring a user-centric approach. To achieve this, I employed several research methods:

  • Competitive Analysis: I examined similar platforms to grasp industry standards for user-friendly interfaces and seamless self-service functionality. This allowed me to identify what worked well and what pitfalls to avoid, ensuring our platform met and exceeded user expectations.

  • Benchmarking: I compared the features and layouts of top-performing websites, focusing on key elements that could enhance the client's experience on MyOutfront.com. This step helped me pinpoint which design patterns and functionalities would offer the most value to our users.

  • Trend Analysis: I delved into modern design trends, including minimalistic layouts, intuitive navigation, and responsive designs. My goal was to create a site that was not only visually appealing but also practical and easy to navigate, contributing to an overall positive user experience.

  • Mood Boarding: I gathered visual inspiration for color schemes, typography, and layout ideas. By curating these design elements, I aimed to establish a cohesive and engaging design direction that aligned with the brand's identity.

With these insights in mind, I set out to create a design that was straightforward and clean while remaining true to MyOutfront.com's brand identity. My approach focused on balancing simplicity with a professional aesthetic, ensuring the design was both welcoming and efficient for users.

Here are some of the inspirations I gathered:

Low-Fidelity Prototype

To kick off the design process for MyOutfront.com, I started by creating a low-fidelity prototype with a few key pages, focusing on the basic structure, layout, and user flow. My goal was to visualize how core features—such as ad submissions, contract views, and upload status tracking—would be organized and navigated. My approach was heavily influenced by the design research I conducted earlier. Insights from competitive analysis and benchmarking helped me identify industry standards for user-friendly interfaces and effective self-service tools.

Trend analysis guided me toward a clean, minimalistic design with intuitive navigation, while mood boarding inspired a cohesive visual direction that aligned with the brand’s identity. By sketching out these elements early on, I could quickly identify potential improvements and gather valuable feedback, ensuring the design balanced both internal needs and a seamless client experience.

User Stories

When designing the MyOutfront.com platform, our process involved meticulously mapping out each step of the user journey to ensure a seamless and intuitive experience. I aimed to create a clear and consistent path for every possible interaction, making sure that whenever a user clicked a button or link, there was always a corresponding page or action.

One of the key storyboards I developed focused on the ad submission process. For scenarios where an ad met all guidelines, I designed a smooth flow that led to a confirmation page, displaying a successful submission message along with an overview of the upload’s progress. However, I also wanted to thoroughly address less ideal situations—such as when an ad didn’t comply with the guidelines. My storyboard for this scenario included a dedicated page providing detailed feedback on the issues, links to relevant guidelines, and an option to contact support for additional help. I also incorporated functionality for users to make adjustments and resubmit their ads directly through the platform.

My thought process was all about leaving no interaction unaccounted for. By visualizing the user journey through storyboards, I could easily identify missing pages or necessary touchpoints, especially in complex scenarios like handling declined ads. This approach helped me ensure that both ideal and problematic scenarios were thoughtfully considered, resulting in a comprehensive and user-friendly design.

Final Prototype

Since the MyOutfront.com project is still in progress, I can only share select snippets of the prototype rather than the full design. These glimpses demonstrate the ad submission process when a client meets all guidelines, showcasing features like enhanced notifications, a streamlined submission flow, and progress tracking to ensure a smooth user experience from start to finish. While I’m proud of the work I’ve done so far, I genuinely wish I had more time in this internship to refine my designs further—tweaking elements like sizing, incorporating additional features, and polishing the overall experience. This hands-on opportunity has been incredibly valuable, allowing me to learn and grow while contributing to a real-world project. I’ve truly enjoyed every step of this journey, gaining insights that will undoubtedly influence my future work.

Internal User-Interviews

I conducted user interviews with various internal teams, including the ad transaction team and those responsible for handling contracts and payments. These interviews were designed to gather insights into their processes and requirements, which were essential for integrating these functionalities into the MyOutfront.com platform.

During the sessions, I asked targeted questions about their workflows, challenges, and the types of information they typically handle. For the ad transaction team, I focused on understanding how they currently process ad submissions and address issues like sizing errors or content reviews. For the contracts and payments team, I explored how clients interact with contract details, payment statuses, and related campaign information.

The interviews provided valuable input on what features were necessary to ensure a seamless experience for clients while also aligning with internal operations. This collaboration helped refine the design and functionality of the platform to meet both client and organizational needs.

Here are a few examples of the questions I asked the teams and the responses I received:

High-Fidelity Prototypes

After finalizing the low-fidelity prototypes and user storyboards, I moved on to designing the high-fidelity prototypes for the MyOutfront.com platform. This stage involved refining the visual elements, such as color schemes, typography, and iconography, to ensure the design was both aesthetically pleasing and functional. I focused on creating clear, intuitive interfaces that guided users through the ad submission process with ease.

Each page was designed with attention to detail, ensuring consistency across the platform and alignment with brand guidelines. I integrated interactive elements, such as buttons, input fields, and notifications, to make the user experience more dynamic and responsive. Special consideration was given to error handling and success feedback, with designs showing how users would be notified about issues with their ad submissions or informed about successful uploads.

The high-fidelity prototypes were tested and refined based on team feedback, ensuring they not only met the functional requirements but also provided a smooth, visually cohesive experience for users.