Mozilla.org
Lo-Fi Sketches
All
-
Add New Version
-
Version 2January 6, 2016
Lo-fi Sketches
Here's what we focused on:
• We took the feedback we heard and the team's preferences and refined the lofi sketches.
• We created more landing pages and a 3rd level page example to get an idea of how the template and flow would work.
• Adding in more opportunities to show stories of individual people and CTAs in the top.
29
-
Version 1January 6, 2016
Lo-fi Sketches
Here's what we focused on:
• Sketching the homepage, about, and an example landing page (the advocacy page) and exploring how the elements could work together.
• Exploring the 2 directions and sketching the pages with the different focuses in mind.
• Layering on some more detail and exploring what some of the content would be.
52
-
Version 2January 6, 2016
Lo-fi Sketches
Here's what we focused on:
• We took the feedback we heard and the team's preferences and refined the lofi sketches.
• We created more landing pages and a 3rd level page example to get an idea of how the template and flow would work.
• Adding in more opportunities to show stories of individual people and CTAs in the top.29 -
Version 1January 6, 2016
Lo-fi Sketches
Here's what we focused on:
• Sketching the homepage, about, and an example landing page (the advocacy page) and exploring how the elements could work together.
• Exploring the 2 directions and sketching the pages with the different focuses in mind.
• Layering on some more detail and exploring what some of the content would be.52
Lo-fi Sketches
Here's what we focused on:
• We took the feedback we heard and the team's preferences and refined the lofi sketches.
• We created more landing pages and a 3rd level page example to get an idea of how the template and flow would work.
• Adding in more opportunities to show stories of individual people and CTAs in the top.
Home
11 Comments
Firefox wouldn't be able to live in that spot - that's reserved for tabzilla 2.0 functionality
Jen Bertsch
I'm super interested in asking in user testing if the rotating "mozilla is...." word helps users understand more about what mozilla is/does
Jen Bertsch
I don't think we can include images with the events
Jen Bertsch
Open question for Mozilla folks: Do we need promotional areas on the homepage?
Jen Bertsch
Could we experiment with putting more dynamic content (like the social feed or the events) higher on the page?
Jen Bertsch
^In our upcoming user testing
I know I"m late on this feedback, but the Mozilla is.... approach doesn't work for me. It perpetuates our challenge about being hard to understand. I'd rather open with a statement. Some options: Mozilla exists to keep the Internet open, and put the power back in your hands. OR Mozilla brings people together to keep the Internet open for good. OR
I'd like the home page to feel more alive & dynamic, and reflect the breadth and depth of activity, big and small, around the world. This feels a bit redudant with the About Mozilla page.
Agreed that the top line message must be a big AND clear statement about our purpose in the world and then quick examples of the work and places to go. And, this page feels alot about us. I think that gets solved in the copy. I'm not sure that the social feed and events lives here. as it's almost too deep too quick for me.
Jen Bertsch
One thing Mary Ellen and I talked about when we discussed this sketch on Friday is something Mitchell says "We will know Mozilla is a success when there are so many people all of the world working in our name that we won't be able to keep track of them." So it is OK if the homepage is a little chaotic. I like MEM's idea of changing the "Mozilla is..." into a static sentence rather than a rotating word (althogh we could try both in user testing?).
Jen Bertsch
We also talked about shrinking the height of the "Mozilla is" section a bit to get to the pillars faster.
-
1
100%
-
0
0%
About
2 Comments
Again this so close to the main landing page. Feels like the main page needs to be these top line messages and the about page can be more granular. What we do can be more like "what we've done/impact" and the mozillians section is more about our participation and shared values of the community- open and free vs. closed and controlled.
so, content order should be 1)top line message, then what we make and have done/impact/do (i see a story about firefox's birth and continual distruption of closed systesm) , then community story then CTA. no "what we make" separate from waht we do.
-
0
0%
-
0
0%
Advocacy
7 Comments
Jen Bertsch
For launch we won't have detailed information about the sub pages (security, surveillance etc) so good to keep that part of the design modular/optional
Jen Bertsch
I like the optional blog content module
Brandon Arnold
Sub nav may not be long lasting.
Brandon Arnold
Won't have security, advertising, surveillance pages at launch
To reduce # of CTAs and things to do on this page, perhaps we can remove "Ways to get involved". Display ways you can take action within the issue blocks themselves. So in the Security block have primary CTA/button be a way you can take action. If they are not ready to take action, a "learn more" link would be below the Take Action CTA that would bring them to a campaign detail page to learn more.
Jen Bertsch
+1 to Holly's comment here
order of content looks right to me.
-
0
0%
-
0
0%
Surveillance
5 Comments
Brandon Arnold
Not sure if this screen is necessary, but mozilla will discuss internally.
Jen Bertsch
Mary Ellen and I discussed the page in more detail. We both agreed that while this issue page needs one strong CTA, it also needs to be a little more information heavy.
Jen Bertsch
We agree one strong CTA will do more to drive participation than multiple CTAs. Plus a typical issue will really only have one CTA. And the issues we work with are complicated, so need a more information-heavy template.
Jen Bertsch
This *Might* be an example of the amount of text needed to explain an issue https://act.eff.org/action/not-one-more-day-of-nsa-mass-spying-on-our-phone-records
Jen Bertsch
Just like we talked about brining the 1 or 2 of form fields for a "donate" CTA onto the mozilla.org page and then passing the info to the outside-hosted page, we could do the same for an advocacy CTA and pass email or phone number to our partner-hosted form with the petition or phone call script.
-
0
0%
-
0
0%
Education
3 Comments
Jen Bertsch
Same notes about removing the "ways to get involved" section
Jen Bertsch
Note for all 3 landing pages: blog posts won't have associated images
On this page, I'd prefert to see the webmaker, mozfest, tips above the who's doing it- the Mozillians. so the logic is Mozill is educating- here' how (maker, mozfest tips) here's who's doing it. then the get involved.
-
1
100%
-
0
0%
- 9542Views
- 100%Thumbs Up
Created on 05/29/2015 at 01:05 PM
Lo-fi Sketches
Here's what we focused on:
• Sketching the homepage, about, and an example landing page (the advocacy page) and exploring how the elements could work together.
• Exploring the 2 directions and sketching the pages with the different focuses in mind.
• Layering on some more detail and exploring what some of the content would be.
Mozillians' Voice
Mozilla + You
Home
6 Comments
Brandon Arnold
Add a banner for Firefox
Brandon Arnold
Not the specific Browser, but the firefox brand
Jen Bertsch
This one feels super busy to me.
Jen Bertsch
In the past, we have struggled with what the benefit of pledging to support the manifesto is to the person who makes the pledge.
Can this be done with our current style/layout? I'd like to see how you did this using our current homepage structure, which is fairly popular with the bold color tile grid.
I prefer the "Mozillianss voice" direction over the "Mozilla and You". That said, this still feels quite busy. The social shares don't seem valuable enough to warrant the space, and the CTA feels buried (and I'm not convinced the 'pledge' is the best CTA for landing page). I do like the top 3 sections, though.
-
1
100%
-
0
0%
About
7 Comments
Jen Bertsch
Love the what we do tiles and what we make circles
Jen Bertsch
I'm not sure I would prioritize the manifesto on the About page this much. I'd rather present it in a more accessible way.
+1 to the hierarchy. This helps to communicate that we are more than a browser. What we create stems from what we believe.
Jen Bertsch
This page definitely needs an explicit participation CTA
+1 on the above. The tiles over top of the clean background page could mirror the bold color feel of the current homepage look.
Jen Bertsch
I like the what we believe/what we do/what we make hierarchy
This page works for me (with an added CTA above the fold). I like the hierarchy.
-
2
100%
-
0
0%
Landing - Advocacy
13 Comments
Jen Bertsch
I'm curious to know from Dia if we have that much content around these things (the tiles at the top)
Brandon Arnold
Is advocacy education or participation.
Brandon Arnold
More participation, rather than than sharing.
Jen Bertsch
I would prioritize the person with the "i am a mozillian and i...." statement over the tiles.
Brandon Arnold
Learn, Donate (Heavier), Email Congress
Brandon Arnold
Email Address collection.
Again, liking bold color tile feel here. Our tiles give a community quilt feel which would be nice to retain if possible.
Things that we advocate for can be topical and change with current events.
Needs to be clear that the visitor can take action on some of these items. We shouldn't rely on the user clicking into these links to discover the fact that they can take action.
Brandon Arnold
Community Quilt as the grid squares
Jen Bertsch
Needs a more explicit participation CTA module higher on the page
Email signup should be front and center and 'donate' should be present. I'd also advocate for *one* action to be prominently highlighted.
I think the content in the top section could be feature what we've done so far, and our general position on the issue (tied to the manifesto) rather than a play-by-play of where the issue is at. The sands shift so quickly on some of these campagians due to surprise senate votes, new snowden revelations etc. We don't want to be in a position of having to contastantly update that content.
-
1
100%
-
0
0%
Home
10 Comments
Jen Bertsch
I like the simplicity of this version.
Jen Bertsch
(well, of the top 4 sections)
Nice focus on Mozilla and what we do in the hierarchy w/ a grid at the bottom of the page that can have flexible content depending on what we want to feature.
I think this is a good simple approach too, while keeping the grid below. One concern would be THE DREADED FOLD and ctas down a good distance. TO BE CLEAR: I like this, but I know the fold will come up.
Top are of the page could also reflect a particular campaign, as long as it compliments/supports the Mozilla brand.
Brandon Arnold
User Tests: Would users give them their email.
Historical background: the grid was chosen as a great way to have multiple CTAs in view pre scroll near the top o the page. I'm fine with bumping it down, but we'd be throwing those CTAs to a lower priority in the layout.
Jen Bertsch
[sidenote: we need to not use the M in a circle for trademark reasons. We are phasing it out on the site.]
Jen Bertsch
Would like to explicitly mention the 4 pillars in the second section.
The top section isn't blowing my mind. If I'm visiting this page I likely want to learn more about Mozilla, so the 2nd section is far more helpful.
-
2
67%
-
1
33%
About
8 Comments
Nice to have email as an alternative option here... if other CTAs on page are too intimidating or user doesn't have time to interact with them now... an email is a nice way to contact later when they have tie.
Jen Bertsch
This hierarchy and the stories of Mozillians really resonates with me
Really like this page.
+1 to bringing Stories to this page. Currently they are within the "contribute / get involved" page which is where people go if they want to volunteer. It would be nice to allow users who don't necessarily intent to volunteer be able to discover these as well.
Jen Bertsch
CTA needs to be higher on the page
Jen Bertsch
Maybe Manifesto module instead of "I want to" module
Again, I don't love the top section. Would prefer to start with second section. I agree that CTA (email sign-up) and 'I want to' section need to be higher.
Clarifying that reason I don't love the top section is that it feels like a lot of *copy*. Feels like "blah blah PR" whereas the section section gives me immediate information about what Mozilla actually does.
-
3
100%
-
0
0%
Landing - Advocacy
8 Comments
Jen Bertsch
I do like the secondary nav
Jen Bertsch
I'm curious to know from Dia if this fits with her ideas of how to talk about advocacy
I like the hierarchy here. "We advocate because..." > this is what we advocate for > this is one thing you can take action on to help.
Jen Bertsch
CTA needs to be higher on the page
Jen Bertsch
How flexible would this be to pull in dynamic content like advocacy blog posts?
Jen Bertsch
The more I see the "pledge to support the manifesto
Jen Bertsch
module, the more open I am to it :)
If this is the advocacy landing page, email signup and take action should be the top 2 things. All the context can come below. (and donate should be on here somewhere).
-
1
100%
-
0
0%
- 9542Views
- 91%Thumbs Up
Created on 05/27/2015 at 11:42 AM







