SECTION4
Quality business education can be time-consuming and expensive. Section4 is an online business education platform, founded by Scott Galloway, looking to make elite business education affordable for all.
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.
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
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
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
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
3. Develop
Information Architecture
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.
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.
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.