[Kilimanjaro]: Header Image for Wiki

RESOLVED FIXED

Status

RESOLVED FIXED
7 years ago
6 years ago

People

(Reporter: tshahian, Assigned: ltom)

Tracking

Details

Attachments

(3 attachments)

(Reporter)

Description

7 years ago
Filing this bug to help us stay organized.  This is for the landing page / dashboard design of Kilimanjaro.

Chris More has set up an etherpad to outline the project:
https://webprod.etherpad.mozilla.org/Kilimanjaro-dashboard-2012?

Current design direction:

* Simple splash page.
* Mostly static with some basic motion.
* Tabzilla at the top.


-----------------
HERO SPACE:

* Illustration taking inspiration from the Kilimanjaro summit sign posts.  Each sign would carry copy representing content blocks on the page.  Interaction could include basic hover states or anchor links to those respective content blocks.

* We'd also like to include some dynamic content in the form of clouds.  Lee will illustrate clouds as part of the graphic, with independent "puffs" of cloud to animated to hover across the screen.  Just a touch of motion, basic stuff from an implementation standpoint - I hope.  Chris, lets discuss!

* We also need to present the project "Kilimanjaro" as a nice header + tagline.  Lee is working on a cool type treatment for this.


-----------------
BODY CONTENT:

* Layered blocks of content:  1. About Kilimanjaro, 2. How to get involved, 3. Schedules and weekly updates, and 4. Project Trains. 

* Each of these blocks will have: a short block of text to explain the content, along with a list of links to various related pages, sites, wiki's, etc.


-----------------
FOOTER:

* If possible, it would be great to include a little campsite at the base of the page as a fun footer for folks to see if they scroll down, or are viewing on larger screens.  This is a nice to have, vs. a priority for launch.


-----------------
INTERACTIONS:

* As mentioned above, we'd like to include some ambient movement via clouds.  Imagine something like this:  http://toriseye.quodis.com/#firefox

* Basic hover states

* If possible, would be great to allow the page to respond to time zones and display a light or dark design to echo day/night.  nice to have, not a priority.

* If the above is possible, it would be great to also add some burning light inside the campsite / tents in the night-time scenario.  Just a fun easter egg type of add, vs. a must-have of course.


-----------------
NEXT STEPS:

* Hand off basic design by this Friday.  Lee is doing his best.
* We may FPO the hero space and drop that in next week.
* Need to identify the URL / where this will live.
* cc-ing Matej so he's in the loop and can jump in with quick copy tweaks as needed.
(Reporter)

Updated

7 years ago
Assignee: tshahian → ltom
(Reporter)

Comment 1

7 years ago
Created attachment 612307 [details]
Snapshot of Content

Rough wireframe of content from Pete.  Not Final content or copy.

Comment 2

7 years ago
Pete, a few questions:

1) Will this landing page need to be translated in any different locales for launch? 

2) How about the URL of http://www.mozilla.org/kilimanjaro?

3) What does April 13th coincide with for this page release?

4) If the 13th is missed, can we fall back to a wiki page with the important information until the page is complete?

Comment 3

7 years ago
thanks Chris

#1 - I'll check with Chris Beard and get back to you asap today

#2 - Is the question for #2 the same as the question for #1?

#3 - 4/13 allows us to introduce the site in the Monday meeting (4/16) to all Mozillians

#4 - Are there factors that we should be aware of now that would prevent us from getting this page live by 4/13?  Launching with a wiki page does not seem to match the scope, ambition, or importance of this initiative to the organization.  

thanks

Updated

7 years ago
Summary: Kilimanjaro Dashboard → Kilimanjaro Dashboard / Landing Page

Comment 4

