upcoach: Transforming the UX/UI of the B2B Coaching Platform by Ana Vukcevic Ruzic

upcoach: Transforming the UX/UI of the B2B Coaching Platform

Ana Vukcevic Ruzic

UX Designer

Product Designer

UI Designer

Adobe Illustrator

Adobe Photoshop

Figma

Company: upcoach

Title: Sole Product Designer

Timeline: 2 years, 1 month (August 2022 - September 2024)

Hours: Full-time

Company size: Small team, up to 10 people

Team size: Product Designer (me) + Head of Product

Location: Remote (US, Turkey, Serbia, Albania)

About Platform: upcoach is a coaching platform that enables professional coaches to build and manage their programs with Courses, Habits, Chats, Meetings, Tasks, and sharing Smart Docs and Files. It helps coaches deliver the best possible experience to their clients and scale their impact. Coaches can quickly create programs, track client progress, encourage engagement, schedule meetings, and communicate effortlessly - all using a no-code platform.

Platform Type: B2B

Target Audience: Professional Coaches (1-1, Group and Cohort coaching) / Mainly US Market

My Role

After I led the rebranding effort and redefined the visual language in collaboration with the Marketing team, I transitioned my focus entirely to Product Design, collaborating closely with the Head of Product and a development team of five.

Managed Full Development Process

Preparation: Collaborated with the Head of Product to brainstorm, update specifications, and propose UX changes.

Design Execution: Created dev-ready designs, ensuring visual consistency and adherence to the design system. Developed prototypes to visualize features, prevent UX issues, and provide developers with a clear understanding of behavior and flow.

Handoff to Dev: Finalized specifications with updated details and designs. Communicated with developers to ensure a smooth handoff and provided ongoing support throughout the development process.

QA Testing: Conducted QA checks using basic HTML/CSS knowledge, reported issues, and ensured they were resolved before deployment.

After-Deployment Support: Designed graphics for community platform updates and co-hosted monthly Open Product Calls to present and discuss new features with users.

Figma Design System Creator

Built the upcoach Figma Design System from the ground up, including design processes, procedures, and component libraries:

Established the upcoach Figma Component Library, keeping it updated and aligned with the upcoach brand to speed up the design process.

Integrated the TailWind UI Library & Design System to ensure front-end consistency with developer themes.

Incorporated FontAwesome icons to replace misused TailWind icons, maintaining design uniformity.

Created a Figma Design File Template to ensure all projects followed a consistent file structure and design approach.

Maintained the upcoach Brand Book & Design System as a global library to ensure brand consistency across all projects.

Objectives

Improve UX/UI Design: Enhance platform UX and UI for better user-friendliness, reduce churn, and maintain consistency across the design system.

Build Design Library: Develop and manage a comprehensive Figma library as a single source of truth, streamlining design processes with templates and procedures.

Align with Branding: Ensure that design elements consistently align with the brand to strengthen overall perception, build trust, and attract users.

Support Team Collaboration: Act as the key link between the Head of Product and Development team by updating specifications, executing designs, and performing QA checks to ensure smooth development and launch.

My Impact

New Structure / Major Program Layout Change

I’m extremely proud to have contributed with an idea to improve the overall UX and program structure, as this was the first major issue I highlighted when I joined the team:

Previous Layout

The original program structure was poorly organized, with elements scattered across the interface, disrupting the visual hierarchy and compressing the program blocks from all sides - reducing space for the content:

New Layout Improvements

The new program design implements four major enhancements to improve the user experience:

Program Switcher: Users can now view a list of all the programs they belong to in the left sidebar and seamlessly switch between them with a single click. Coaches also can create new programs without needing to access the Admin Panel.

Program Sidebar: This section provides information about the selected program, including its title and navigation options, such as a Forum (if available). It also grants access to program coaches, member lists, a search function, as well as program management and settings.

Program Header: Remains visible as a global sticky element while scrolling. It includes updated UI icons with larger notification indicators and offers one-click access to the Knowledge Base.

