Prof G
CLIENT SECTION4ROLE UX/UI · VISUAL DESIGN
CD JILLIAN HARRIS
VP OF PRODUCTION JERLLIN CHENG
Prof G delivers online business education to help professionals who are seeking to improve their outcome at work. They aim to differentiate themselves from existing online education platforms through their high quality content that is both affordable and accessible. Their paid products consist of Livestream classes, a 2-week intensive “Sprint” course, and paid events.
Problem
The free content and paid products existed across multiple platforms. Additionally, they did not have a website that told the story of Prof G and explained what their products are.
Solution
One main customer facing website that houses all of the content—the free content, as well as the paid products—for users. I worked with key stakeholders to design and launch a marketing website that informs users about Prof G, answers questions for prospective students, and clearly provides access to free and paid business strategy content.
Research
I started out by reviewing existing user research before conducting stakeholder interviews. I conducted stakeholders interviews with 3 key stakeholders in order to understand the business goals and user needs.
User Research Summary
Stakeholder Interview Summary
Information Architecture
Sitemap
Instead of grouping all of the paid products together, I decided to separate the Sprint (2-week intensive course) into its own category in the navigation. Since the Sprint course is the hero product, users need to be able to easily access the information about the Sprint. In addition to the specific “Strategy Sprint” and “Brand Sprint” pages, I planned to create a “Sprint Overview” page that would clearly explain what a Sprint is and address the common concerns that users had around purchasing the Sprint.
Wireframes
Sprint Overview Wireframe
Taking into consideration that new users might not know what a Sprint course is, I organized the Sprint Overview page in a way that clearly introduces what a Sprint is, who it is for, and what the users would learn. To address the users' concerns around purchasing the Sprint, I included modules on time commitment, getting reimbursed through work, testimonials that provide a level of social proof, and frequently asked questions for the prospective students.
Homepage Wireframe
When creating the homepage wireframe, I focused on introducing clear value propositions, having a section to feature the hero product—the Sprint, and introducing the instructors who would be teaching the Sprint.
Additionally, I included a newsletter signup CTA module which appears in the body of the page, as well as the footer. I included this pattern on all pages to ensure that the user has many opportunities to subscribe to the newsletter, which addresses the business goal of acquiring more user email addresses.
Visual Design
I was tasked with creating visual designs that would excite the users and make them eager to learn more about the products. I worked with the Creative Director to evolve existing brand guidelines and apply it visually to the pages. We decided on a visual design style that is off-kilter yet academic to convey the personality of Prof G.
Homepage
Sprint Overview Page
I used geometric shapes throughout the design to create a whimsical visual style that would counterbalance the dense nature of the sprint course work.
About Page
Squarespace Implementation
I built out the entire site on Squarespace using custom HTML/CSS. There were quite a few challenges that I encountered—such as figuring out how to implement proper spacing in mobile view, how to get the designs to stack properly on mobile view, and other issues related to the responsive layout. I enjoyed learning how to bring my designs to life, seeing it through from concept to launch with the Prof G team.