// Ideation & Coordination

I work with the leadership team to discover insights and turn concepts into features. I collaborate with the dev and marketing team to align user goals with business goals.

// Design Execution & Validation

I create sitemaps, user flows, wireframes, prototypes, and conduct usability studies and user testings to validate the designs. I lead efforts to evolve the service and address user pain points related to the brand partnership experience.

// Build & Maintain Design System

I create a modular design system based on reusable components and their states. I maintain the design system regularly, ensuring that UI patterns stay up to date, embrace evolving design and development best practices, and continue to address user needs.

// Art Direction & Brand Design

I design brand guidelines, transactional emails, social posts, and specific campaign related image and video content.

// Partner Matching

One of our product's key features is to allow brands with matching target audiences and core values to connect in seconds. The "Partner Matching" page was initially designed with a regular card layout, but it was later iterated into a Netflix-style design that displays brand details when hovered over. This makes the partner matching experience more visual and straightforward, while also reducing the unnecessary repetition of UI elements, such as the "Request Partnership" buttons.

// Campaign Management

The "Campaign Manager" provides partnering brands with simple workflows to easily coordinate multiple campaign types, such as discount sharing campaigns, giveaway campaigns, and gift-with-purchase campaigns. With the "Campaign Manager", brands can plan and launch their campaigns without ever leaving the platform. As of October 2023, there have been four major iterations of the “Campaign Manager”, each with upgraded features and improved user experience.

// Success Measurement

Analytics allows brands to monitor important performance metrics after launching campaigns, such as impressions, opens, clicks, and return on investment.

// Problem

To provide a better matching experience for brands, we created ShopSwap Scores, which use our algorithm to show how well a brand matches yours. However, the algorithm requires brands to provide detailed information during the onboarding process, which can lengthen the onboarding time and discourage users from completing it.

// Solution

• Visualized the onboarding questions by using Tinder-style cards.
• Added skipping options and encouraged users to go back and finish the onboarding questions after signing up by blurring the ShopSwap Scores.

// Problem

There are common campaign types that are often used by brands during partnerships, such as discount sharing, giveaways, and gift with purchase. We want to reduce the workload for brands as much as possible by providing pre-generated tasks after they have chosen a campaign type. However, we discovered that the complexity and specificity of each task varies. For example, some tasks require brands to collaborate, while others can be completed by each brand individually. Some tasks can be completed by one brand but require the other brand's confirmation.

// Solution

• Defined each task as one of four types: individual, collaborative, hybrid, or general. Designed progress pills with tooltips to educate users how different task types work and what they should do next.
• After user testing, we discovered that one brand typically does most of the work, while the other brand mostly just confirms. So we also removed the restrictions and dependencies between tasks so that brands don't have to wait for the other brand to take action before moving on to the next task. This improves the continuity of the workflow and reduces the bounce rate.

// Problem

Discount code or gift redemption landing pages are essential in co-marketing campaigns, but they can be a hassle for brands to create. They need to build a working website that collects emails and displays discount codes. Additionally, brands have the need to customize the landing pages to match their branding.

// Solution

• Created a landing page landing page builder that is easy to use and customizable.
• Designed pre-made templates that brands can customize to match their branding.

// Problem

We discovered that some brands prefer to publicly announce a partnership opportunity with a specific campaign type and topic in mind, rather than cold-calling other brands without knowing if they are interested in collaborating.

// Solution

• Designed and developed a new "Campaign Broadcasts" feature that allows brands to post and apply for partnership opportunities, as well as manage their broadcasts and applications.

// Adapt to the company's work pace

In reality, the design process can be very different from what we have learned in classes or books. Different companies can have different paces and expectations for their employees. When I first joined ShopSwap, I was not completely accustomed to the startup work pace. I would spend a lot of time researching, ideating, and sketching before delivering my designs, trying to find the best practices and solutions to solve user pain points. However, after communicating with the leadership team, I began to adjust my pace. I omitted steps in the design process that seemed less necessary in the startup environment. For example, I sometimes skip wireframing and go straight to prototyping if most of the components are reusable in the design system. This is because the priority in the early stages is to make the product work as quickly as possible. As the saying goes, "we can always iterate later."

// Always consider responsive design and different states of design components

It is important to think about the compatibility of the design with different screen sizes before you find out that some elements will be difficult to present on smaller screens and have to modify the design. It is also important to include different states, such as empty states or error states of components. For example, most of the time the first state that users see is the empty state, so it is crucial to think about how to make the empty states attractive and effective as well.

// Direct communication with the dev team

When I first joined ShopSwap, I would have my designs reviewed by the leadership team, get their feedback, and then iterate on the designs. However, as designs and modifications became more complex, it became difficult to keep track of the design process. So I started to manage the entire design process myself and hand off the designs directly to developers after they had been reviewed by the leadership team. This not only lessened the workload for the leadership team, but also made it easier to sync up design details, discuss potential technical constraints, and modify the design more efficiently.

// Avoid showing redundant or default elements, making the design as clean and effective as possible

I would like to express my gratitude to our CTO Amit, who always encourages me to think outside the box. For example, hovering effects can be used not only for educational information, but also for repetitive elements such as the "request partnership" buttons on the partner matching page; progress pills can be hidden when they are in the default to-do state; and a separate card can be popped up to draw the attention of users when there is a necessary action.