Execution

Sketching, Wireframing & Solution Ideating

While this is an ongoing design project and user research is still underway, I needed to present something to the leadership team to demonstrate the opportunity this project represented, and that it was indeed worth pursuing. Thus I began sketching what this concept could look like to later present to key stakeholders in order to get the green light.

The general concept was: staff and users could highlight parts of any given article, categorize it and add their own supplemental info to it.

They could save it and/or categorize it. That way, if another user is reading later, that user can learn more right then and there.

I focused the first few rounds of sketches on what the actual highlight and comment-adding flow might look like.

Based on the problems users experienced, a small pop-up text box was a good fit. It could provide the space for contextual information about the highlight like categories and comments without inhibiting or interrupting the existing user experience too much. With scalability in mind, we would design and develop it so not every user would be able to see every highlight; only certain users (likely authenticated, premium or only those with a high enough ‘rank’ or reputation in the community) can create and view highlights and comments.

I iterated more, and fleshed out the flow for adding and reading a given comment.

A little more polish and bam, I had the core flow of the highlight and appended comment concept, seen below.

After initial positive feedback from other community and development leads about this design, I began to refine these initial designs while adding screens to the flow.

After turning these sketches into design mocks, I had a basic flow for this highlights and appended comments concept. Once again, to show how this project might scale according to resource availability, I designed an MVP version, along with more advanced iterations.

The proposed MVP, below, would enable staff writers and editors to highlight some of the most important sentences in a given article, and categorize their highlight. Then, any given user could read the highlight (thus better understanding what information to focus on), see which topic it belonged to (thus better contextualizing the information and providing a sturdier foundation for learning more complex strategies) and even visit that topic’s hub page, where they can learn more about that topic from other related highlights in articles across the site.

Critical pieces of information in hundreds or thousands of stories site-wide would be categorized by staff and readers, and easily discovered by other users.

While the above design limits adding highlights and categories to editorial staff, a more advanced version of this design enables users to do the same and save a highlight and/or add comments to it, too. By doing so, we are providing a place for users to add supplemental information like tips and anecdotes onto the site in a way that connects their experiences to the onsite content while also leveraging categorization and keywords to make them easy to discover later.

Then, if a user wanted to learn more about a given topic, they could simply swipe down and find that in the Highlights and Comments Hub, where our user could discover key information about topics they care about by searching, adding filters or just exploring. As I see in our Facebook Groups every day, users are interested in seeing what the hot topic is for the day “what are people talking about today? What should I learn about today?” Knowing this, I included an element to sort by engagements (“likes”) or timing (ie. most recent).

This design had merits, but it was too crowded; the information hierarchy was a bit unclear.

To make it better, I expanded the search bar to further nudge users to search and discover content that they are looking for while replacing the “Filter” option to “All” to allow for better comment visibility. This is especially important for the users who may have liked how Disqus displays every comment and sought a similar experience.

With just one swipe to the left, our user could browse comments in a similar experience.

Much like the highlights hub, the comments hub displays categories, filters and a prominent search bar to make everything as discoverable as possible. To keep toxicity and flame wars away, only the “best” highlights and comments (the ones with the most likes, upvotes and from users with the highest community rank) are most visible. Notably, all comments would still “attached” to the highlight that they lived on. Again, this reinforces my commitment to contextualizing information on the page—whether that’s words from an article or stories from a reader.

Plus, all of this could be developed for a homepage “Discover” or “Highlights” widget.

For example, some of the day’s/week’s top highlights could live dynamically on the homepage (or on any page, for that matter) to improve user learning experience and foster discoverability; users could even enter articles from a highlight widget on homepage or elsewhere. Right away, a new user visiting the homepage could be introduced to the value-prop of TPG through highlights and the thoughtful contributions of its community.