Web portal form set redesign, and review experience enhancement

Customized Formset

Google

Enterprise

Web app

Collbration
Me, 1 Senior Interaction Designer, 1 UX Researcher, 2 Engineers, 1 Front End Eng team (India), 1 Product Manager (London), 2 TV team stakeholders (Sunnyvale & Tokyo)
Overview
Designed a customized formset and review card for a web case management tool. New design solution increased applicants’ task completion rate and reduced admins’ timespan on tracking multiple cases simultaneously.
Duration
3 month
↓ Scroll to see work ↓
Background / Context

Android TV Team Want to Use Sublicensing Portal for TV Product

To effectively handle TV rapidly growing business requests, the Android TV team aims to leverage the Android Partner Sublicensing Portal. This portal will be used to intake and manage requests from TV design and manufacturing companies seeking permission to integrate the Android TV framework into their products for sale.

However

Sublicensing Portal Takes Handheld but not TV product

The Android Partner Sublicensing Portal is designed exclusively for handling requests related to handheld format devices and is not capable of managing requests for TV format devices. Distinct device formats necessitate varying information and data collections from partners. Moreover, the reviewing process for TV format devices is considerably more complex compared to handheld devices.

Task

Design the Android TV cases intake and review experience for the Sublicensing Portal.

Now, delving into the request feature, it involves the creation and submission of requests by TV design and manufacturing companies.

User Research

Conducted user research to find out user pain points

I participated in the user research as a help to the UX researcher and the Senior Interaction Designer. I helped review questions and work on a research synthesis presentation. The survey includes 8 questions, going on for 3 weeks. We received 31 responses. Interviewees were evenly split across all the roles.

Research Synthesis

Top pain points for applicants and reviewers are ...

Applicants: Relating case detail page and form edit page
💬 “When editing form set, it is difficult to relate detail page with form edit page”
💬 “Tracking related cases on home page”

Reviewers: Detail page scrolling reference
💬 “Following comment communication topics”
💬 “Sometimes difficult to finding request to response to”

Stakeholder Requirement

Support case application and review flow for TV product

Another side of this project prerequirement is the specific request from the stakeholder which is the Android TV team. Request are separated from Priority 0 to Priority 4. The two P0 are.

For applicants:
📑 Support case application flow for TV product

For reviewers:
📑 Support different review team’s review flow

Define MVP

Stage 1 would solve for TV form and additional review needs

As you can see, there are user pain points waiting to resolve and business request asking to fulfill. After discussion of the project team, we decided for stage 1 the MVP we will support

1. TV formset
2. Additional review needs

These are the I will be focusing on designing and with the other user pain points and business requirements in mind for future scalibities. In this case study, I will demonstrate how I solve for TV formset. if you are interested in how I solve for additional review needs, please reach out to me, I can share additional details in portfolio review interview round

Design Exploration to Solve for TV From Set

3 Challenges to solve for TV from set

There are 3 challenges to solve for TV form set.

Challenge 1. User pain point: Relating detail page and with form edit page
Challenge 2. Stakeholder request: 4 times more questions
Challenge 3. Stakeholder request: 2 more layer of form fields dependency

The first 2 are relatively straightforward. Here are how I have solve them:

Challenge 1. User pain point: Relating detail page and with form edit page

Solve by changing 2 columns form to 1 columns form to create linkage btw form edit and details page

Challenge 2. Stakeholder request: 4 times more questions

Solve by using stepper component to break the long form to section to help application complete the form

Challenge 3. Stakeholder request: 2 more layer of form fields dependency

Solve by diagramming complex relationship and streamline workflow

By form field dependency, I mean this form behavior the when A changed B’s selection set changed.

Example to show form field dependency meaning

In terms of form fields dependency, TV team’s form set request is much more complex than I imagine or as anyone imagine. It was not until I put together this form field dependency diagram and presented to the project team. Everyone is pretty surprised.

After discussion with the project team, we decided to solve form filed dependency challenge by:

  1. Reduce some dependency
  2. Seek out preliminary question to ask first and locked to generate a static larger form set for different type of applicants to fill out
Iteration

Iterated on layout options and craft details

Deliverables

Case application flow was delivered for implementation

Below is part of our final UX mock for Android Partner Sublicensing Portal's Android TV request creation flow. It is separated to two parts, brand approval and project approval.

Usability Testing

Conducted light weight usability testing with stakeholders in weekly sync

Most of the project I’ve done helds weekly meeting with fellow UXers, engineers, and PMs. This is the first time I have stakeholders all the way through design process. Stakeholders are reviewers, a group of end users. Every weekly sync it reminds me of how my work have an direct impact on their daily life using the tool I’m currently designing. I see this as a great motivation on my design career.

I created click-through prototypes for each weekly sync, sort of like getting lightweight usability testing validation and feedback simultaneously which really helped me validate ideas and move forward.

Results

Positive feedback in close partners release

Each November, the Android TV team organizes a summit in the San Francisco Bay Area, inviting business partners. The MVP version of brand approval will undergo testing during this gathering. We presented the Brand and Project Creation Flow design for Engineering implementation in July. The implementation will occur in phases, with the Brand Creation Flow being implemented in 2023 Q3 & Q4 and 2024 Q1. Following that, the Project Creation Flow and Parallel Review will commence in 2024 Q2.

Other projects