Feature Image
Section4

Member Center

At a glance
Section4 is an online business education platform, founded by Scott Galloway, looking to make elite business education accessible and affordable for everyone.
What I did
I was ultimately responsible for the UI/UX for the Membership Platform. I conducted visual reearch, created user flows, prototypes, and countless numbers of mockups. I collaborated with the Head of Product to map out the future of the platform and worked directly with Product Managers and Engineers to scope and build everything.
Year
2016
Client
Section4
(In-house)
Skills
UI/UX, Design Leadership, Design Systems, Prototyping

Background

I joined just after Section4 received their series A funding. A handful of smart people had figured out a new learning format and curriculum, which was a mix of live events, recorded videos, and documents.

Original Section4 website
Infinity Mirror
Original beta member Notion workspace
Infinity Mirror
Infinity Mirror

the platform wasn’t really a platform...

It was more like a bunch of third-party apps like Zoom, Dropbox, Slack, Wordpress, and Google Docs, all cobbled together in a fairly disjointed way. 

The start of something new

I came on board with a new Head of Product and a mandate to build our own technology platform from scratch. Together we met with students, professors, and stakeholders to figure out what the MVP of the new platform “wanted” to be. And keep in mind, that this wasn’t a technology company—we didn’t just sell an app. We sold an experience that was human powered and was ultimately the result of content creators, educators, and technology. 
Infinity Mirror

The problem at hand

The core of the problem was how to create a learning experience that was:
Engaging
Engagement in this category is typically below 30% and course completion is in the single digits.
Flexible
Our students are working professionals, they need a platform that works with their schedule and doesn’t take up too much time.
Adaptable
We were still figuring out the course format, so the platform needed to be able to accommodate learnings from the education and delivery teams.
Elegant
It goes without saying that user expectations are higher than ever, but we also had a founder who was particularly concerned with great design.

Design Process

We made some important decisions early. Use MUI as our UI backbone, React for the front end, Figma as our design platform. Also, we started building our design system, collaborating with the marketing team on a new brand that would work for both the product and the brand.
MUI for FigmaMUI for Figma
Process

Competitive Research + Inspiration

We looked at several competitors to see how they were solving similar issues and to make sure we were differentiated.
Competitor Websites
Process

User + Task Flows

Throughout the design process I created several flows for different use cases. The Onboarding flow was used to figure out where we could make the user's path more efficient. While the Free Trial flow was used to communicate how I was thinking about moving the Free Trial experience from the website into the platform.
Flow Diagram
Free Trial Task Flow
Flow Diagram
Onboarding Task Flow
Process

Sketches + Wireframes

Another useful tool to quickly rough out ideas and work through complexities is sketching and wireframes. For this project, sketching out ideas could happen at 6am on a Sunday morning or 10pm on a Tuesday night. While wireframes would be used mostly to communicate higher-fidelity ideas to stakeholders without the distraction of color or detail.
Sketches
WireframeWireframeWireframeWireframe
Process

Editorial style layout

Unlike our Sprint Center platform, Member Center is very content-heavy and needed a layout to support that. I made the decision to explore an editorial style layout, as opposed to the dashboard/learning progress layout we host in our Sprint Center.
Notable
  • This layout provides a great way for us to support our goal of releasing new events, articles, case studies, members, and other content on a weekly basis.
  • Allows us to break out our events, articles, and members into separate navigation items and host a few of our latest/featured items of each category on the homepage.
  • Allows the homepage to act as a landing page for the latest and greatest and have your navigation items act as a place to dive deeper and explore the rest of our library.
  • I chose to use cards as our main UI container and went through dozens of explorations off different formats and layouts.
Process

Highlighting Members

We made a decision to merge all of our existing members from our beta Notion platform into the new Member Center. The decision was made because without the large merge, our member community would only appear to host a handful of users at launch. However, this merge included hundreds of inactive user accounts with incomplete profiles. This was immediately clear to me in our staging environment when I saw the member directory on our home page filled with default profile avatars, incomplete job titles, company names, and first/last name fields. Launching with this as our initial experience was not an option.
Key Decisions
  • On the home page, filter out the members without profile pictures. This lead to another discovery that members with profile pictures generally also completed their profiles.
  • Randomize the members so we don't see the same profiles each time the page is loaded.
  • On the Member Directory, prioritize members with profile pictures so that the page does't show default placeholder images.
  • At a minimum, we need to allow searching of first/last names, job title, and company so members can find other members easily.
Process

Responsive Design

A flexible interface matters. Although our platform was primarily designed for the desktop, we made sure that the interface still looked great at all break points.
Process

handoff

One of the first tasks I did when I started at Section4 was to revamp the design to development handoff process. The prior process was messy and caused a lot of bugs and defects due to poor communication and messy files, taking precious time away from both the product and engineering team. The new process included using a single "working" file in Figma where the design team can be as messy as they want.
All "ready for development" work would be in second file labelled "Handoff" and each layer in that file would be labelled with the Jira ticket number and Jira ticket name. This simple change made it so our engineers always knew that the design they were building was the very latest.
Our team's Figma file structure that I implemented to make handoff smoother
Our team's Figma file structure that I implemented to make handoff smoother
Sample redline. This was only really needed when providing feedback to the engineers
Process

Usability Testing

I built prototypes for several key features and tested them with both internal stakeholders and members. Below is one example of a prototype I created for an early version of onboarding.
Background
Our beta members were already familiar with the Section4 product and eager to help improve the growth of the company.