Program Content: The container width has been expanded to allow more space for blocks and their content, ensuring they are given the proper prominence required by the program.

Upgrade / Side Navigation Improvement

With further analysis of side navigation, we introduced small enhancements:

Updates to the Program Sidebar User Interface:

Organization Logo: Now placed at the top of the Sidebar, preparing for the upcoming Sidebar View options feature.

Admin Panel Icon: Moved from the sidebar to the top header with a clear label for better visibility.

Search Bar: Relocated to the top header as a global element for easier access.

Program Management: Program settings are now hidden behind a burger menu for a cleaner interface.

Program Navigation: Positioned at the top of the Sidebar to increase visibility and priority.

Participants Section: Moved to the bottom of the Sidebar. The number of participants has been adjusted, and coaches' profile pictures have been enlarged to highlight their importance to the program.

Upgrade / Added Side Navigation View Options

As part of the Program Sidebar further customization, we've introduced four view options to cater to different coaching needs:

Show All (Default): Displays both the Program Switcher and Sidebar sections.

Show Sidebar Only: Ideal for coaches with few programs or those who don’t frequently switch between them.

Show Switcher Only: Saves space by hiding the Sidebar.

Hide All: Expands the view to full width, perfect for presentations or focused work.

New Feature / Introducing Homepage

The Homepage enhances the experience for both coaches and clients by offering personalized content and streamlined access. Previously, users faced obstacles before joining a program, such as being invited to an organization by a coach but not assigned to a program, resulting in a 404 error. There was also no central platform for managing tasks, resources, and community engagement.

What We Accomplished:

Improved UX: Eliminates 404 error pages by making the Homepage the default landing page post-registration and post-login, providing immediate access to platform features and resources.

Centralized Dashboard: Offers a single point of access to tasks, programs, courses, and community posts from all programs the user is part of.

Supports Branding: The hero section background automatically reflects the organization’s branding colors, ensuring visual consistency and reinforcing brand identity.

Customized Content: Dynamically adjusts to show relevant content, including recent activities and upcoming events.

Time-Saving Access: Allows users to quickly resume from recently viewed items.

Upgrade / Global Search

In the old layout, the lack of a visible program switcher meant the header’s dropdown list functioned as a live search, limited to searching only the programs by their name. This was insufficient for a platform of this scale, necessitating a more advanced solution.

What Global Search Brought:

Expanded Search: Now includes not only programs but also sub-programs, courses, lessons, modules, and forum posts.

Real-Time Results: The search modal acts as a live search, instantly sorting programs and sub-programs by entered keywords.

Advanced search results for courses and forum posts are displayed on a dedicated search results page, accessible by pressing "Enter."

Keyboard shortcuts were introduced for quicker navigation.

UI Impact: This feature required creating new avatars with representative icons for different result types. Each type was assigned a specific color for easier recognition:

New Structure / Splitting the Program into Pages

Designed to simplify how coaches structure their programs. The old structure was a single-page program containing blocks - which often led to too long programs with many scrolls, without any possibility of segmentation.

Why Pages?

Coaches can now group content blocks and create dedicated pages within a program, each focused on specific categories like training, events, or assignments.

This not only streamlines program organization but also enhances the user experience by offering a more visually organized interface.

Coaches gain greater flexibility in structuring and presenting content, making it easier to manage and customize their programs.

Program with Pages

New Features / Program Design Blocks

We aimed to enhance Programs by adding a missing block that would help coaches better communicate their values. These blocks were designed without the traditional background and padding, allowing them to stand out more effectively.

Coach Spotlight Block

Purpose: To highlight the expertise and accomplishments of the coaching team. This block is designed for easy integration, allowing the coach to add multiple Coach Spotlight Blocks to the program effortlessly.

Customizable: Each block includes an optional heading, with "Coached by" as the default, and a concise 300-character section to describe coaches' backgrounds. The design is streamlined, with no color pickers, focusing on content clarity.

