1079406 - Refresh Webmaker IA

Status: RESOLVED FIXED

Description

[Cassie McDaniel [:cassiemc]]

We need to refresh the IA for webmaker.org. To do this, we need:

* Any known metrics here (bounce rates, etc) to inform the process <--Adam?
* Any other known pain points for users <-- Claw, Michelle?

Here's a draft proposal from last spring that we can build on:
https://redpen.io/she9d224b447541fdf

We'll also hopefully be shipping a new, MVP badges landing page this heartbeat. Not a community landing page, though.

Andrew, care to add any other requirements to this bug?

Comment 1

[Cassie McDaniel [:cassiemc]]

Andrew has ideas here, so reassigning to him.

Comment 2

[Michelle Thorne]

Thanks! 

1. Events. Today we talked about transforming that section to be more a linear flow to get the assets and prep you need to make an event. 

2. Profiles. Currently, this IA is missing profiles. This is a great feature to find mentors and also navigate to your own profile. Might be worth calling out. 

3. Community. "Get involved" could be merged with "Become a mentor". 

4. Overall. At the engagement work week, we also discussed bringing the mentor experience more to the forefront of wm.org. Don't know how this fits into the IA, but worth considering. 

Also, it seems like we want more guided and linear flows on wm.org. Certain conversions are key and are currently hard to do. Not sure how to work this in here, but seems valuable to include.

Comment 3

[Cassie McDaniel [:cassiemc]]