In each session, the UX Researcher conducted the interview, while the Product Manager and I observed and took notes. We used a spreadsheet to organize our notes and tally recurring themes and requests from our interviews.

We then met to discuss and consolidate our findings, share our findings with the larger group of stakeholders and engineers, and figure out where our expectations for the product aligned with our users in order to better accommodate their needs.
My role
I designed and built the prototype for the V1 onboarding experience. I then worked with the UX Researcher and Product Manager to create a script and run user interviews for a select group of our beta members.
Test Details
15 Beta Member Interviews
45-60 Minutes Each
3 Weeks
Team
UX Researcher
Product Manager
Product Designer (me)
Goals
  • Will our users make it to the end?
  • Will they understand why they are being asked these questions?
  • Will users know what to do next?
Outcomes
  • Users were fatigued by the end.
  • Users wanted to be able to save their progress so they could come back later and answer thoughtfully.
  • Most users used the tooltips to help them understand why certain questions were being asked
Onboarding Prototype - One of many prototypes that we used for testing.

Summary

In the end, we saw engagement rates upwards of 80%, completion averaging 65%, and NPS, depending on the course, between 65 and 85
Infinity Mirror
Jules Konig
My name is Jules Konig and I'm a Senior Product Designer living and working in Bellevue, WA. I'm currently working for an EdTech startup named Section4. At Section4, I am helping to build an amazing learning community and learning platform for our students.

My Design Background
My career started in the San Francisco Bay Area in the early 2000's, where I was focused primarily on designing online retail web-based experiences for brands like The North Face, JanSport, and Timberland.

Later, I joined the growing team at Stimulant, a boutique design and development agency that specialized in proof of concept work and location-based experiences. As Art Director and Visual Design Lead at Stimulant, I  designed user interfaces for next generation hardware and software, mobile and desktop apps, and tons of other location specific experiences that incorporated vision and proximity sensors to enhance the user experience.

If I sound like a good fit for your team, I'm always open to learning more about freelance and full-time opportunities.

Expertise

UI/UX Design
Visual Design
Art Direction
Design Leadership
Design Strategy
Prototyping
Brand Extension
Visual Branding
Problem Solving

Favorite Tools

Figma
Illustrator
Photoshop
Webflow
After Effects
Premiere Pro
HTML/CSS
Pen & Paper

Full client list

Adobe
Barnes & Noble
The Brand Experience
Design Within Reach
Exelon
Focused
Foghorn Creative
Genentech
Gensler
GM
Google
The Hettema Group
Honeywell
HP
Intel
Jackson Family Wines
JanSport
Kodak
Leapfrog
l.inc design
McKesson
Microsoft
Microsoft Research
MOHAI
The North Face
Obscura Digital
Olson Kundig Architects
One Liberty Place
One World Observatory
Quintiles
Reebok
Reunion Tower
Samsung
SAP
Schwab
Sifteo
The Space Needle
Timberland
VMWare
WorkFlowy

Experience

2021 - Present
Remote
Section4
As a Senior Product Designer I am leading the product design team and helping build the learning and membership platform for both consumer and enterprise customers. I create future vision concepts and prototypes to help direct the future of the product. I partner with the Head of Product to define the product roadmap. I continually work to improve the user experience through user and stakeholder interviews. I've implemented our design system from scratch, and moved the product team to Figma. I've instituted a system to ensure efficiency from concept to developer handoff. I'm working cross functionally with many teams in the org to get oodles of things done, from product, to course assets, all while going through a company rebrand. I'm also representing the product team on the rebrand effort.
2015 - 2021
Bellevue, Wa
Independent Contractor
As an independent contractor I've worked on a wide variety of projects, from mobile and desktop apps to museum exhibits and interactive experiences for corporate lobbies.
2016 - Present
Rio Hondo College
Advisory Board Member
As an Advisory Board Member for Rio Hondo College's Design department, I provide my expertise in the field of Art Direction and UI Design.
2008 - 2016
San Francisco, CA + Seattle, WA
Stimulant
As both Art Director and Visual Design Lead I was responsible for the visual development and execution across multiple interactive projects. I combined visual brand and audience needs into visually rich and immersive interactions and experiences. Supervised and directed junior designers. Reviewed work to insure quality, appropriateness, and consistency for client brands across all deliverables. Established the look and feel for a wide variety of interfaces, including web and desktop apps, mobile devices, kiosks, and games. I designed user-centered interaction models, wireframes, storyboards, and screen mockups. Closely collaborated with Developers and business teams to solve complex UX issues. Produced email marketing, presentation materials and pitch documents. Juggled multiple projects while effectively managing timelines and expectations.
2005 - 2007
San Francisco, CA
Fluid
As Creative Director I established the design direction for rich eCommerce websites, product finders and product customizers, in-store kiosks, and digital campaigns. I presented design work to clients and stakeholders, provided feedback and direction to creative team and produced red lines and style guides to help keep development on point.
1999 - 2001
San Francisco, CA
Scenic Industry
I designed brand-centric interactive sites and tools for large and medium sized clients.
1997 - 1999
San Francisco, CA
Fireplug Labs
Was brought on as a design intern out of college and after a few months was hired as a full timer. I mostly created print and web design work for social marketing and played a lot of ping pong.

Awards & Recognition

Horizon Interactive Awards
Gold
2017
FWA
FWA of the Day
2016
Event Marketers Awards
Gold
2013
Event Design Awards
Gold
2013
Gold
2013
IxDA Design Awards
Best in Show & Best in Category
2012
Communicator Awards
Gold & Silver
2012