On Landing - Advocacy
I'm curious to know from Dia if we have that much content around these things (the tiles at the top)
Jen Bertsch almost 10 years ago
Edit
On Landing - Advocacy
Is advocacy education or participation.
Brandon Arnold almost 10 years ago
Edit
On Landing - Advocacy
More participation, rather than than sharing.
Brandon Arnold almost 10 years ago
Edit
On Landing - Advocacy
I would prioritize the person with the "i am a mozillian and i...." statement over the tiles.
Jen Bertsch almost 10 years ago
Edit

On Landing - Advocacy
Learn, Donate (Heavier), Email Congress
Brandon Arnold almost 10 years ago
Edit


On Landing - Advocacy
Again, liking bold color tile feel here. Our tiles give a community quilt feel which would be nice to retain if possible.
Sean almost 10 years ago
Edit
On Landing - Advocacy
Things that we advocate for can be topical and change with current events.
Holly almost 10 years ago
Edit
On Landing - Advocacy
Needs to be clear that the visitor can take action on some of these items. We shouldn't rely on the user clicking into these links to discover the fact that they can take action.
Holly almost 10 years ago
Edit
On Landing - Advocacy
Community Quilt as the grid squares
Brandon Arnold almost 10 years ago
Edit







On About
+1 to bringing Stories to this page. Currently they are within the "contribute / get involved" page which is where people go if they want to volunteer. It would be nice to allow users who don't necessarily intent to volunteer be able to discover these as well.
Holly almost 10 years ago
Edit

