Community As A Service Made Easy
Plexchat developer portal is the core product of Plexchat that provides community as a service. As Plexchat app built the foundation and proved how to build a successful meaningful community for the mobile gamers, the developer portal extends the possibility of integrating various highly-moderated, fully customizable community chat modules for any mobile game developer.
The developer portal product design focuses on helping developers quickly setup a chat module integration, customize their in-app chat experience, and share the community within Plexchat ecosystem if needed, which caters the specific needs of mobile game developers.
The beta allows a mobile game developer to quickly create a basic community chat module, with a GUI to configure essential UI elements, then integrated into their own mobile games.
user journey mapping
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.
Product open beta releases soon - stay tuned! design mock (pw: portal)
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
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.
event room creation
manage event flow
admin event room creation
admin sets signup restrictions
admin manages events flow
admin manages event raffle
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.
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
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 a web portal to connect a study expert with a student to help with homework problems. The workspace is where the study expert can chat with the student to guide them through the problem.
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.
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 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.
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
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