Plexchat API Portal

Plexchat App

GotIt! Expert Portal

GotIt! App

GOMEAL

Other Media

Plexchat API Portal

Community As A Service Made Easy

Background

Plexchat API portal is a tool that provides community API as a service. As Plexchat app builds the foundation and proved how to build a successful meaning community for the mobile gamers, the portal extends the possibility of integrating highly-moderated, fully customizable community chat modules for any mobile game that wants to include a communication component.

MVP

The MVP sprint focused on demoing a simple solution for game developers to try the service and the ability to quickly integrate a chat infrastructure into their own mobile apps. The product experience can be divided into 3 parts: quick registration, on-boarding guide, detailed configuration.

user journey mapping

initial wireframe

New User Module Creation

New User Landing On Dashboard

Chat Module Profile Setting

Chat Module Theme Configuration

Public Beta

As we moved forward with the product after MVP proved the concept, the goal of the public beta is to provide a simple yet comprehensive platform for game publishers and developers to integrate chat modules with their native mobile apps.

Registration

In order to accommodate a wider range of users, we changed the primary registration from Google or Github-only to also include standard email registration.Another change is to introduce "organization" and member invitation with different permission access to the dashboard. During further user research, we discovered a common use case of game publishers working with game studios to develop games. The organization structure is required to ensure security and flexibility for the production process of larger organizations.

Navigation & Configuration

The navigation changed in order to provide a more clear breakdown of items an administrator can modify, and more module options for more flexibility of module integration for different size of communities. It also includes a direct option for administrator to moderate in-app chat as the module integration is live.

Account & Billing

The users are charged based on a pre-defined pricing model. After working extensively with our analyst, we settled down a subscription-based MAU pricing modal with a free plan. By integrating with Stripe as our backbone payment solution, the admin account is responsible for subscription payment, with the flexibility to adjust payment plan between different tiers(higher tier allows higher MAU).Meanwhile, an admin account is also responsible to manage "organization" member permissions. Initially for public beta, we planned to identify admin (full dashboard access) and member (chat module setting-only access) account types, and we planned to roll out community moderator(module community moderation-only access) in the future.

Design System

Upon the finish of Plexchat UI style guide, I quickly switched to work on the admin portal product. After discussing the MVP scope with the team, with focus on making new user on-boarding experience very easy, I quickly came up with the design. Because of the strong foundation from the pre-determined UI guide, I was able to also create many standardized UI patterns for the web portal to re-use in the future.

UI kit

Pulse

Pulse is a 2-day internal hackathon project at Plexchat. I partnered with our analyst to design an internal panel to monitor feature performance and other key metrics from community engagement. We simply created a prototype to import some data from tableau into a HTML page in order to display real-time updates from the live app.

Plexchat App

Community For Mobile Gamers

Background

Plexchat app is a cross-platform communication application for large communities who play mobile games. The mission is to help strangers online start meaning conversations with ease. With the goal in mind, the app focuses on moderation and unique game-specific embedded tools that cater the needs of community members to bond and grow.

Work

I have the opportunity to work with engineering and community team on various features and initiatives, also to advocate for better design practice and systematic design approach. Some of the projects I lead are such as,

Initial Launch

When I joined, I immediately worked with the contract agency to establish a solid brand guide and basic UI kit for further design and development. The mobile app released at the end of 2016 along with a brand new website I designed.

brand guideline logo use

Plexchat.com V1

Voice Call

As one of the parity features for Plexchat compared to other chat applications in the market, it has its own challenges. Plexchat has a much more robust moderation system, in order to manage large communities with thousands of members at the same time, it requires easy moderation during a voice call on top of an existing chatroom.

voice call initiation

voice call prototype

Event Room

The feature is a room type to support the on-going community-oriented efforts inside of the app, which including several weekly events hosted by Plexchat community managers with external youtube/twitch streamers. As the community managers told members from the app to view stream on youtube/twitch, it got really difficult to extend the conversation back into the app, which causes significant frictions for in-app engagement.

Problem:

in-app events engagement lost once members went to 3rd-party streaming platform

events got really hard to manage as they grows in scale (were only ran by company staff/contracted staff)