7 years ago
(In reply to pscanlon@mozilla.com from comment #3)
> thanks Chris
> 
> #1 - I'll check with Chris Beard and get back to you asap today

Ok, Thanks.

> #2 - Is the question for #2 the same as the question for #1?
> 

Just need to make sure that moz.org is appropriate for the dashboard.

> #3 - 4/13 allows us to introduce the site in the Monday meeting (4/16) to
> all Mozillians

Ok, makes sense.

> #4 - Are there factors that we should be aware of now that would prevent us
> from getting this page live by 4/13?  Launching with a wiki page does not
> seem to match the scope, ambition, or importance of this initiative to the
> organization. 

It is mainly the amount of development time to implement version 1.0 of the dashboard / landing page and it is subject to the final designs. We cannot proceed with building the pages out until the designs are completed and approved. Also, if it is determined that the 1.0 release will need to be localized, the L10N community will need probably two weeks to do the translations after the strings are 100% finalized.

My recommendation would be to limit the scope for the 1.0 release to the minimal amount that would also achieve the desired impact and only for en-US locale. We can include other locales and include additional functionality post-1.0. We are also using the same people who are actively involved in other project launches and one of them has been at a conference the past three days. We did not have a built in buffer for unknown-unknowns because this team didn't formally exist as it does now until this week. 

Craig Cook can build out the single landing page as long as the design can be approved by everyone by COB on Friday the 6th. If the designs introduce something that will cost a lot of developer time, we will need to quickly iterate on the design to make it feasible go live on April 13th. If we cannot limit scope, the only option would to put all other project milestones on hold and focus everyone on this.

Thanks for info and looking forward to what you find out from Chris Beard.
(Reporter)

Comment 5

7 years ago
Hey Chris.  I'm happy to share a quick sketch or chat if it helps outline the vision for the page a bit better and address your concerns.  Meanwhile, Lee is working away at an actual mockup which he can share as soon as it's in a good place.

It is definitely intended to be a mostly static splash page, though we haven't succeeded if it doesn't include some motion and showcase of technology to bring the page to life.  

The scope of these are fairly simple too.  Are the interactions I mentioned above of concern to you?  The main priority among those is having clouds animated across the page, and basic hover states.  Please let me know if my description and reference helped, and if there's anything else we should be aware of when it comes to designing this.  

We're committed to getting the design over to you as soon as possible, by the stated dates, and appreciate the tight timing here.  But I'm also looking for commitment from your team to build out the page as designed, with the inclusion of these key dynamic elements.  Thanks again (and in advance) for everything.

Comment 6

7 years ago
Hey Tara.

We should be able to do a static page and even the clouds for a 1.0 release. The day/night and camp fire at the bottom would more likely have a post release improvement along with making the page more dynamic. 

The sooner you or Lee can share a sketch or low-fidelity image, the more we can feel comfortable with the date.

Thanks!

Comment 7

7 years ago
If we're talking about adding features to show off technologies, I encourage you to include the web productions team on what and how we are adding. Not only can we give insight as to what is easy to add and yet still visual, but we can also make sure that that the technologies that we are trying to evangelized are included as much as possible.
(Reporter)

Comment 8

7 years ago
Thanks Stormy.  What is the best way to do that aside from the discussion in this bug?  

We are planning on sharing a rough in-progress comp with Chris tomorrow and discuss ideas/feedback.  Did you want to be included on that call?

Comment 9

7 years ago
Hi Stormy.  Regarding the technologies we'd like to add as features on the page, please - it's basically css / html animations of clouds and a hover state on the main navigation.  

From this bug thread
* ...we'd like to include some ambient movement via clouds.  Imagine something like this:  http://toriseye.quodis.com/#firefox

* Basic hover states

Thanks
Pete
(In reply to Chris More [:cmore] from comment #2)
> Pete, a few questions:
> 
> 1) Will this landing page need to be translated in any different locales for
> launch? 

Page will not be translated into different languages / locales for launch.  Per Chris Beard, locales may choose to localize parts if it helps with recruiting / aligning local efforts - but we will not need the global site (this landing page) to be localized.  Thanks

> 
> 2) How about the URL of http://www.mozilla.org/kilimanjaro?
> 
> 3) What does April 13th coincide with for this page release?
> 
> 4) If the 13th is missed, can we fall back to a wiki page with the important
> information until the page is complete?
Hi Chris - a quick question.  

We'd also like to provide current Wiki page owners for Kilimanjaro related-initiatives with a header image for their Wiki page (to tie the initiative together).  

