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.

Swol spinner
On Home

Firefox wouldn't be able to live in that spot - that's reserved for tabzilla 2.0 functionality

Sean over 6 years ago
Edit Delete
Jen Bertsch
Swol spinner
On 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 over 6 years ago
Edit Delete
Jen Bertsch
Swol spinner
On Home

I don't think we can include images with the events

Jen Bertsch over 6 years ago
Edit Delete
Jen Bertsch
Swol spinner
On Home

Open question for Mozilla folks: Do we need promotional areas on the homepage?

Jen Bertsch over 6 years ago
Edit Delete
Jen Bertsch
Swol spinner
On 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 over 6 years ago
Edit Delete
Jen Bertsch
Swol spinner
On Advocacy

I like the optional blog content module

Jen Bertsch over 6 years ago
Edit Delete
Brandon Arnold
Swol spinner
On Advocacy

Sub nav may not be long lasting.

Brandon Arnold over 6 years ago
Edit Delete
Brandon Arnold
Swol spinner
On Advocacy

Won't have security, advertising, surveillance pages at launch

Brandon Arnold over 6 years ago
Edit Delete
Brandon Arnold
Swol spinner
On Surveillance

Not sure if this screen is necessary, but mozilla will discuss internally.

Brandon Arnold over 6 years ago
Edit Delete
Swol spinner
On 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 over 6 years ago
Edit Delete
Jen Bertsch
Swol spinner
On Advocacy

+1 to Holly's comment here

Jen Bertsch over 6 years ago
Edit Delete
Jen Bertsch
Swol spinner
On 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 over 6 years ago
Edit Delete
Jen Bertsch
Swol spinner
On Home

Could we experiment with putting more dynamic content (like the social feed or the events) higher on the page?

Jen Bertsch over 6 years ago
Edit Delete
Jen Bertsch
Swol spinner
On Home

^In our upcoming user testing

Jen Bertsch over 6 years ago
Edit Delete
Swol spinner
On 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 over 6 years ago
Edit Delete
Swol spinner
On 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 over 6 years ago
Edit Delete
Jen Bertsch
Swol spinner
On 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 over 6 years ago
Edit Delete
Jen Bertsch
Swol spinner
On Education

Same notes about removing the "ways to get involved" section

Jen Bertsch over 6 years ago
Edit Delete
Jen Bertsch
Swol spinner
On Education

Note for all 3 landing pages: blog posts won't have associated images

Jen Bertsch over 6 years ago
Edit Delete
Swol spinner
On 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 over 6 years ago
Edit Delete
Swol spinner
On 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 over 6 years ago
Edit Delete
Swol spinner
On 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 over 6 years ago
Edit Delete
Swol spinner
On 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 over 6 years ago
Edit Delete
Swol spinner
On Advocacy

order of content looks right to me.

Dia over 6 years ago
Edit Delete
Swol spinner
On 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 over 6 years ago
Edit Delete
Jen Bertsch
Swol spinner
On 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 over 6 years ago
Edit Delete
Jen Bertsch
Swol spinner
On Home

We also talked about shrinking the height of the "Mozilla is" section a bit to get to the pillars faster.

Jen Bertsch over 6 years ago
Edit Delete
Jen Bertsch
Swol spinner
On 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 over 6 years ago
Edit Delete
Jen Bertsch
Swol spinner
On 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 over 6 years ago
Edit Delete

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.

Brandon Arnold
Swol spinner
On Home

Add a banner for Firefox

Brandon Arnold over 6 years ago
Edit Delete
Brandon Arnold
Swol spinner
On Home

Not the specific Browser, but the firefox brand

Brandon Arnold over 6 years ago
Edit Delete
Jen Bertsch
Swol spinner
On Home

This one feels super busy to me.

Jen Bertsch over 6 years ago
Edit Delete
Jen Bertsch
Swol spinner
On Home

In the past, we have struggled with what the benefit of pledging to support the manifesto is to the person who makes the pledge.

Jen Bertsch over 6 years ago
Edit Delete
Jen Bertsch
Swol spinner
On About

Love the what we do tiles and what we make circles

Jen Bertsch over 6 years ago
Edit Delete
Jen Bertsch
Swol spinner
On About

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.

Jen Bertsch over 6 years ago
Edit Delete
Swol spinner
On About

+1 to the hierarchy. This helps to communicate that we are more than a browser. What we create stems from what we believe.

Holly over 6 years ago
Edit Delete
Jen Bertsch
Swol spinner
On About

This page definitely needs an explicit participation CTA

Jen Bertsch over 6 years ago
Edit Delete
Jen Bertsch
Swol spinner
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 over 6 years ago
Edit Delete
Brandon Arnold
Swol spinner
On Landing - Advocacy

Is advocacy education or participation.

Brandon Arnold over 6 years ago
Edit Delete
Brandon Arnold
Swol spinner
On Landing - Advocacy

More participation, rather than than sharing.

Brandon Arnold over 6 years ago
Edit Delete
Jen Bertsch
Swol spinner
On Landing - Advocacy

I would prioritize the person with the "i am a mozillian and i...." statement over the tiles.

Jen Bertsch over 6 years ago
Edit Delete
Swol spinner
On Home

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.

Sean over 6 years ago
Edit Delete
Brandon Arnold
Swol spinner
On Landing - Advocacy

Learn, Donate (Heavier), Email Congress