event hosts (usually community managers/youtube or twitch streamers) couldn't effectively run prized events (which was the very common event types that attracts members) due to the tedious existing process by messaging in the app

members had been complaining of missing events due to not able to know/find events in advance

members didn't know where the event was held at

Why was it a problem:Streaming events via youtube/twitch influencers were the main strategy for user growth and engagement, and the existing/old in-app chat didn't support the specific use case of the event operations, from event creation, organization, control signups, to raffle prize, announce prize winner, etc. It created causes significant frictions for in-app engagement, and made it hard for the major traffic driver to scale.

Solutions:Based on the existing navigation, create a new type of event chatroom for admins to manage and surface relevant information to members.

Research:I had long conversations with several of our in-house community managers and youtube/twitch influencers to understand how they were using our app to run events, where were the main pain points, what were their needs and wants. I also interviewed our app users who participated in events to get the context of the use of app for event participation, and what could assist them better to have better experience with those events in the app.

Design ideas:

change how members view event information as the events sign up open, start, progress, and finish

admin moderats participants

admin controls the event progress

admin can edit information on-the-go

admin can post signups only notification

Low-fidelity mocks:

event room creation

manage event flow

manage participants

High-fidelity mocks:

admin event room creation

admin sets signup restrictions

admin manages events flow

admin manages event raffle

participants view

I kept working on event calendar design, for the future scope of how to make it easy for members of any community to discover and participant in events.

event calendar

Design Overhaul

After collecting 6 months of user feedback, we felt the product direction needed to update, especially on how to effectively facilitate conversations for gamers, as well as expanding how they explore more topics they are interested in.

Usability Testing

I also lead the usability testing for the re-design launch - I worked with CEO to identify the goals for the user testing, proposed and conducted the entire usability test with existing users. During the process, some major issues were surfaced, such as user education and navigation, and we were able to work on design solutions to significantly improve user on-boarding.

user testing script snippet from Dropbox Paper

Attachment

The attachment is one of the crucial components around the re-design - by allowing users to post multiple multi-media content at once. The flexibility is really important as it suits the need of different users. The communities in Plexchat operate like communities inside of a mobile game - there are leaders, moderators and regular members. It also reflects the mobile gaming ecosystem of streamers, audience and e-sports.

add attachments to a message

message UI options

attachement prototype

Embed Tools

One major differentiator Plexchat has is the embed - like widgets inside of the chat app to allow user post rich content, instead of a boring URL, so we can capture the audience for the specific game, and make the app more sticky to use.

user education on embeds

deck assist - gamers ask for a better deck recommendation and received suggestions

Design Pattern Library & Style Guide

After the intense release schedule of mobile app re-design, embed tools, and on-going iterations and other improvement, the design came to a point of examining the design consistency. We realized that we need to look into establishing a concrete style guide and UI kit again. It was really crucial as we expand quickly into multiple different product offering across different platforms, plus expressing a centralized tone and voice for all of our communication channels.

After discussing with stakeholders, I examined the existing design, and complied the design library as the base to standardize UI and design elements, and expand it to the entire company. It not only helped use to discover current design inconsistency, it also help use to make sure further design work evolve in a much more systematic way.

pattern library & style guide snippet

GotIt! expert portal

workspace design for study experts

Background

GotIt! Expert portal is an all-in-one web-based product for tutors of high-school math and sciences subjects to find work. They use this product to sign up, pratice problems, bid problems, and guide students through those problems in 1 on 1 sessions. They also use the portal to keep track of past earnings, problem sessions, past performances, and report issues to customer support.
The workspace is part of the portal where a tutor connects with a student on one homework problem in a timed chat session.

heuristic evalution

study experts are required to finish all the steps before sending to the student which is very time consuming

problem signals

continuous low retention rate from the mobile app for students

chat sample review shows experts do not engage students

expert working session review shows long waiting time for students

expert performance data exhibits low ratings for experts

problems to solve

experts need to send real content faster

experts can but won’t engage much with students

students don’t where the expert is at during the problem solving

Design Challenge

Design a workspace to allow experts to send smaller pieces of content more frequently. It should enable experts to provide partial step-by-step explanations in order to decrease time intervals between expert and student communication and increase the perception of “speed”.

Expected results

