Designing for Pandas


Part I


SeekPanda is an intermediary platform that helps to matchmake quality interpreters with foreigners seeking to do business overseas. It’s an overused analogy, but think Uber for interpreting. Started by Matt and Phil, two American entrepreneurs based in China, the goal of SeekPanda is to provide hand-picked, personally screened interpreters, or “Pandas” as they may call them, with the goal of eliminating under-qualified yet highly priced candidates from proliferating the market. As lead designer, I had the privilege to work with a wonderful team at SeekPanda and rebuild the product from scratch.

Click to view Job Profile
Click to view Panda Profile

Objective

It is often very difficult to find the right interpreter for your overseas business needs. Whether it be a factory tour, business negotiation, or an event hosting, your choice could make or break the deal. China especially is saturated with under-qualified interpreters boasting high credentials. That’s the problem SeekPanda aims to solve — to optimize matchmaking in the interpretation industry.

Panda Profile Product 1.0; before I joined

The team began with Product 1.0, a Tinder-like website that placed the decision-making power on clients: customers scanned a sea of Panda profiles to find their ideal candidate. However, this proved quite inefficient, since clients had little time nor familiarity evaluating interpreters.

Matt’s Panda Profile mock for Product 2.0

So came the idea for Product 2.0, a Uber-like mobile experience embedded within the #1 Chinese social networking app, WeChat. Product 2.0 simplifies decision-making for customers by letting matchmakers hand pick ideal candidates for clients instead. Once a Panda is selected, WeChat’s group chat allows matchmakers to facilitate and monitor chatrooms between Panda and client. Product 2.0 is an intermediate version used to test the Uber model. However, the ultimate goal was 3.0 — a full revamp of the original website.

The Pitch

I was brought on board at stage 2.0, working remotely as a digital nomad in Kyoto, Japan. The team had just scrapped their original website, and SeekPanda 2.0 was in its early stages of development. Through WeChat, clients can view customized Panda profiles recommended to them, and Pandas can directly apply for detailed job postings. Matt and Phil desperately needed a designer, and based on the mock above I pitched them what a Panda profile could look like.

My first wireframes: Panda Profile

My initial vision was fairly simple, a Panda profile contained
1. All the credentials
2. A separate page clicked into reviews
3. Two “Call to Action” buttons on the bottom of the page

Once they review the profile, clients can choose to “Add [Panda] to Contacts”, in which a Panda would initiate conversation, or directly “Message” the Panda.

Designing for WeChat

Call to Action “Button” Alternative

I soon realized, however, that WeChat had far more constraints than I had imagined. For instance, WeChat does not permit “Call to Action” buttons on third-party pages, so I had to deconstruct the meaning of a button, in order to redesign an equivalent that serves the same purpose.

In addition, it was difficult to design for a platform without knowing all the design limitations. So I switched to Xiumi, an online design program specifically optimized for WeChat. Xiumi came with pre-installed CSS assets, so there was no coding involved for implementation, simply copy and paste.

Designing the Job Profile with Xiumi — Embracing Design with Constraints

Process

Aside from the initial mock, I wasn’t given much guidance on how to build the product, but the team was very responsive to any questions I had. My role was to build a “Panda profile” to recommend to clients and a “Job Profile” to advertise new gigs to Pandas.

Below are the steps I went through to create these two pages:
1. Conduct research to understand first, design constraints within WeChat and second, information needed to ensure a simple, informative experience on both the customer and Panda side
2. Wireframe 3 different directions; prototype on InVision

Wireframe for Panda Profile

3. Rapidly iterate multiple versions in Sketch until the team agrees on overall layout, style and necessary elements
4. Add color and lock down pixel-perfect mock-up prototype on InVision
5. Meetings, meetings, meetings in between every stage for feedback, discussions and suggestions
6. Provide documentation handover to developer to match design with code, and help QA before final shipment

Handoff of Final Profile

In the end, we coded Panda profiles the standard way, but switched to Xiumi to create a customized template for Job Profiles due to its ever-changing nature.

Success Metrics

Product 2.0 proved to be a great experiment, and we arrived at three important conclusions:

1. Pandas were very responsive to job profiles posted on Moments, the WeChat newsfeed, and equally receptive to re-post them as referrals.

2. However, most clients did not have a WeChat account, and were little inclined to open one. So matchmakers still contacted clients via email.

3. Most clients did not have a WeChat account, and were little inclined to open one. So matchmakers still contacted clients via email.

As a result, web product 2.5, a client facing Typeform page was generated to restrict client communication to web and email.

As a result, the original website was replaced by SeekPanda.com 2.5, a client-facing Typeform survey which based primary client communication via web and email.

Current TypeForm Website

Key Challenges

Initially, our team employed Quip, Slack, WeChat, and Skype as the channels of communication. As a remote designer, however, it was important for me to establish a streamlined communication for my design that worked well for the team. So to the mix I brought in Trello for feedback and versioning, and InVision for prototyping and presentation to keep everyone in the loop.

Initially, our team employed Quip, Slack, WeChat, and Skype as the channels of communication. As a remote designer, however, it was important for me to establish a streamlined communication for my design that worked well for the team. So to the mix I brought in Trello for feedback and versioning, and InVision for prototyping and presentation to keep everyone in the loop. Trello was particular useful for collecting feedback. People often had different opinions, and it was my job to reason and decide the best course of action.

My job also involved wearing multiple hats. To carry out the co-founders’ abstract vision, I had to fully understand the company’s business objectives and operations to transform an idea into life. I was the unofficial content designer and copywriter, and creative director. I decided the look and feel of the product, as well as what elements, texts, and web pages were needed. At the time we did not have a product manager, and I was in charge of both design and specs. And I was the UX researcher, conducting various user research with Emily, our Head of Operations (a former Panda now in charge of client matchmaking) to better understand the needs of Pandas and Customers.

Start-up life is about taking up different roles. As a designer you’re not only creating mocks, but you share the division of labor within a small team. You determine the scope and responsibilities of your work as you know your job the best. You become your own boss, and you are rewarded with full ownership of the product. From conception to shipment, project 2.0 took a little under two months to complete. Satisfied with my work, Matt and Phil invited me to Beijing to continue the next stage — 3.0.

To Be Continued…Designing for Pandas-Part II