SECTION4

Member Center
Membership Platform

Section4's commitment to providing accessible and impactful education is exemplified by its low-cost, condensed online courses taught by esteemed business school professors and renowned experts. However, in response to student feedback seeking a deeper learning experience, the product team at Section4 set out to design and launch a membership platform that would offer more content, connection, and opportunities for learning.

This ambitious project involved building the platform from scratch, with the goal of elevating the overall student experience.

My Role

As the lead product designer, I was responsible for overseeing the design of the UI and UX for both the learning and membership platforms. This included conducting visual research, creating user flows, wireframes, prototypes, and high-fidelity mockups, and working closely with the Head of Product, Product Managers, and Engineers to plan and execute the future of the platform.

"The design should be flexible to accommodate unknown future content and members should be able to get to what they are looking for quickly and easily."

Edmundo Ortega
Head of Product — Section4

1. Discover

Background Research
User Interviews
Online Surveys
Competitive Analysis

2. Define

Feature Prioritization
Roadmapping

3. Develop

App Map
Information Architecture
User & Task Flows
User Journey Map
Wireframes
Prototypes (Low-fi)
Usability Testing

4. Deliver

UI Design
Visual Mock-ups
Prototypes (High-fi)
Dev Handoff

1. Discover

User Interviews

• Interviewed dozens of beta members
• Collected feedback and discussions with Community Managers
• Prioritized feedback and started building a roadmap

Findings

The members expressed a strong desire to apply their new knowledge immediately and demonstrated high engagement in live events. The member directory, a highly utilized feature, was deemed essential for preservation.

Online Surveys

• Looking to discover key pain points, wants,
 and needs
• Prioritize insights gathered
• Discuss findings with stakeholders

Findings

The members displayed excitement about the concept of a membership platform and sought high-value learning experiences. They expressed optimism but also caution towards change, emphasizing the importance of maintaining familiar features.

Competitive Analysis

• Looked at 10+ competitors in the edtech space
• Looked for inspiration from other content delivery and membership platforms

Findings

They noted that the Masterclass platform made instructors stand out, offered a positive onboarding experience, and had a visually pleasing video experience. In contrast, they found platforms like Udemy and Coursera to be overwhelming and too similar to one another while praising Netflix for its well-organized, content-focused approach, minimal text, and easy scrolling functionality.

Typeform was Section4's tool of choice for online data collection

A few of Section4 competitors

2. Define

Product Roadmap

The product roadmap was primarily managed by the Project Manager and Head of Product, but as a member of the UX team, I actively contributed and provided design feedback based on my knowledge of daily tasks and development constraints.

Findings

This helped to ensure that the product vision was aligned with user needs and the development team's capabilities, and that the product was delivered on time. My participation in the product roadmap process helped to ensure that the final product was user-centered, and that the design and development work were aligned with the overall strategy and goals of the product.

Feature Prioritization

Our Team used FigJam to organize our feature prioritization sessions. It helped the development team focus on creating the most valuable and useful experience for the user, rather than wasting time and resources on features that may not be as important.

The Challenge

Leadership, outside of the product team, tended to overrule our feature prioritization with their own agenda.

Solutions

1. We involved leadership stakeholders in the feature prioritization process from the beginning.
2. We invited them to participate in user research, customer interviews, and other forms of data gathering, so they could gain a deeper understanding of user needs and preferences, which helped to align their priorities with those of the users.
3. We established clear criteria and metrics for evaluating the importance and impact of different features. This helped to ensure that decisions were based on objective data, rather than subjective opinions, which was more difficult for leadership to argue with.

FigJam prioritization workshop

Asana Roadmap

3. Develop

Information Architecture

• Courses - A place for members to see upcoming courses, enrolled courses, and past courses. This also became a place to view on-demand content.
  
  
• Events - The user can view upcoming live and past events. They can also dive into an event detail to RSVP to attend, read about the event and host, and add it to their calendar.
  
  
• Members - Members can browse other members and search by name, job title, and company name. They can also view other members’ profiles and connect through LinkedIn.
  
  
• Insights - Deliver bite-sized, high-value learning moments through case study videos.

A super simple site map

New member free trial user/task flow

User & Task Flows

Created task and user flow diagrams to help figure out the most efficient path for a variety of different tasks.

User Journey Maps

I employed the use of comprehensive user journey maps to gain valuable insight into the user's experience throughout their interactions with the product. By mapping out the user's needs, goals, pain points, and emotions at each stage of the journey, I was able to provide the design team and stakeholders with a clear understanding of the user's perspective. This information was then utilized to pinpoint areas for improvement and to inform the design of solutions that effectively addressed the user's needs.

User journey of for new member activation

Wireframes

I created a significant number of wireframes to facilitate quick iteration and to clearly define features. This helped to ensure that the product vision was aligned with user needs and the development team's capabilities. The wireframes allowed for early testing and validation of the design solutions, and helped to identify potential issues and opportunities for improvement before development began. This approach helped to improve the overall quality of the product and reduce development time and costs by identifying and addressing problems early in the process.

Rapid Prototyping

I used rapid prototyping to quickly create and test ideas, improving product quality through early testing and design validation. I applied this method to almost every feature, reducing development time and costs by identifying and addressing problems early. It also increased design efficiency and allowed for quick iteration based on user feedback.

Course voting prototype

4. Design

Design System

I chose Material UI (MUI) as the backbone of our UI design system, as it paired well with React, our front-end library, allowing for a quick market launch. MUI and React provided a reliable, efficient and flexible framework for building user interfaces and allowed our team to focus on creating a great user experience while iterating quickly. MUI also gave our product a consistent and professional look and feel and ensured accessibility standards were met.

What I learned

While MUI can be a great choice for larger products, it might be too much for a small product.

One of the main reasons for this is that MUI comes with a significant amount of pre-built components and functionalities, which can be overkill for small products that require only a limited set of features. These pre-built components and functionalities can make the development process more complex, and require additional resources to implement and maintain.

High-fidelity Mockups

The look and feel took into account the Section4 visual brand while staying true to its own identity. The minimal style contributes to a feeling of simplicity with a clear UI hierarchy that doesn't get in the way of the content.

Results

The Section4 Member Center was a great success, as it received positive feedback from members and saw continued growth and improvement with each release.

In the end, we saw engagement rates upwards of 80%, renewal rates of 82% for Beta members, and we gained over 10K new members in 9 months.

User Validation

While numbers and growth are important indicators of success, the feedback we received from students was particularly valuable to me, as it provided insight into how the membership platform was impacting their experience.

Next Project

Intel
Blockade