On Landing - Advocacy
I'm curious to know from Dia if this fits with her ideas of how to talk about advocacy
Jen Bertsch almost 10 years ago
Edit
On Landing - Advocacy
I like the hierarchy here. "We advocate because..." > this is what we advocate for > this is one thing you can take action on to help.
Holly almost 10 years ago
Edit


On Landing - Advocacy
CTA needs to be higher on the page
Jen Bertsch almost 10 years ago
Edit
On Landing - Advocacy
How flexible would this be to pull in dynamic content like advocacy blog posts?
Jen Bertsch almost 10 years ago
Edit

On Landing - Advocacy
Needs a more explicit participation CTA module higher on the page
Jen Bertsch almost 10 years ago
Edit

On Landing - Advocacy
The more I see the "pledge to support the manifesto
Jen Bertsch almost 10 years ago
Edit
On Landing - Advocacy
module, the more open I am to it :)
Jen Bertsch almost 10 years ago
Edit
On Home
I prefer the "Mozillianss voice" direction over the "Mozilla and You". That said, this still feels quite busy. The social shares don't seem valuable enough to warrant the space, and the CTA feels buried (and I'm not convinced the 'pledge' is the best CTA for landing page). I do like the top 3 sections, though.
ErikaD almost 10 years ago
Edit