(In reply to Michelle Thorne from comment #2)

> 1. Events. Today we talked about transforming that section to be more a
> linear flow to get the assets and prep you need to make an event. 

Ricardo has exciting work on Events along this line. Have pinged him for a bug number.
 
> 2. Profiles. Currently, this IA is missing profiles. This is a great feature
> to find mentors and also navigate to your own profile. Might be worth
> calling out. 

You can find your Profile from the dropdown next to your name when you are logged in. I think that's the right place for it. We definitely need some other way of discovering / browsing other users though.

> 3. Community. "Get involved" could be merged with "Become a mentor". 

Worry we're missing opportunities for dev/design/localization opportunities if we do that. It doesn't seem as clear an ask.

> 4. Overall. At the engagement work week, we also discussed bringing the
> mentor experience more to the forefront of wm.org. Don't know how this fits
> into the IA, but worth considering. 

+1000

> Also, it seems like we want more guided and linear flows on wm.org. Certain
> conversions are key and are currently hard to do. Not sure how to work this
> in here, but seems valuable to include.

Yes, this is top of mind.

Andrew / Paul – do you guys have thoughts to add here?

Comment 4

[Cassie McDaniel [:cassiemc]]

Worth calling out that two of the main reasons I filed this bug were:

1: the Web Literacy competency dropdown makes our content too buried. Feels wrong for some of our most valuable content.

2: With the new badges landing page being designed in bug 1010306, we have an opportunity to correctly next the other badge subpages.

Matthew, if we need to narrow the scope of this bug to make it shippable, please edit away.

Comment 5

[Ricardo Vazquez [:ricardo]]

The bug to redesign the Create an Event page can be found here: https://bugzilla.mozilla.org/show_bug.cgi?id=1080834

Comment 6

[Andrew Sliwinski:thisandagain]

+1 on narrowing the scope of this. I'd like to focus on a couple specific things:

- Fixing navigational inconsistencies

Comment 7

[Andrew Sliwinski:thisandagain]

Gah! Fun with form UX... restated:

+1 on narrowing the scope of this so we can get it out the door. Couple items I'd like to propose:

- Resolve issues with Web Literacy competency dropdown (as per Cassie)
- Resolve issue with badges inside of explore (as per Cassie - bug 1010306)
- Resolve navigational inconsistencies
    - Hamburger inside of the subnav
    - events.webmaker.org should match webmaker.org nav
- Remove duplicate search item from explore
- Consolidate "info" to the persistent footer and remove from primary nav (controversial?)
- Remove external links (SUMO, etc.) from the primary nav (controversial?)

In terms of resources / mentorship / events IA more broadly I think we could punt from the scope of this bug until we have some clarity around strategy and some better information around user needs. Open to ideas.

Comment 8

[paulj]

My main interest here is getting to a more guided and linear flow. Something as simple as learn/explore, teach/mentor and community/events. But I agree with Andrew that this may be better punted from scope as we clarify strategy.  

Within the scope of this, here's what I'd want to see: 
- Resolve navigational inconsistencies (see Andrew's description above). 
- Revamp events as this remains our main path to contribution in the short-term
- Bring mentorship to forefront
- Remove external links

Comment 9

[Andrew Sliwinski:thisandagain]

Wonderful... heard loud and clear. With that in mind, my recommendation is to keep this focused on what we can cover quickly in a sprint and split the larger pieces (linear flows & a focus on mentorship) into separate chunks of work as they reach beyond the IA. How does that sound to you Cassie?

Comment 10

[Adam Lofting (:adamlofting)]

We can ignore existing metrics at this point in time for the existing IA. They can be useful for tweaking but this feels more like an overhaul.

If you want to think in metrics terms, I would prioritize the calls to action based on the things you most want the most people to do (potential audience size * potential impact).

Comment 11

[Cassie McDaniel [:cassiemc]]

Reassigning to matthew and bumping to the next train.

Comment 12

[Matthew Willse [:mattheww]]

WIP

Worked on this a bit at Mozfest with Andrew. Pushing back to a later train since it's dependent on product planning.

Comment 13

[Cassie McDaniel [:cassiemc]]

Since this is in the current heartbeat, can we have an update on what is needed to resolve this bug?

Comment 14

[Matthew Willse [:mattheww]]

Created attachment 8524793 [details]
Webmaker IA

Simplified architecture for existing Webmaker products.

Comment 15

[Matthew Willse [:mattheww]]

Created attachment 8524959 [details]
Webmaker IA Mockup

A mockup to illustrate the IA

mockup: 
https://redpen.io/p/zo4642e14e22e6d79d

spreadsheet: https://docs.google.com/a/mozilla.com/spreadsheets/d/1wpqM0zQs8BRICLauEn8hcY4T_2FiE_juhkjkNgw9Tqw/edit

Comment 16

[Cassie McDaniel [:cassiemc]]

Comment on attachment 8524959 [details]
Webmaker IA Mockup

Thanks Matthew, the mockup is *super* helpful.

As per Andrew in Comment 9, we should try to be organized about what changes we can implement now vs. what will come later. However I appreciate that good UX is holistic, so thank you for tackling this in that manner!

I'd still like to understand the rationale for some of the changes (whether that comes from you or Andrew). Having seen several iterations of the site over the year and half, I want to be sure we can clearly explain the reasons for the changes to our users, that there is a clear story behind the update, as well as a transition plan in place. There is a tension between what currently exists and what needs to be built / updated, and how well this plan will work without the additional updates. ie. it may be worth waiting to make the bigger IA changes until some of the other stuff (like a "Teach" platform or website) is in place.

I have some open questions about omitted pages, to start conversation and make sure they were not an oversight:

* /mentor – this doesn't appear in the new IA; the community team will likely still be sending people here until there is somewhere else for them to go.
* /feedback – this is missing. I'm okay if it goes away, but the original intent for this page was to open the door to feedback and employ our vast community to help us user test. Is that no-longer needed?
* I like the new logged in homepage view of your profile. Is that the profile as-is? (want to understand and file build dependencies on these IA updates)
* /Resources – with this going away, there is no mention of the Web Literacy map. I did notice you changed Web-Literacies to Literacies. Intentional?
* /get-involved – missing. Intentional? Would be nice to highlight that this is an open source project. We've never communicated that well.
* Partners – it was my understanding we had some contractual agreements to display partner names on the homepage. If that is false, let's kill it once and for all, as you have here. Something to dig into.
* Where does the social stuff show up? And /blog? I am all for getting rid of the newsletter signup on the homepage, but these easy ctas seem missing 
* no search?
* badges. Anywhere?
* Are event guides no longer? Maybe worth calling out the sub-nav to events in your IA doc, like add-an-event. Am actually relieved if guides gets built into the events platform ux, but that is not the current state of things.
* Does Prototype Land exist anymore? Where can contributors show-off work / tools / extensions that may no longer fall under the webmaker brand?

Lastly, we don't need 100% concensus on all the changes, but we do need to be sure to widely communicate coming changes. Lots of people rely on pre-written material to help people (students, groups, partners) find stuff on webmaker.org, which was something we failed at in the last IA update.

Again, I'm a-okay with change, just want to understand the reasoning and have a plan for smooth implementation. Exciting stuff!

Comment 17

[Matthew Willse [:mattheww]]

Thanks Cassie for collecting the missing pieces! I will iterate the mockups to hit on things I don't mention below. 

This list probably needs a real-time conversation.

* /mentor & /resources - This would be accessible via Teach in footer. Could be called Mentor. I'd recommend an iteration on /mentor with a fat button to Resources and a smaller one to a Badges landing page. I'd like to avoid secondary menus, but it could help us with this section/audience during the transition. 

* partners - Certainly could remain on the homepage along with other key content. With IA, I will help remodel the house. Paul and others can decide who's invited to the housewarming party! 

* /feedback & /getinvolved - I didn't know /feedback existed. 0.15% of en-us visitors hit that page in the past year. 1% hit getinvolved. 3% hit /about. I recommend we pick one CTA to put on /about to reduce the burden on visitors. We could a/b test to increase our understanding of what resonates. This CTA should not duplicate the /mentor or /teach CTA.

* /profile - Might be worth it to pursue easy improvements on this view now since it should become more central no matter what we build in 2015. If nothing else, drop the tabs for a unified view.

* blog, oops. duh. prototypes too. event guides remain, but integrated to 'add an event' flow.

Comment 18

[Matthew Willse [:mattheww]]

Created attachment 8525575 [details]
Webmaker IA mockup

I've updated the mockup to add a few views and details, and integrated Cassie's input. 

mockup: https://redpen.io/p/zo4642e14e22e6d79d

spreadsheet: https://docs.google.com/a/mozilla.com/spreadsheets/d/1wpqM0zQs8BRICLauEn8hcY4T_2FiE_juhkjkNgw9Tqw/edit

This represents architecture that uses existing content, refined. It aims to minimize the amount of new content and engineering required to implement it.

Comment 19

[Cassie McDaniel [:cassiemc]]

Comment on attachment 8525575 [details]
Webmaker IA mockup

Looking good. Think we just need to clarify which sections/pages need updating, and be sure that they make sense in this 'transitional' context. And file any additional bugs. Am sure we'll discuss in the catchup this afternoon.

Comment 20

[Matthew Willse [:mattheww]]

Created attachment 8527056 [details]
Webmaker Transition IA

I've updated the mocks to include screenshots of current pages and remove all the feature creep. 

https://redpen.io/p/zo4642e14e22e6d79d

Beyond nav, I see 3 changes necessary to current material:
 
1) Gallery Search -- We are deprecating global search. We should place it at the top of the new Explore page (current Gallery content). We should remove the filter feature unless analytics show it to be widely used. 

2) Help -- Our current Help nav item sends people directly to support.mozilla, a disorienting leap. I recommend adding a very simple, friendly help page that says hello before shipping a user to SuMo.  

