Overview

My Role: Lead Visual Designer
Team Size: 3
Duration: 3 Weeks

Deliverables

User research, content audit, user personas, user flow, site maps, annotated wireframes, UI, branding

How I restructured the world’s largest Product Management resource — 100 Product Managers.

Problem: The 100 Product Managers website was designed to be the world’s favorite place to learn about building and managing digital products.

We discovered the website lacks an informational architecture that’s easy for the user to navigate. 

How might we restructure our content in order to increase user engagement? 

 

Before

San Do UX Designer 100 Product Managers Before 1
San Do UX Designer 100 Product Managers Before 2
 
 

After

San-Do-100-pm.jpg
San Do UX Designer 100 Product Managers After Landing Page
San Do UX Designer 100 Product Managers After Landing Page blog page
San Do UX Designer 100 Product Managers After Podcasts Page
 

Research

Google Docs played a crucial piece in keeping our research organized. Things we did on a spreadsheet: 

  • Site Audit: We went to every single page and noted the number of social media shares, upload dates, metatags, and anything else quantifiable. 

  • LinkedIn Tracking: We went on LinkedIn and looked up “Product Managers” and tracked their careers on a spreadsheet. Most PM’s came from “product adjacent” backgrounds.

  • User Interviews: We followed up with these product managers and asked to speak to them on the phone.

  • Contextual Inquiries: We sat people down and watched them go through the site as they verbalized their comments. 

  • Competitive Analysis: Our clients also taught PM classes. Who were our competitors in a such a competitive market?

We also sent out a survey. This helped us answer a few questions. Who is our user? Why are they here? What do they want?

San Do UX Designer 100 Product Managers Survey
 
 

Minimum
Viable
Findings

Users were distracted by the color.
“There’s no variety of color” and “Oh lord it’s so red!”

Users struggled with the layout of site.
“There are a lot of worlds on this page.”

Users can’t find what they’re looking for.
100% of users couldn’t find a post on “lean startup”, even though it was on the same page.

Users were not able to find content on the site.
100% off participants could not find Lean Startup on the homepage
i.e. “Can I search for it. Where can I search?”
 

 
 
 
San Do UX Designer 100 Product Managers Cathy Persona

Cathy, 26, Female 

BA In Business Management
Admin @ Tech Start Up 

Persona Development

Personality traits: ambitious, focused, introverted, lacks confidence in ability to transition careers

Needs: Guidance, a network and community, direction and confidence

Rationale: Upon crossing out who we assumed our users were, we found 2 main user groups: current PM’s and aspiring PM’s. An overwhelming majority were aspiring. Introducing Cathy. She’s incredibly motivated to transition into a career in product management. 

Cathy’s problem is overwhelm. She doesn’t know have a clear entry and exit point on the website. Our mission was to get her in the site to listen to a podcast and explore other resources. 

 
 
 

Define 

We started to map out our features on a prioritization matrix. However, we had an epiphany. We thought of Cathy. How is adding features going to help her, when our primary problem was the structure and flow of the website? 

This was a content strategy project. The content and its flow would have to be considered. Naturally, and as supported by research, our podcast is to remain our key X.
 

 

Old Site Map

The old site map lacked a structural framework that connected all of the contents of the website. It also had not one, not two, but three navigations. 

San Do UX Designer 100 Product Managers Old Site Map

 

New Site Map

The new site map connects the the content from the podcasts to the blog.

San Do UX Designer 100 Product Managers new site map

 

New User Flow

All roads will lead to playing a podcast. We want the user to first play a podcast, then read a blog post, or maybe search for other resources. 
 

San Do UX Designer 100 Product Managers New User Flow

 

Design

Wireframes

Below, a screenshot from Sketch of the final annotated wireframes.

San Do UX Designer 100 Product Managers annotated wireframes

Close-Up of Annotated Wireframes

Notice the format of the annotations consisting of (1) an annotation number, (2) the name of element, (3) the description of the element function, and (4) a “links to page ID”. Annotations make for a seamless UX-UI or UX-web/dev handoff.

San Do UX Designer 100 Product Managers Wireframe Close up.png

 

Floating Media Player

 A crucial component of the redesign, this player is to stay fixed on the webpage at all times. 

San Do UX Designer 100 Product Managers floating media player

 

Branding Guide

A common theme found during our interviews is that the industry is severely underrepresented. This creates an opportunity to disrupt the industry. We wanted introduce diversity to our brand.

 
San Do UX Designer 100 Product Managers Color Pallette
 
 

More Work

Michael Barbering

Agora x UCB