decrease in time between expert communications to student, specifically gap between concept and explanation

increase in retention for certain student user group

USER STORY

As an expert, i want to be able to respond to students faster, so that students know I’m working on their problem.

ideas

add a “slicer” to the tinymce editor to enable expert sending slices of content (tinymce editor is a tool that the product uses to display math & science expressions correctly)

integrate math & science editors into the workspace instead of using a popup

enable edit-ability for sent chat messages

polish chat display to reduce experts scrolling back and forth

design reference:

Slack

slicer interaction whiteboard & discussion with PM

proposed workspace flow

proposed step-by-step explanation workspace

Outcome

The design goal was achieved, reducing the first response time with real content by 90 seconds for adopters

Other Observations

experts take longer to finish the whole response which leads to poor student satisfaction

majority of the experts don’t send smaller pieces of content

problem definition

The nature of more interaction in chat leads to a longer session time. The improved workspace provides experts the flexibility they need, but it doesn’t provide enough incentive for experts to engage more nor send content faster.

New Design Challenge

Design a structured workspace to incentivize experts to engage students on followup questions when working on a homework problem

Desired results

improve expert quality metrics

increase student satisfaction

research

reference: Slack. banking customer service. traditional call center.

user journey mapping discovery: tool efficiency and time pressure against the structured answer format, especially for step by step explanation

ideas

a single chat/working area

a fixed location for the problem photo

incentive of the math & science editing tools availability to push experts through different stages of answering

combine explanation and final answer

combined workspace

combined workspace with 1 chat input box

combined workspace with 2 chat input boxes

hypothesis

One single chat box would force a workaround and add mental load for users to decide how they want to respond

usability testing

designed an internal test using google hangout and existing workspace to imitate the proposed workspace options

test insights

study experts with different problem solving styles feel comfortable use one input style over the other

study experts either intentionally write different content separately into expression box & normal english chat box, or just input randomly

study experts either ignore the incoming messages from time to time, or try to respond as soon as possible

testers all agreed that the more interaction, the longer the session takes, and engagement might affect solution accuracy

study experts either prefer the 1 input box without shifting around, or prefer strictly use 2 boxes for different purposes

product direction

Conduct more usability testing to gather more data and establish a baseline for expert performance metrics.

GotIt! iOS app

mobile chat with video for education

Background

GotIt! is a marketplace service connecting students with homework problems to chat with study experts within a timed session. The chat experience is the core service for the student side of the marketplace.

Design Process

design goal

Design a product experience for students during a chat session that allows the study expert to insert a video to supplement the concept that the student is trying to learn.

problem to solve

How can videos facilitate the student learning in the short and long term.

design research

A video is usually a multi-media material for students to learn but not the primary material. From my own experience studying from videos without external instruction, I feel the single-sided video-based learning environments can be dull for students. In this case, I think the capability of asking questions in real time with a study expert while watching a video makes learning easier. However, integrating chat with educational videos while allowing a student to learn is a design challenge. After looking around I found some following design inspirations.

Luka, Youtube, SoundCloud (left to right)

The SoundCloud soundtrack commenting timeline really intrigued me, and I start to think about how video could utilize such functionality in an instant interactive education environment.

sketches

ideas

students control play, pause and stop primarily, study experts can observe and control as well

a video timeline auto-embeds chat that can be reviewed later

uninterrupted but attention-calling message notification while the video is playing

students can bookmark and share for further learning and referencing

video auto-pause for chat

To compare alternatives, I came up with 3 options.

option 1: basic chat with video attachment

option 2: chat during video playing

option3: video timeline with embedded chat content to response directly or retrieve later

From a MVP perspective, option 2 could be a more feasible starting point for the business. The bookmarking and sharing feature is useful but also more “nice-to-have” for validation of an engaging video chat experience.

metrics to measure

Focus on engagement, retention & user happiness.

frequency of chat messages during video playing

frequency of reviewing/bookmarking/shared video per user

average length of chat with videos

average chat rating with videos from students per session

GOMEAL

consumer product branding design

campaigns

Background

Branding design for a product and its parent company. The product is an all-nature healthy on-the-go protein drink and meal replacement. The parent company is a all-nature food and beverage product manufacturer.