2) Responsive Nav -- On a small screen, hamburger reveals nav that includes drop-down menus for language and user. Yikes. As a quick fix, I recommend that each of these be made a menu item that opens a full screen modal. Kate might have already done some of this work on the language menu. Might be easier to just put user items on their profile page.  

Bonus) Events -- It currently takes 4 clicks to find an event near me. An easy fix: I recommend that we skip events landing and show the existing Find an Event page. We would need to add a button there to create an event. I also recommend that we always show the "Near Location" field and remove all the other advanced search stuff.

Comment 21

[Matthew Willse [:mattheww]]

I tried to make the list seem shorter. As easy as 1, 2, 2.

Comment 22

[Cassie McDaniel [:cassiemc]]

Nice work Matthew. Really helpful to have all these pages to look at. In particular I think it's revealed we need to reevaluate many of our headlines, especially as Page A becomes Link B... This could easily disorient new users. (ie. having "Explore" in the headline of our new "About" page, when the 'explore' link is right above in the top nav)

1) Gallery search - good point. Would love to walk through this with you.

2) Help – I like the idea of a buffer help page, but that is scope creep, and I'd file as a followup [hold] bug. Please don't lose that work!

2) Responsive nav – plan sounds good. we would need to start that dev asap so I would file this as followup bug asap.

Bonus) Events – I agree we should make local events easier to get to. Not sure this is the fix I'd like to see though, let's talk it through.

We also need to make sure the community/teach team is on board with this transitional IA.

Comment 23

[Matthew Willse [:mattheww]]

Created attachment 8527902 [details]
Transition IA

Related bugs filed and noted on the mockups. I don't see any blockers. 
https://redpen.io/p/zo4642e14e22e6d79d

Next steps: 
 - feedback from Community team
 - review
 - make it so

Comment 24

[Michelle Thorne]

Love the simplicity. Nice transition! 

Although the Help page is out of scope, shall we keep the Contact button of the current site? 

It points to: "mailto:[e-mail]" and this address continues to be monitored by Lucy and Amira. We might want to keep that up for the inevitable q's as we transition and to offer people a more responsive non-SUMO way to get in touch.

Comment 25

[Andrew Sliwinski:thisandagain]

Really good point Michelle. Happy to keep "Contact" in the footer for now.

Comment 26

[Bobby Richter [:secretrobotron]]

Cassie & Michelle have raised some concern about teach disappearing into the footer suddenly.
- Should we add Teach to the primary nav until Jan/Feb, or will that create dependency?
- Maybe, instead, we add an info box (like the language one) to notify previously-logged-in users that Teach is moving.
- Before & after the design happens, we should send an email blast to relevant lists to notify users.

Comment 27

[Cassie McDaniel [:cassiemc]]

Comment on attachment 8527902 [details]
Transition IA

Looks great. Really appreciate how well-organized this is, Matthew – the scope and dependencies are super clear, very confident we'll have a smooth transition.

My UI nits (comments on redpen) are little and not blockers.

My only "Hmmmm" would be whether or not 'Teach' would make a better main nav link w/ dropdowns during our transitional phase, to reduce "WHERE DID THAT THING GO" confusion.

Comment 28

[Andrew Sliwinski:thisandagain]

Good point Cassie. Keeping "Teach" in the primary nav sounds like a good idea for now with the plan to move it to the footer some time in Q1.

Comment 29

[Bobby Richter [:secretrobotron]]

Excellent!

@matt: mind adding a sketch of Teach in the primary nav that Aki can reference to implement?

Comment 30

[Bobby Richter [:secretrobotron]]

nvm. see it here: https://redpen.io/bn51489ecf8bc84dc8