For a full year, starting mid 2017 I spent a large chunk of my free time working with a PM and Engineer developing a large and robust, community driven web app. What started as a small reskinning quickly rolled into tons of research, tons of user testing, and tons of design iterations. Out of that came the start of a product and design system that I’m really excited to share the process from below.
In a nutshell ProductBox is a article aggregator for product centric articles. Currently, there is quite a big gap in product management curation. ProductBox seeks to be a hub to bring community together for discussing and defining how to build good products. I was the sole designer on this project, pushing forward to land on this MVP. From the start I committed to keeping a tab on the system as a whole. Even if it was a ton of work to maintain, I knew that it would make testing and using data to inform future decisions faster and easier.
When I begin a large daunting project like this, I believe it is always the best idea to start with good questions. I want to not only understand the problems like ; who is using this, why? what goals do our users have? - but I also want to get inside of the head of my team members to ask tough questions like; why is this worth their time?
We spent a ton of time white-boarding to wrap our heads around what the PM was trying to achieve. The initial story we generated for what this is was likened to a tool box. Like a tool box you had several drawers that you would reach into to find the right tool for the job. Because this project started as a more visual exercise, after wrapping my head around a mental model, I created a several mockups to start to generate, and quantitatively test a design language and navigation structure.
Our initial persona was basic: if I am a product manager and I need to know how to do X, I want to quickly search out and learn from the best in the industry. I don’t care to browse, I want to see a familiar name and a high rating, then I want to go... However, after talking with several alpha users it became clear that there was more to this than just “search out X". The vitally important aspect of a community was missing.
As I briefly mentioned above; in the product community there are tons of ideas without consensus. After speaking with and surveying many people, an inkling of an idea started to from; What if we made this an active place for discussion? This simple question pushed us down a path which unlocked a whole side of the product we couldn't see. What if this tool that archived all of these articles in a central place, also was the place where people could discuss and define what they thought good products are made of? What would something like that look like?
The "Hub" was born from the concept that people would need a place to keep coming back to, to engage with a daily swath of articles. This is how we moved past the single tool box idea, and into thinking about ProductBox as a whole library. Personally this is when the project got a lot more interesting for me. To dive deeper into the library analogy; I picture an archive categorizing several genres of books: "roadmaps", "pirate metrics", etc. When you take one of those books off the shelf you are now looking at something specific. Inside of that book is a ton of pages to learn from; those are the articles themselves. The interesting part comes from the fact that you can then discuss, rate, make table of contents, and a whole other list of possibilities that then can get saved and referenced to later.
When we starting thinking about the product in two parts: a library and a hub that pulls from said library it shifted the way we were thinking about structure. My ultimate goal was to create something that felt flexible; that gave the controls to the users. If this thing is to succeed I believe it needs to eventually be "hands" free from our side, with the community submitting and categorizing new articles.
Starting very granular with the most important screen: Article Preview. This modal lets you bookmark, share, create reading lists, rate articles, and make table of contents. Being able to preview if an article is worth your time is a huge value prop. Possibly even more valuable is the commenting system that lets you reference specific parts of an article. We have plans for other sections such as “props” to get even more info on an article before ever having to click into. Finally, one of the newest considerations is coming in the form of reviews. We rethought the system, originally favoring stars, but based on lots of user feedback moved to a quick upvote.
The next core piece is ‘Mybox’. where your saved and queued articles live. Speaking of book marks and comments, this is also a place where we found a desire to share your findings with teammates. For this MVP it is a simple list that slides out, letting you reference things you saved, but future iterations will focus on collaboration. There are so many interesting applications for this such as on-boarding new people on your team! Overall I suspect these first two sections making up the majority of user engagement.
Zooming out a bit, we have the topic page that houses individual articles. The generation of new topic pages is curated by the community and serves to define just what the heck terms like “kano model” mean. We found that filter tags helped users who didn't know what they wanted exactly, When crafting this mock, I thought of this space as the book that the articles live in.
Zooming out even further is the library page. This is where all of those “books” are stored. After tons talking with our users, our PM defined general parent categories that gave us a lot of flexibility for sorting the different books. We are still deep in testing both the color coding, and the ability to let the community define future topic categories. Visually I wanted to distinguish the article cards from the topic cards by grounding them with a visual and large CTA.
Finally we have the hub page. As mentioned, this is where the idea for ProductBox v2 all came together, and where the majority of users spend their time. This page is your window to what the community is talking about on any given day. I did copious amount of research and comparisons to find a format that encourages users to keep coming back. Among the things less distinguishable in a static mockup are a sticky 'recent reads' component, breadcrumb system, and fixed navigation. Something I really want to test as we get more articles, are the kinds of groupings we want going down the page. For example right now we have "today's articles", and "continue the discussion", I would love to make this dynamic, targeting users and their habits. Finally, I would also like to infinitely 'skeleton' load new articles vs pagination.