Are you aware of any standard dimensions for header images on Wiki pages?  A point of comparison would be the "Draft" section on the current wiki page for Kilimanjaro (https://wiki.mozilla.org/Kilimanjaro).  

Thanks
Pete

Comment 12

7 years ago
Hey Pete.
 
> Page will not be translated into different languages / locales for launch. 
> Per Chris Beard, locales may choose to localize parts if it helps with
> recruiting / aligning local efforts - but we will not need the global site
> (this landing page) to be localized.  Thanks

Ok, good. This will help the timeline. We'll still plan for L10N in the future, but for now we'll focus on shipping en-US
  
> Are you aware of any standard dimensions for header images on Wiki pages?  A
> point of comparison would be the "Draft" section on the current wiki page
> for Kilimanjaro (https://wiki.mozilla.org/Kilimanjaro).  

Good question. The wiki by default has a liquid layout for the body content where the content expands to 100% of the width of the window for basic text content (headings, text, tables, etc.). 

Images can be inserted into the wiki and they can serve as header images or in-line images. When you insert an image, it is fixed size (in pixels) and fixed position (left, right, center, none) and there is not complete control over it like in normal web design. Since the wiki is mainly to be used for text content, it is not optimized for a responsive design layout where it would adjust the layout according to the screen size of the viewer.

My recommendation is:

* A hero image that is left or right aligned with in-line text.

OR

* A header banner image left aligned with max dimensions of 800px wide by 200px high.

Lee Tom could probably take an image or create a banner from the moz.org landing page design and use it as header image for the wiki to tie to the themes together. If a transparent background PNG was used as the header image on the wiki, the edges of the banner would be less apparent and look better then a block image with a different background.

Comment 13

7 years ago
(In reply to Tara (musingt) from comment #8)
> We are planning on sharing a rough in-progress comp with Chris tomorrow and
> discuss ideas/feedback.  Did you want to be included on that call?

Hi Tara and Pete.

I have Craig Cook lined up to do the development of the landing page. We will be able to confirm the scope once we see the near-final comps and that should be more apparent after today's meeting. Since the timeline is tight and my team is very busy with other Engagement projects, I just want to keep the scope to the must-have features for the first release.

Looking forward to seeing Lee's designs!
(Reporter)

Comment 14

7 years ago
Hey guys, wanted to pose a "quick" summary of where we are and next steps so everyone is aligned: 


URL / IA:

* This is still in discussion and will need to be finalized asap by Monday so we can stay on track.  

* Plan was to keep the user flow within the wiki by doing a rewrite and using wiki.mozilla.org/kilimanjaro.  However, IT has expressed concerns with this as it may cause massive performance issues and bring down the wiki altogether.  [ TBD ]


DESIGN:

* Lee is to finalize as much of the structure of the site as possible, and will post his work by eod today.  As long as the basic framework remains the same, updates can be made next week.

* He's already re-illustrated most of the site from scratch, so we're in good shape, but some of the content still needs to be finalized before moving forward.



IMPLEMENTATION:

* Craig is signed up to build this for us.  
* Plan is to have ChrisM and Craig review Lee's files today and start building out on Monday.
* We'll set up regular / daily check-ins to follow progress and share feedback as needed.  ChrisM is to advise on the best time/method of doing this once Craig dives in.
* Goal is to have this done by 4/13, and announced on 4/16.


INTERACTIONS:

* ChrisM has committed to animated clouds (subtle movement that's cool vs. distracting), along with basic hover states as needed. 
* Based on Lee's new design, we can explore other potential animations/motion, but otherwise the above is our requirement for first release.

----------
Please ping with any questions,comments or concerns.
(Assignee)

Comment 15

7 years ago
Created attachment 613033 [details]
kilimanjaro dashboard mockup

Hi all,
I hope you like how this has taken shape - probably looks much different than you remember. A couple of open design issues:

Page Title (possible names)
- The Kilimanjaro Event
- The Kilimanjaro Project
- Project: Kilimanjaro

Subhead or Tagline
- should help clarify what this is, and could also affect layout slightly

Chris More, I owe you rollover styles etc. but I figured I would post this mockup to see if everyone is on-board and feeling good about this so far. When everything is a go, I'll clean up this PSD, and the rest of the deliverables ASAP. Thanks! Lee

Comment 16

7 years ago
I really like this!!

Comment 17

7 years ago
In addition to performance issues with redirecting a wiki URL to a static URL, there are the user/community issues to consider. 

Part of how Mozilla works is by keeping project info on a wiki that everyone can edit. (People do not edit crazily. But the ability to edit is important.)

If we have a wiki URL that redirects to a non-wiki page, I fear that won't feel very open and will break our regular workflow. It's a user experience/project issue.

Comment 18

7 years ago
Hey Stormy. We worked out a plan on Friday to make the page Lee is illustrating here live at wiki.mozilla.org/Kilimanjaro, so no redirects needed. I'll let Tara fill in the details.

Comment 19

7 years ago
But will it be a wiki page? Putting a non wiki page into a wiki url has user experience and community involvement issues. I don't think it's a very "open" way to do things.
Hi Lee.  This looks great.  

The Wiki page currently calls this "The Kilimanjaro Event" so let's go with that for consistency. The Subhead will be defined in reviews with Chris and Damon this week.  

Many thanks all.
(Reporter)

Comment 21

6 years ago
Hey Stormy

Totally understand what you're saying here and thanks for expressing those concerns.  

If it helps ... the scope of this landing page is simply a splash page that will be fairly static and not require much editing.  It's just intended to serve as an entry way into the various components of Kilimanjaro that is perhaps a little more friendly and visually appealing than a basic wiki.  Given the scope and scale of the Kilimanjaro Event, this felt appropriate and also a better way of rallying everyone around the initiative(s).

Another reason we wanted to place this on a wiki re-write was simply to help keep the flow consistent and within the wiki ecosystem vs. it being on its own isolated page.  It was a simple solution and made more sense from an IA perspective.  As you can see on Lee's mockups, the landing page will have links to the various wiki and bugs per component that will be open and editable as expected.  It's just a springboard vs. a page that will have deep engagement. 

So, a few additional/summary notes:

* The proposed page is just a design replacement for a top-level wiki page.
* The re-write seemed like a simple/appropriate solution and is what Chris Beard had asked for.
* We're not planning for this page to be a top level Marketing page - so the amount of traffic to it would not be great. 
* We don't plan to promote this page outside of our existing internal and Contributor communication channels (newsletters, etc.)
* Based on the last two notes above, Chris More has signed off on this not posing any performance issues and as of Friday, plan is to move forward with the wiki.mozilla.org/kilimanjaro

Hope that helps. Happy to answer any other questions.

Comment 22

6 years ago
Hi Tara, Given all you've said, then it should just be a regular wiki page. Make a fancy landing page else where that points to it. But wiki pages should be wiki pages and nothing you listed gives any reasons for making it a non wiki page.

It's not just performance issues, it's how we work as a project. We are breaking a way our community does work and we don't need to.

Comment 23

6 years ago
Hey Stormy. I don't want to shut down discussion on this topic, but it's probably best brought up with Chris (vs here).
(Assignee)

Comment 24

6 years ago
Posting PSD here for Chris More and Craig:
http://cl.ly/0c3x1B2u101p2A0c1C1L

Let me know if you have any questions. FYI - I left notes within the PSD that contain color values etc. Feel free to contact me with any questions and/or additional assets you may need. Thanks!
(Reporter)

Updated

6 years ago
Status: NEW → ASSIGNED
Summary: Kilimanjaro Dashboard / Landing Page → [Kilimanjaro]: Dashboard / Splash Landing Page
(Reporter)

Updated

6 years ago
Blocks: 743837

Comment 25

6 years ago
(In reply to Lee Tom from comment #24)
> Posting PSD here for Chris More and Craig:
> http://cl.ly/0c3x1B2u101p2A0c1C1L
> 
> Let me know if you have any questions. FYI - I left notes within the PSD
> that contain color values etc. Feel free to contact me with any questions
> and/or additional assets you may need. Thanks!

Thanks, Lee. I have filed bug 744020 for the creation of the page.
Depends on: 744020

Comment 26

6 years ago
I've bounced this off quite a few people and the universal feeling seems to be that if we want to do it this way (non wiki page in a wiki url), being able to edit it, both for community reasons and maintainability, is key.

So maybe the text/links could be pulled from a (different) wiki page and embedded? That could also be done in the 2nd round.

Alternatively, Chris More suggested just making this a temporary page and reverting to a regular wiki page in a month or two, for maintainability.

(Not trying to be difficult here. I'm just really worried about having a wiki page that is not editable.)

Comment 27

6 years ago
+1 on trying not to make a new precedence as a wiki URL should be a wiki page. I am going to imagine that the community and employees are going to question why are we presenting a non-wiki page in a wiki URL. Making a non-wiki page editable like a wiki will be additional work and probably not possible by Friday with the requirements of this page (animations + design + layout).

My recommendation is to only do this non-wiki page for the month of April, and then revert back to a normal wiki homepage from that point forward. The websites team should not be responsible for updating this page after go-live when we have a system for user-editable pages, i.e. the wiki.

Comment 28

6 years ago
Hi all. Stormy & Chris, thanks for raising the concerns. Given that information, it seems best to scale this project way back.

Instead, we'll just add a header image to wiki.mozilla.org/Kilimanjaro. We'll create something similar to be placed at the top of the various sub-pages within that structure to make it clear they're all part of the same master project.

Lee has a work in progress going that looks something like this:
http://cl.ly/0a103N3A1H3h3b2Y2q1v

I'm going to leave this bug open (changing the title) until the header images are nailed down, but am going to close bug 744020.

Please let me know if you have any questions.
Summary: [Kilimanjaro]: Dashboard / Splash Landing Page → [Kilimanjaro]: Header Image for Wiki
(Reporter)

Comment 29

6 years ago
Thanks John, I had already opened a bug for the wiki, here: bug #743823
I'll go ahead and close that, Lee can pull the specs from there.
(Reporter)

Updated

6 years ago
Duplicate of this bug: 743823

Comment 31

6 years ago
Hi John. Thanks for the update and embedding the images into the wiki should be straight forward.
Slater asked me to work on some tag lines for this earlier. Below is what I've come up with so far. I tried to do a bit of a range, some more linked to the name, some more direct, some perhaps overly hokey. Let me know if there's anything that's working or at least in the right direction and I can work on some more options in the morning.


Up is the only way forward.

The Web is the platform. This is the plan.

The Web is the platform. This is how we get there.

The Web is the platform. And we’re building it together.

The Web is the platform. And we’re building it one bug at a time.

Realizing the Web as the platform.

Towards the summit of our collective achievements.

All hands on the Web.

Riding trains and squashing bugs all the way to the top.

Comment 33

6 years ago
Thanks Matej. This is my favorite so far:

> The Web is the platform. This is the plan.

Any other thoughts?
(Reporter)

Comment 34

6 years ago
I like these two:

>The Web is the platform. This is the plan.

>The Web is the platform. This is how we get there.

Though, the shorter probably the better (for Lee's sake when it comes to forming it into a badge icon).

Comment 35

6 years ago
One thing to remember is that Kilimanjaro is just the first milestone --albeit a critical one-- on the path to fully realizing the "Web /is/ the platform".  So I would favour tag lines that are catchy and memorable but also keep that in mind.

Comment 36

6 years ago
(I believe Damon was thinking that once we ascend Kilimanjaro, that we're going to point to the next mountain and strike out toward it.)
OK, here are some more options. Let me know if I'm getting warmer.


The Web is the platform. This is the first step.

The Web is the platform. This is the beginning.

The Web is the platform. And we’re on our way.

The Web is the platform. The climb starts here.

The Web is the platform. The path starts here.

The Web is the platform. And the top is only the beginning.

The Web is the platform. And there’s nowhere to go but up.

The Web is the platform. And we’re getting there, one climb at a time.

The first step to making the Web the platform.

Where we start building the Web as the platform.

Comment 38

6 years ago
Thanks Matej. I really like this one:

> The Web is the platform. The path starts here.

I caught up with Chris, and he agreed, but we'd like to get sign-off from a few other key folks before proceeding. Stay tuned for more on that soon.
(Assignee)

Comment 39

6 years ago
Created attachment 614612 [details]
Kilimanjaro Wiki Header PNG

Attached is the K9o Wiki header graphic sized as 800 x 200px PNG

Comment 40

6 years ago
Awesome, thanks Lee. Resolving this.
Status: ASSIGNED → RESOLVED
Last Resolved: 6 years ago
Resolution: --- → FIXED

Comment 41

6 years ago
Do we want to add this wiki page to test?

https://wiki.mozilla.org/Kilimanjaro

Comment 42

6 years ago
(In reply to Chris More [:cmore] from comment #41)
> Do we want to add this wiki page to test?
> 
> https://wiki.mozilla.org/Kilimanjaro

Yes! In fact I'm trying to do that now but am getting a weird "File extension does not match MIME type." error when I try to upload. Any chance you could try it from your machine?
You need to log in before you can comment on or make changes to this bug.