215396_en-US

liliconcom

Re: Discussions Page 2.0 mockup

Adding original message and my response to the initial design:

 

On Jun 28, 2019, at 11:44 AM, Ryan Gilmore <Ryan.Gilmore@jmp.com> wrote:

 

Initial thoughts:

 

• I like the clarity of purpose a lot.
• It was not obvious to me that the items were tabs. I thought the Find Your Answer was improperly sized.
• I like the reduced size of the ad and the de-emphasis on the button within the ad. Puts more focus on the clarity of purpose and content.
• I think we need to have more than one menu item displayed or change it to the hamburger.
• I’m not sure how I feel about the search. What I think will help is to include text within the field, such as “Search the community”.

 

Overall, a good start. Thanks for the design.

 

I would like to ask for at least two more designs. For at least one of the designs, don’t worry about how quickly it can be done in terms of development.

 

If you need an extra challenge, create mockups of your ideas for the next step in the user’s journey after he/she selects a tab.

 

I assume this if for COM-188? 

 

Thanks.

 

From: Ian Kleinfeld <Ian.Kleinfeld@jmp.com>
Date: Friday, June 28, 2019 at 10:55 AM
To: Ryan Gilmore <Ryan.Gilmore@jmp.com>, Jeff Perkinson <jperk@mac.com>
Subject: Review initial discussions 2 mockup

 

First rough draft for review and discussion. A simple redesign that’s doable reasonably quickly.

https://xd.adobe.com/view/23f6a53b-1fb6-4c82-6376-36465525eec0-55c7/

 

Including 

• smaller ads
• big button/tabs for clarity of purpose
• modified top menu and search bar assuming everything will be under Community menu

 

_______________________

Ian Kleinfeld

Re: Discussions Page 2.0 mockupI like the look of this, @IanAtJMP! I take it the top nav would collapse and the search bar, sign/in, and menu would persist? I love that.Re: Discussions Page 2.0 mockup

Thanks, @IanAtJMP.

 

Can you provide some commentary on what you were trying to accomplish and what elements address those items? It will help to understand the thought process.

 

Thanks!

Discussions Page 2.0 mockup

Summary

There are three main areas of change in this redesign:

1. Main section button-tabs
2. Nav Bar section, including
   1. Menu changed to collapsing menu
   2. Search bar moved to menu (in part because this persists no matter where the page is scrolled to)
   3. Sign in / Join button (instead of Sign in text only), which will persist on page scroll
3. Smaller Community Promos

With this mockup, we are trying to make the discussion page easier to navigate for the three types of users: 

• Anonymous users
• Community Members, and
• Super Users

Further explanations and analysis below the image.

 

 

Main Section

This main (center) section of this design makes paths of action more obvious with large, brightly-colored tab-like-objects (TLO's) for the main actions: 

• Find Your Answer
• Ask a Question
• Help Others, and
• Sign in or Join, which will change to the user's mini-profile stats (didn't come through on the mockup, but something like this: 

Anonymous users are most likely to be looking for an answer to a specific question, which is likley going to be one of the top solved questions. By landing on that tab as the default, we offer the most useful information to those we want to join the community. Additionally, we make the SIGN IN OR JOIN Tab/button big and clear and "in your face" in order to encourage them to Join, and for Community Members who are not signed in to do so in order to participate in the Community, as well as give us tracking data. 

 

Community Members are (unlike Anonymous Users) able to Ask a Question or Help Others by answering questions. 

 

Super Users, while occasionally having a possible question are most likely there to help answer others' questions.

Nav Bar

The Nav Bar has already been modified to persist at the top on page scroll. This gives an excellent opportunity to promote signing in and joining, as well as a persisted search form. In order to achieve both of those things, the horizontal menu must be changed to a more standard pancake menu to provide vertical listings, which has the added benefit of standardization of menu in mobile and desktop witdths (mobile-first design).

Community Promo Ads

The ads are now smaller, making them less of a distraction for users coming to the page to do something specific (almost never to click on an ad), i.e., Find Your Answer, Ask a Question, or Help Others. Making them smaller contributes to a better user workflow by making the desired actions more obvious, and extranneous (but useful) information less intrusive but still available.

Design PatternsRe: Discussions Page 2.0 mockup

I have edited the main article with an explanation and analysis. 

Re: Discussions Page 2.0 mockup

Revisions to first design, split up JOIN and SIGN IN links in the top right coner into button and text. The bright orange JOIN / SIGN IN block creates a visual reinforcement of the importance of signing in or joining.

 

With some feedback from Kristen, I moved the JOIN / SIGN IN block to the left so that it's the first thing that users see

 

After signing in, the user will see their basic stats in place of the JOIN / SIGN IN block. This option shows it on the left, directly replacing the JOIN / SIGN IN block ...

 

And this shows it moved to the far right, now that it's less relevant (my preference).

 

For contrast, here's the buttontabs as just regular tabs, which I think doesn't look as good as the previous mockups