Partner Portal
Desktop and Mobile Web App: 2022-2024
VIDAA is a mid-size smart TV OS platform available on major television brands such as Hisense and Toshiba. With its customizable menus and ease of switching between background applications, VIDAA offers a dynamic viewing experience.
The Problem
With Success Comes Challenge
Recently, VIDAA has been partnering with major brands such as Netflix and HBO to bring high profile streaming content onto the network. With the addition of these major brands, they’ve been attracting a large number of smaller apps and streaming services wanting to find a place on the VIDAA tv platform.
The Partner engagement team was overwhelmed by the influx of interest in the platform and is having trouble processing all the new submissions. App integration time is too high, and while more personnel could help ease the problem, the lack of a dedicated suite of partner tools was identified as the primary issue.
The Partner engagement team was overwhelmed by the influx of interest in the platform and is having trouble processing all the new submissions. App integration time is too high, and while more personnel could help ease the problem, the lack of a dedicated suite of partner tools was identified as the primary issue.
VIDAA partners need a faster way to integrate new apps, because currently the process is tedious and relies too heavily on email correspondence.
My Role: Lead Designer
Responsibilities
User Research
Journey Mapping
Wireframing
Prototyping
Interaction Design
UI Design
User Testing
Developer Handoff
Journey Mapping
Wireframing
Prototyping
Interaction Design
UI Design
User Testing
Developer Handoff
Timeframe
Sep 2022
-
Oct 2024
-
Oct 2024
Software Used
Figma
FigJam
MiroAdobe
Photoshop
Jira
FigJam
MiroAdobe
Photoshop
Jira
User Research
:: Empathize
I conducted a series of interviews both with members of the VIDAA partner engagement team and external partners, asking questions to collect both quantitative data about how the integration process is currently conducted and how they feel about it.
I mapped out the current integration process and identified a number of paint points from both user groups.
Among these, two in particular stood out:
Number of Emails: All communication and file handoffs were being conducted over email. This drastically increased the amount of time to launch, as there would typically a day or more delay between each interaction.
Information Validation: Partners would be given specifics on how to format app data for the VIDAA platform, but often ambiguity in the instructions or issues with the partner responses would result in a delay of over a week, between the time it took engineers to manually validate the data then respond to partners via email and wait for a response.
I mapped out the current integration process and identified a number of paint points from both user groups.
Among these, two in particular stood out:
Number of Emails: All communication and file handoffs were being conducted over email. This drastically increased the amount of time to launch, as there would typically a day or more delay between each interaction.
Information Validation: Partners would be given specifics on how to format app data for the VIDAA platform, but often ambiguity in the instructions or issues with the partner responses would result in a delay of over a week, between the time it took engineers to manually validate the data then respond to partners via email and wait for a response.
Personas & Competitive Audit
:: Define
At this stage, I created a number of user personas based on the different roles I spoke with. I needed to be sure that the system catered to both audiences, not just internal or external users. I also mapped out the user journey from the perspective of both the VIDAA partner engagement team and new partners.
I performed a competitive audit on similar company app integration processes from companies like Toshiba and Samsung, to see how the pain points I identified are handled by our competition.
I performed a competitive audit on similar company app integration processes from companies like Toshiba and Samsung, to see how the pain points I identified are handled by our competition.
Journey Maps & Sketches
:: Ideate
With the information from the user journeys and interviews, I was able to create user journeys and feature maps to determine the necessary core functionality of the platform.
During my interviews with the partner engagement team, I learned that there were an average of 30 emails sent back and forth before an app would be available. These were focused primarily on reducing email correspondences and performing data validation on the spot.
During my interviews with the partner engagement team, I learned that there were an average of 30 emails sent back and forth before an app would be available. These were focused primarily on reducing email correspondences and performing data validation on the spot.
While most partners only had one or two apps, some partners managed apps for over a dozen client companies. We made the decision to structure the platform as a series of profiles for managing each individual app. Each app should have a dashboard that displays the app’s online status, all relevant information, and functionality for manually testing their app.
Some users also commented that emails sometimes got lost within their organizations, so we decided that notification and messaging systems were crucial.
Some users also commented that emails sometimes got lost within their organizations, so we decided that notification and messaging systems were crucial.
Wireframes & Mock-ups
:: Ideate
I started the prototyping process with a series of wireframes. These translated the ideation exercises that I’d previously performed into designs into Figma designs that could be rapidly modified and iterated upon.
This system would be used by both low level representatives and experienced developers, so it was important that it be understandable by both groups while still displaying all required information.
This system would be used by both low level representatives and experienced developers, so it was important that it be understandable by both groups while still displaying all required information.
Usability Testing
:: Test
I used the low fidelity prototype to conduct a limited testing run with a small group of users. Overall, users understood the designs and said that they looked similar to platforms that they’ve used with other companies.
I ran a similar test with the partner engagement team to ensure that the integration forms aligned with the requirements that they needed to launch a new app. While we got plenty of feedback regarding this flow and specific functionality issues that needed to be addressed, they said that overall the design was in line with their needs.
I ran a similar test with the partner engagement team to ensure that the integration forms aligned with the requirements that they needed to launch a new app. While we got plenty of feedback regarding this flow and specific functionality issues that needed to be addressed, they said that overall the design was in line with their needs.
Design System
I noticed that, while the VIDAA smart TV product had a defined design system, internal tools did not. Each project typically had its own set of components, giving them each a distinct look with little thought to the cohesion between them.
I raised this issue with the head of design and was tasked with finding a suitable design system, as well as convincing both the designers and developers on other teams to adopt it. This proved to be a challenge, as we didn’t have the budget to create one from scratch or license an expensive one. Additionally, each project was built on a different front-end framework and developers from other teams were reluctant to spend time rebuilding these interfaces from the ground up.
I was eventually able to find a compromise between design aesthetics and developer priorities by selecting a Bootstrap based system licensed for commercial use, since this was the most common framework used on our internal tools.
I raised this issue with the head of design and was tasked with finding a suitable design system, as well as convincing both the designers and developers on other teams to adopt it. This proved to be a challenge, as we didn’t have the budget to create one from scratch or license an expensive one. Additionally, each project was built on a different front-end framework and developers from other teams were reluctant to spend time rebuilding these interfaces from the ground up.
I was eventually able to find a compromise between design aesthetics and developer priorities by selecting a Bootstrap based system licensed for commercial use, since this was the most common framework used on our internal tools.
I established a component hierarchy between the master file, a VIDAA customized design system file, and individual project files. Once this was done, I could begin applying the design system to my own designs and updating the prototype.
High Fidelity Prototype
:: Iterate
Taking the results from the usability tests, I was able to make some navigation and UI changes to the prototype before rebuilding it using the new components from the design system. I kept my team informed of the changes I was making as they happened, and incorporated some of their feedback as well.
With a fresh coat of paint, the prototype was nearing what would hopefully be its final iteration.
With a fresh coat of paint, the prototype was nearing what would hopefully be its final iteration.
In the first round of testing, users complained that the test results were hard to read, and they weren’t sure what the “View Batch” and “Download Report” functions were. By focusing on the information hierarchy and relative spacing of the elements, users no longer had the same issues with the high fidelity prototype.
Responsive Design
Some partners stated that while they wouldn’t use a mobile version for the uploading and testing portion of app integration, they would likely use their phone or tablet to check messages and testing updates while away from their PC. I used this insight to inform the design of the responsive portions of the platform, ensuring that navigation to these elements was quick and seamless.
Eliminated Amibiguity
Before the project, App metadata was created and delivered via a 20 field JSON file that partners would need to create manually. This introduced ample room for typos and other errors. By replacing this process with step by step forms, any room for potential errors such as these was eliminated.
Results & Moving Forward
The system underwent another round of testing and redesigns before it was handed off to the developers. I spent the next few weeks supervising the translation of the designs into a functional platform.
Once the platform was live, we asked the partner engagement team to monitor integration time over the next few months, as well as the nature of their email correspondences. The results were dramatic; adoption of the platform resulted in an over 40% decrease in time to launch. Partners were able to upload their apps directly to the platform and have the file and its associated data validated without having to engage in multi-week discussions to address issues.
With the success of this project, the decision was made to use it as a base to expand upon in the future, and to make it a "one stop shop" for all partners. We began the early planning process for additional modules, such as ad scheduling and app engagement metrics, that would hopefully see use as early as 2025.
Once the platform was live, we asked the partner engagement team to monitor integration time over the next few months, as well as the nature of their email correspondences. The results were dramatic; adoption of the platform resulted in an over 40% decrease in time to launch. Partners were able to upload their apps directly to the platform and have the file and its associated data validated without having to engage in multi-week discussions to address issues.
With the success of this project, the decision was made to use it as a base to expand upon in the future, and to make it a "one stop shop" for all partners. We began the early planning process for additional modules, such as ad scheduling and app engagement metrics, that would hopefully see use as early as 2025.