On Landing - Advocacy
Email signup should be front and center and 'donate' should be present. I'd also advocate for one action to be prominently highlighted.
ErikaD almost 10 years ago
Edit
On Landing - Advocacy
I think the content in the top section could be feature what we've done so far, and our general position on the issue (tied to the manifesto) rather than a play-by-play of where the issue is at. The sands shift so quickly on some of these campagians due to surprise senate votes, new snowden revelations etc. We don't want to be in a position of having to contastantly update that content.
ErikaD almost 10 years ago
Edit



On Landing - Advocacy
If this is the advocacy landing page, email signup and take action should be the top 2 things. All the context can come below. (and donate should be on here somewhere).
ErikaD almost 10 years ago
Edit



-
Before we start...
You can share your project with your team at any time in the process. Go ahead, click the button, c'mon.
-
It looks like you got it...
You can continue annotating this doc if you like, or you can start a new Notebook at any time with this button.
On Home
Firefox wouldn't be able to live in that spot - that's reserved for tabzilla 2.0 functionality
Sean almost 10 years ago
EditOn Home
I'm super interested in asking in user testing if the rotating "mozilla is...." word helps users understand more about what mozilla is/does
Jen Bertsch almost 10 years ago
EditOn Home
I don't think we can include images with the events
Jen Bertsch almost 10 years ago
EditOn Home
Open question for Mozilla folks: Do we need promotional areas on the homepage?
Jen Bertsch almost 10 years ago
EditOn Advocacy
For launch we won't have detailed information about the sub pages (security, surveillance etc) so good to keep that part of the design modular/optional
Jen Bertsch almost 10 years ago
EditOn Advocacy
I like the optional blog content module
Jen Bertsch almost 10 years ago
EditOn Advocacy
Sub nav may not be long lasting.
Brandon Arnold almost 10 years ago
EditOn Advocacy
Won't have security, advertising, surveillance pages at launch
Brandon Arnold almost 10 years ago
EditOn Surveillance
Not sure if this screen is necessary, but mozilla will discuss internally.
Brandon Arnold almost 10 years ago
EditOn Advocacy
To reduce # of CTAs and things to do on this page, perhaps we can remove "Ways to get involved". Display ways you can take action within the issue blocks themselves. So in the Security block have primary CTA/button be a way you can take action. If they are not ready to take action, a "learn more" link would be below the Take Action CTA that would bring them to a campaign detail page to learn more.
Holly almost 10 years ago
EditOn Advocacy
+1 to Holly's comment here
Jen Bertsch almost 10 years ago
EditOn Surveillance
Mary Ellen and I discussed the page in more detail. We both agreed that while this issue page needs one strong CTA, it also needs to be a little more information heavy.
Jen Bertsch almost 10 years ago
EditOn Home
Could we experiment with putting more dynamic content (like the social feed or the events) higher on the page?
Jen Bertsch almost 10 years ago
EditOn Home
^In our upcoming user testing
Jen Bertsch almost 10 years ago
EditOn Home
I know I"m late on this feedback, but the Mozilla is.... approach doesn't work for me. It perpetuates our challenge about being hard to understand. I'd rather open with a statement. Some options: Mozilla exists to keep the Internet open, and put the power back in your hands. OR Mozilla brings people together to keep the Internet open for good. OR
Mary Ellen almost 10 years ago
EditOn Home
I'd like the home page to feel more alive & dynamic, and reflect the breadth and depth of activity, big and small, around the world. This feels a bit redudant with the About Mozilla page.
Mary Ellen almost 10 years ago
EditOn Surveillance
We agree one strong CTA will do more to drive participation than multiple CTAs. Plus a typical issue will really only have one CTA. And the issues we work with are complicated, so need a more information-heavy template.
Jen Bertsch almost 10 years ago
EditOn Education
Same notes about removing the "ways to get involved" section
Jen Bertsch almost 10 years ago
EditOn Education
Note for all 3 landing pages: blog posts won't have associated images
Jen Bertsch almost 10 years ago
EditOn Education
On this page, I'd prefert to see the webmaker, mozfest, tips above the who's doing it- the Mozillians. so the logic is Mozill is educating- here' how (maker, mozfest tips) here's who's doing it. then the get involved.
Dia almost 10 years ago
EditOn Home
Agreed that the top line message must be a big AND clear statement about our purpose in the world and then quick examples of the work and places to go. And, this page feels alot about us. I think that gets solved in the copy. I'm not sure that the social feed and events lives here. as it's almost too deep too quick for me.
Dia almost 10 years ago
EditOn About
Again this so close to the main landing page. Feels like the main page needs to be these top line messages and the about page can be more granular. What we do can be more like "what we've done/impact" and the mozillians section is more about our participation and shared values of the community- open and free vs. closed and controlled.
Dia almost 10 years ago
EditOn About
so, content order should be 1)top line message, then what we make and have done/impact/do (i see a story about firefox's birth and continual distruption of closed systesm) , then community story then CTA. no "what we make" separate from waht we do.
Dia almost 10 years ago
EditOn Advocacy
order of content looks right to me.
Dia almost 10 years ago
EditOn Technology
again here would like to reverse the order of what we do in this space and the people examples. so the story is 1) Moz innovates 2) here's the stuff we're working on 3) here's how community is acting/endorsing. then get involved and sign up
Dia almost 10 years ago
EditOn Home
One thing Mary Ellen and I talked about when we discussed this sketch on Friday is something Mitchell says "We will know Mozilla is a success when there are so many people all of the world working in our name that we won't be able to keep track of them." So it is OK if the homepage is a little chaotic. I like MEM's idea of changing the "Mozilla is..." into a static sentence rather than a rotating word (althogh we could try both in user testing?).
Jen Bertsch almost 10 years ago
EditOn Home
We also talked about shrinking the height of the "Mozilla is" section a bit to get to the pillars faster.
Jen Bertsch almost 10 years ago
EditOn Surveillance
This Might be an example of the amount of text needed to explain an issue https://act.eff.org/action/not-one-more-day-of-nsa-mass-spying-on-our-phone-records
Jen Bertsch almost 10 years ago
EditOn Surveillance
Just like we talked about brining the 1 or 2 of form fields for a "donate" CTA onto the mozilla.org page and then passing the info to the outside-hosted page, we could do the same for an advocacy CTA and pass email or phone number to our partner-hosted form with the petition or phone call script.
Jen Bertsch almost 10 years ago
Edit