Brandon Arnold over 6 years ago
Edit Delete
Swol spinner
On About

+1 on the above. The tiles over top of the clean background page could mirror the bold color feel of the current homepage look.

Sean over 6 years ago
Edit Delete
Brandon Arnold
Swol spinner
On Landing - Advocacy

Email Address collection.

Brandon Arnold over 6 years ago
Edit Delete
Swol spinner
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 over 6 years ago
Edit Delete
Swol spinner
On Landing - Advocacy

Things that we advocate for can be topical and change with current events.

Holly over 6 years ago
Edit Delete
Swol spinner
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 over 6 years ago
Edit Delete
Brandon Arnold
Swol spinner
On Landing - Advocacy

Community Quilt as the grid squares

Brandon Arnold over 6 years ago
Edit Delete
Jen Bertsch
Swol spinner
On Home

I like the simplicity of this version.

Jen Bertsch over 6 years ago
Edit Delete
Jen Bertsch
Swol spinner
On Home

(well, of the top 4 sections)

Jen Bertsch over 6 years ago
Edit Delete
Swol spinner
On Home

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.

Holly over 6 years ago
Edit Delete
Swol spinner
On Home

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.

Sean over 6 years ago
Edit Delete
Swol spinner
On Home

Top are of the page could also reflect a particular campaign, as long as it compliments/supports the Mozilla brand.

Holly over 6 years ago
Edit Delete
Brandon Arnold
Swol spinner
On Home

User Tests: Would users give them their email.

Brandon Arnold over 6 years ago
Edit Delete
Swol spinner
On About

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.

Holly over 6 years ago
Edit Delete
Swol spinner
On Home

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.

Sean over 6 years ago
Edit Delete
Jen Bertsch
Swol spinner
On About

This hierarchy and the stories of Mozillians really resonates with me

Jen Bertsch over 6 years ago
Edit Delete
Swol spinner
On About

Really like this page.

Sean over 6 years ago
Edit Delete
Swol spinner
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 over 6 years ago
Edit Delete
Jen Bertsch
Swol spinner
On Landing - Advocacy

I do like the secondary nav

Jen Bertsch over 6 years ago
Edit Delete
Jen Bertsch
Swol spinner
On Landing - Advocacy

I'm curious to know from Dia if this fits with her ideas of how to talk about advocacy

Jen Bertsch over 6 years ago
Edit Delete
Swol spinner
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 over 6 years ago
Edit Delete
Jen Bertsch
Swol spinner
On Home

[sidenote: we need to not use the M in a circle for trademark reasons. We are phasing it out on the site.]

Jen Bertsch over 6 years ago
Edit Delete
Jen Bertsch
Swol spinner
On About

CTA needs to be higher on the page

Jen Bertsch over 6 years ago
Edit Delete
Jen Bertsch
Swol spinner
On About

Maybe Manifesto module instead of "I want to" module

Jen Bertsch over 6 years ago
Edit Delete
Jen Bertsch
Swol spinner
On Landing - Advocacy

CTA needs to be higher on the page

Jen Bertsch over 6 years ago
Edit Delete
Jen Bertsch
Swol spinner
On Landing - Advocacy

How flexible would this be to pull in dynamic content like advocacy blog posts?

Jen Bertsch over 6 years ago
Edit Delete
Jen Bertsch
Swol spinner
On About

I like the what we believe/what we do/what we make hierarchy

Jen Bertsch over 6 years ago
Edit Delete
Jen Bertsch
Swol spinner
On Landing - Advocacy

Needs a more explicit participation CTA module higher on the page

Jen Bertsch over 6 years ago
Edit Delete
Jen Bertsch
Swol spinner
On Home

Would like to explicitly mention the 4 pillars in the second section.

Jen Bertsch over 6 years ago
Edit Delete
Jen Bertsch
Swol spinner
On Landing - Advocacy

The more I see the "pledge to support the manifesto

Jen Bertsch over 6 years ago
Edit Delete
Jen Bertsch
Swol spinner
On Landing - Advocacy

module, the more open I am to it :)

Jen Bertsch over 6 years ago
Edit Delete
Swol spinner
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 over 6 years ago
Edit Delete
Swol spinner
On About

This page works for me (with an added CTA above the fold). I like the hierarchy.

ErikaD over 6 years ago
Edit Delete
Swol spinner
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 over 6 years ago
Edit Delete
Swol spinner
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 over 6 years ago
Edit Delete
Swol spinner
On Home

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.

ErikaD over 6 years ago
Edit Delete
Swol spinner
On About

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.

ErikaD over 6 years ago
Edit Delete
Swol spinner
On About

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.

ErikaD over 6 years ago
Edit Delete
Swol spinner
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 over 6 years ago
Edit Delete
Swol spinner
Story ball Shadow Story bowtie
Get Feedback On Your Work
Notebooks allows you to quickly collect feedback in context. Click and drag on the screen to leave an annotation.
Collaborate With Your Team
Leaving notes for yourself? Talking into an empty room? Are you crazy?! Notebooks lets your team collaborate via sharing.
Great, now get in there and try it out!
Use the sample project provided here to get a “feel” for how Notebooks works. Leave two annotations to complete the demo.
Get Me Outta Here Continue
×
  1. Before we start...

    You can share your project with your team at any time in the process. Go ahead, click the button, c'mon.

  1. 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.

;

To view this page and add comments, please tell us your name, because anonymous comments are lame. (heh)


×