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.
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.
Head of Product — Section4
User & Task Flows
User Journey Map
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.
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.
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
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.
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.
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.
Leadership, outside of the product team, tended to overrule our feature prioritization with their own agenda.
A super simple site map
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.
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.
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
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.
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.
The Section4 Member Center was a great success, as it received positive feedback from members and saw continued growth and improvement with each release.
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.