Benefits: This feature enhances visibility and credibility for coaches, helps clients make informed choices, and fosters trust and engagement.

Testimonials Block

Purpose: The new Testimonial Block allows coaches to seamlessly integrate client testimonials into their programs, helping to share feedback and experiences.

Customizable: It's fully customizable, with options to add, modify, delete, and reorder testimonials. Coaches can also include images and clickable links.

Benefits: This feature enhances client engagement by providing personal insights, aiding potential clients in making informed decisions, and fostering a sense of community.

Boxes Block

Purpose: The "Boxes Block" feature is designed to enhance coaching experiences by helping coaches better express their values and program essentials.

Customizable: This feature allows coaches to add up to 9 customizable boxes in a carousel format, making it easy to highlight program principles, key benefits, and core values. Each box can include a backlink for seamless exploration.

Benefits: This update enables more effective communication of program values and provides a visually appealing, interactive format for clients to explore and engage with the program more personally.

Hero Image & Video Blocks

Purpose: We are introducing the Hero Image & Video Blocks to enhance the visual impact of the program.

Customizable: This feature allows users to emphasize image or video blocks, with the option to activate or keep them within the block frame. Programs can include an unlimited number of hero elements, which will retain the functionality of back-links.

Benefits: This update improves the overall UI, making the program more visually appealing and allowing coaches to better showcase their content.

Upgrade / Events

I worked on several improvements to the Event feature. Some of these include:

Updated UI for the Event Block Cards:

Event's Agenda Page UX Improvements:

New Feature / Meeting Notes Page: Added to the Event feature to enhance user communication. Attaching the agenda is now simplified with a blueprint page that provides templates:

Upgrade / Courses

Block Card UI has been refreshed for a cleaner look:

Preview Modal was introduced to enhance user experience:

Upgrade / SmartDocs

Coach Notes are Introduced to enhance communication between coaches and clients:

New Feature / Weekly Task View

The Weekly Task View presents clients' tasks in a Kanban board format, simplifying tracking and task management for a clearer overview of progress:

New Feature / Last Seen Reports

The Last Seen Reports feature offers insights into clients' last activity, enabling coaches to track engagement and follow up effectively. Clients are displayed in columns, making activity tracking more intuitive. Coaches can send engagement emails or export the full report data for further analysis:

New Feature / User Profile Slide-Over

The new User Profile Slide-Over feature enables quicker client and coach previews, providing access to the CRM for streamlined interaction and management:

New Features / Onboarding Process

The new Onboarding Process feature includes a "Get Started" modal designed to assist users in beginning their journey more efficiently:

Created tips and tricks animations as a loading screen to assist coaches in learning the basics more easily:

Upgrade / UI Enhancements of the CRM Admin Panel Pages

Transitioning to a new UI to enhance the overall appearance:

Admin Panel Dashboard

Client Profile Page

Notifications & Digests Page

New - Events & Agenda Templates Page

New Feature / Introducing Offers, Coupons and Stripe Integration

The Stripe Integration - a new feature designed to help coaches monetize their business within upcoach. It includes options for managing offers, sales, and coupons.

Reflection

I am grateful to have been part of this journey and to have contributed to the evolution of our product. Throughout the process, the UX was developed alongside the UI, which was necessary to meet our goals and constraints.

However, in hindsight, having dedicated time and resources specifically focused on a UI makeover could have allowed us to refine and enhance the visual aspects of the design more thoroughly. While the direction of decisions was guided by leadership and business logic, a focused UI phase might have provided the opportunity to elevate the overall user experience further.

Despite these challenges, I am thankful for the opportunity to have worked alongside such a talented team and look forward to seeing how upcoach will continue to evolve and improve.

Like this project

Posted Sep 12, 2024

The product design transformation of the professional training and coaching B2B platform, from UX and UI improvements to implementing new features.

Likes

Views

Clients

Upcoach