My Role: Lead Visual Designer
Team Size: 3
Duration: 3 Weeks
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?
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?
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?”
Cathy, 26, Female
BA In Business Management
Admin @ Tech Start Up
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.
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.
New Site Map
The new site map connects the the content from the podcasts to the blog.
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.
Below, a screenshot from Sketch of the final 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.
Floating Media Player
A crucial component of the redesign, this player is to stay fixed on the webpage at all times.
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.