Build communities with ease
Plexchat API portal was a tool that provided API for building online communities with build-in moderation as a service. As the Plexchat app was built and successfully housed online communities that prioritized meaningful conversations over toxicity for the mobile gamers, the web API tool extended the possibility of integrating highly-moderated, fully customizable community chat modules for game developers and studios to build any mobile online community, with the ease of one line of code.
As one of the two designers and early employees who largely shaped the Plexchat mobile app, I was tasked to design for this web-based product MVP alone. Later, another designer joined me to support the public beta where different parts of the beta product were assigned to either of us.
MVP chat module theme configuration
Since hosting and supporting operations of the mobile online gamer communities for some time from the beginning of the Plexchat app, we noticed the common problem of lacking infrastructure for game developers and studios faced to support their own communities. Building in-game chat functions with specific moderation usually were the last thought and unattractive for game developers and studios alike who wanted to prioritize building awesome game titles. External API services existed for developers to build in-app chat functions, but lacked moderation, customization, as well as operational knowledge to support gamers and prevent the common toxic behaviors in such communities. To take on this opportunity to fill the gap from leveraging the existing infrastructure built from Plexchat mobile app, the MVP focused on demonstrating the API functions for game developers to try the service and play around with its capability really quickly, without going over length complicated documentation.
I interviewed multiple game developers and community operators alike, in order to articulate the critical steps for the complete user journey, from the first landing on the product website, to quickly acquiring the API to be integrated into their own product development.
user journey mapping
To follow this customer journey, the product experience was divided into 3 parts: simple registration as an admin, quick onboarding, and detailed configuration.
initial wireframe
To make the onboarding a lighting fast experience, we decided on a 3-step process to the code snippet of a pre-configured module.
MVP flow
I worked closely with the product lead and a small engineering team to bring the MVP to a live product in less than 2 months while receiving continuous feedback from selected partners.
New User Module Creation
New User Landing On Dashboard
Chat Module Profile Setting
After receiving positive feedbacks from our selected private alpha users on the proof of concept we moved ahead with conceptualizing a public beta 2.0. It was aimed to provide a SaaS for game publishers and developers teams to integrate chat modules with their native mobile apps. I primarily focused on growth-related features such as initial team invitation, navigation, as well as team profiles, and billing.
From our early research on the production process and organization structure, outsourcing part of the development was extremely common for the industry. To satisfy the growing registration demand, we introduced standard email registration with more guided onboarding with team setup, on top of MVP simple Google OAuth and Github login. Organizations with different permissions for their team members was also part of the scope early on to ensure security and flexibility for our targeted org structures.
The navigation changed as well in response to the introduction of the organization concept and team permission. The goal was to provide a more clear breakdown of items an administrator role can modify, and more module options for different sizes of communities and use cases, such as 1:1 chat, small group chat, and the default community chat. Moderation and prevention of toxic behavior were the part of core differentiating factors Plexchat web tools provided. To solve a known common pain point from the moderator roles lacking easy access to moderate mobile app communities, we also introduced the option for administrator roles to moderate in-app chat directly in the web portal.
Upon finishing creating the UI library and style guide for Plexchat mobile app, I quickly switched to work on the admin portal product. Since there was significant overlapping of certain UI components from the mobile app and the web API tool, even with tremendous pressure to deliver, we allocated time to invest in setting up a basic design system to support the web development. From there, we were able to significantly speed up the development efficiency and quality, while iterating quickly. The whole development team was empowered to quickly prototype new product ideas and contribute by leveraging this design system.
Design tokens
UI kit
Our product public beta attracted multiple entertainment publishing and studio powerhouse customers. Ultimately, our company and the product were acquired by Warner Bros Games to help this entertainment giant to level up its community-building capabilities. I was fortunate to work on this pivotal product for the company while having fun doing so. My belief in the human-centered methods in product and design was re-affirmed, where we succeed as a team focusing on a novel experience that exceeded users’ previous expectations. A carefully-selected small user group of early adopters was all we needed to kickstart an early product concept without going in blind. Opting for continuous learning worked better than perfection, especially for an early-stage product. The empowered team need to have a deep understanding of the domain and customer pain points.
Community For Mobile Gamers
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.
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,
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
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
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.
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
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.
The product decided to emphasize on putting conversations front and center with easy navigation supporting rich-media embedded widgets to surface user information, and enabling users to post structured content to communicate.
mobile app information architecture
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
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
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
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
workspace design for study experts
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.
original workflow
The workspace requires study experts to send content as chat messages following the teaching format - concept, step-by-step explanation, final answer and optional followup discussion, while engaging with students. Study experts should deliver content fast and accurately.
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”.
As an expert, i want to be able to respond to students faster, so that students know I’m working on their problem.
Slack
slicer interaction whiteboard & discussion with PM
proposed workspace flow
proposed step-by-step explanation workspace
The design goal was achieved, reducing the first response time with real content by 90 seconds for adopters
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.
Design a structured workspace to incentivize experts to engage students on followup questions when working on a homework problem
combined workspace
combined workspace with 1 chat input box
combined workspace with 2 chat input boxes
proposed chat options showing 1 hybrid input box or 2 input boxes
designed an internal test using google hangout and existing workspace to imitate the proposed workspace options
Conduct more usability testing to gather more data and establish a baseline for expert performance metrics.
mobile chat with video for education
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 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.
How can videos facilitate the student learning in the short and long term.
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
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.
consumer product branding design
campaigns
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.
logo version 1
logo final version
parent company logo
element collage
things I do on the side
watercolor paintings in Kyoto, Japan
morning bike ride to kirby cove
bike touring passing Morro Bay
architecture section modal
San Francisco Tour Guide
