Klatch Product Design Internship

Design a new portal for facilitators to manage 1:1 coaching sessions

Role: Product Designer

Time: Jun. – Aug. 2022

Tools: Figma, Photoshop, Angle Mockup

In summer 2022

I joined a start-up E-learning company called Klatch. I had an amazing experience working remotely on various side projects along with this project and applied my skills to more than just UX design.

I worked as a product design intern directly with the CEO and developers where I had the chance to design a new portal for the facilitators to manage their 1:1 coaching sessions.

Context

Klatch is a platform designed to help facilitators hold live, interactive workshops with minimum effort. With the growing market, the team saw a need of adding new product offerings, the 1:1 coaching session. My task was to design new interfaces for facilitators to manage their appointments independently from the group-based classes. Within this portal, facilitators are able to post feeds, set up live sessions, track upcoming schedules, and upload class materials either in a summarized view or an individual view. I worked collectively to identify platform capability through product scoping and competitive analysis, iterated and designed wireframes, and delivered hi-fi prototypes that are ready for deployment in a future sprint.

Overview 👀

For this project, I had to actively seek feedback from my stakeholders and keep them informed of my progress throughout this project. Jordan Pakrosins, the developer, was consulted for his engineering opinions to determine any limitations and to provide solutions for any obstacles. Additionally, the product manager Dan Solt, and CEO Jeremy Doochin provided me with timely feedback on the project directions. The weekly Product Townhall meeting allowed me to present my iterated design and get feedback from facilitators.

Stakeholders 👨‍💻

Define the Problem

Due to the limitation of the current software system we are using, I could not customize every element for the design. We also want to make sure that when facilitators have a short learning curve when they are introduced to these new features. How might we design a new system that adapts to the existing platform seamlessly and minimizes the customized coding?

Research

My first step was to understand the constraints of the software system and find available plugins and components I can leverage. I reached out to the developer and did product scoping together. To find out how the 1:1 meeting schedule system works, I did a competitive analysis on mentoring platforms such as ADPList and Growth Mentor.

Findings

  1. Most platforms have a one-way scheduling system where learners choose the available time that mentors proposed. The appointment is considered successful by default.

  2. A summary page will be helpful for facilitators to track upcoming appointments.

  3. Having a search bar along with filters will significantly reduce process time and more portable when having more learners.

Ideation & Iteration

With these insights in mind, I move on to rapid wireframing and prototyping. To ensure facilitators have a shorter learning curve ( flexibility and efficiency of use 😊 ), I referred back to the existing design and align the most frequent-used buttons.

Scheduling System

Round 1

By implementing a calendar, facilitators can refer to a specific date and look up appointment status. A red circle indicates time slots are filled and a green circle indicates open schedules.

Round 2

Due to the limitations of the software system and in the hope of reducing customizing coding workload, we decide to use available plugins for scheduling and focus the design on the panel’s information organization.

Global vs Individual Mode

Round 1

Stakeholders expressed the need of having a “global view” where all the upcoming appointments and information of learners lie and an “individual view” where facilitators can click into a specific learner and perform individual action.

Round 2

After reviewing the design with stakeholders, they express the need of having all appointment sessions regardless of the session topic under the global view as it is a master information panel.

Design Impact

At the end of my internship, my design was successfully approved and ready to be implemented.

The design reduced the development time by 40%. It is valuable, especially for a start-up that has a limited number of people working on the project.

The design continues to use the previous style and follows the brand identity, which injects a personality into the product. In addition, the consistent design makes it digestible for users. During the usability testing session, my coworker who has never seen my design but had used other products on our platform can perform the task without much hesitation.

Next Steps

  1. Improve responsiveness on mobile and tablet.

  2. Optimize the product page that showcases those 1:1 sessions.

  3. Implement the booking system that associates with those 1:1 sessions on the learner’s end.

My Takeaways

Working at a quick pace could be stressful sometimes, especially in a start-up where anything could be taken over the next second. However, this experience turned out to be a good opportunity to train me and come prepared anytime. Working in a real business environment with a budget, technology, and execution limitations means some design decisions could go against my will. However, I was able to embrace the challenges and communicate with my team actively for advice on alternatives. By considering all the beneficial elements I might incorporate into one webpage, this project gave me the opportunity to execute attention to detail, critical thinking, and human-centered design thinking.