@Pginer-WMF we in Wiki Loves Monuments international team want to upgrade the look, feel, and usability of our external website http://www.wikilovesmonuments.org/ (and potentially move it to Github as a static site so national organizers can fork and reuse it more easily).

I'm wondering if you or one of the other designers have some time to spend with us to provide a set of design or mockups? If we have these assets, Slaporte has signed up to make it happen. :) If we are to make it for this year, the timeline is a bit tight. ;) The campaigns go live on September 1, but of course, if we can't make it for that deadline, this is still a worthwhile work that we would like to spend resources on.

In T172068#3529986, @LilyOfTheWest wrote:

@Pginer-WMF we in Wiki Loves Monuments international team want to upgrade the look, feel, and usability of our external website http://www.wikilovesmonuments.org/ (and potentially move it to Github as a static site so national organizers can fork and reuse it more easily).

I'm wondering if you or one of the other designers have some time to spend with us to provide a set of design or mockups?

I'm happy to help. Having more details on the target audience would be very helpful. I'm assuming the site targets photographers (amateur and professional) that don't necessarily know about Wikimedia Commons.
From a quick look to the site, I think it makes sense to improve the motivation aspects (encouraging to participate) and streamlining the path to contribute, since these seem key aspects.

In T172068#3533036, @Pginer-WMF wrote:

In T172068#3529986, @LilyOfTheWest wrote:

@Pginer-WMF we in Wiki Loves Monuments international team want to upgrade the look, feel, and usability of our external website http://www.wikilovesmonuments.org/ (and potentially move it to Github as a static site so national organizers can fork and reuse it more easily).

I'm wondering if you or one of the other designers have some time to spend with us to provide a set of design or mockups?

I'm happy to help.

\o/ This is great. Thank you! :)

Having more details on the target audience would be very helpful. I'm assuming the site targets photographers (amateur and professional) that don't necessarily know about Wikimedia Commons.

That's one audience. Here are the three categories people that can go to the website:

• People who love photography/monuments - We should showcase all the great photos from previous years. This is probably the biggest potential audience for the blog, and people we should consider converting into participants and/or coordinators.
• Competition participants - How do you submit your photo for Wiki Loves Monuments?
• Competition coordinators/orgainzers - How do you start and run Wiki Loves Monuments in your country?

From a quick look to the site, I think it makes sense to improve the motivation aspects (encouraging to participate) and streamlining the path to contribute, since these seem key aspects.

Yes, and I'm happy to help with content. If you think it's helpful to talk about it over hangout, please ping me at
lilyofthewest.wikimedia@gmail.com. I'll be around all weekend, in case that's an option for you.

In T172068#3535257, @LilyOfTheWest wrote:

That's one audience. Here are the three categories people that can go to the website:

• People who love photography/monuments - We should showcase all the great photos from previous years. This is probably the biggest potential audience for the blog, and people we should consider converting into participants and/or coordinators.
• Competition participants - How do you submit your photo for Wiki Loves Monuments?
• Competition coordinators/orgainzers - How do you start and run Wiki Loves Monuments in your country?

This audience analysis and prioritisation is very useful. I made an initial exploration to capture some ideas for the home page: provide the required functionality at the level of prominence needed for each user group, and make the pictures of monuments more prominent:

• Show a big prominent image that changes over time.
• A clear call to action to join the contest (plus a smaller one for organisers)
• Feature relevant images (I selected "previous winners" but other relevant subsets may work) next to the blog entries (I labelled them as "stories" to connect them better with their purpose which I guessed was to share relevant stories related to the contest).

Treat the below mockups as a strawman for you to point what you think may or may not work and iterate:

I also created a phone version to illustrate how the modules can be reorganised on small screens:

@Pginer-WMF As noted by the heart you've already received, these are really beautiful. :) Thank you for working on this. We have some thoughts, questions, comments for you below:

• Re the deadline for this: Since the launch of WLM is on Sep. 1, we decided to push the deadline for the new design/experience implementation to some time in the first two weeks of December when we announce the international winners' results. That's a major event for us, a lot of eyes will be on the website, and giving the new design to the community for next year, for their forking, is a nice way to close this year's campaign. :) More on the latter below.

• It would be great to have your designs for three types of pages: the main page (which you have already provided), a text page (suppose we click on one of the stories, how does the new page look like?), and a gallery page (a page where you can see collections of photos, for example the top 15 winners of 2017, the winning photos in the past year's that are taken at night, top 10 photos from Italy, etc.)

• btw, if you give us mock ups for a gallery page, Slaporte says they will use it in our jury tool, Montage, too. The tool will have a feature which would allow the jury coordinator to "publish" the results in which case the results will become publicly available and can be surfaced in a nice gallery. :)

• Is there a way to make WLM more visible in the pages? For example, by using the logo somewhere visible on the pages? The website can help us with the branding of WLM as well.

• We want to be able to somehow empower the user of the website to go and find their national competition among many competitions that are taking place in each year's contest. We don't have a good sense of how this can be done on the website. Right now, people are sent to Participating countries page in Commons but that's not ideal.

• We want local competitions to be able to use the design of our website and yet, we want the international team's website to look slightly different from the local ones. Can you keep this in mind and at some point propose a theme for local countries that is different enough but not too different? (it can be change in color, font size, etc.)

• If many countries follow the new design, it would be nice to have a place where we unify all the national and international contests. A place where people can go to see the international effort as an umbrella, and many national efforts.

• And one question: can you give us the css files eventually as well, or should we figure out resources for creating those ourselves?

Thanks again for working on this. We are getting super excited about the prospect of having this new look for Wiki Loves Monuments website. :)

In T172068#3568808, @LilyOfTheWest wrote:

@Pginer-WMF As noted by the heart you've already received, these are really beautiful. :) Thank you for working on this. We have some thoughts, questions, comments for you below:

• Re the deadline for this: Since the launch of WLM is on Sep. 1, we decided to push the deadline for the new design/experience implementation to some time in the first two weeks of December when we announce the international winners' results. That's a major event for us, a lot of eyes will be on the website, and giving the new design to the community for next year, for their forking, is a nice way to close this year's campaign. :) More on the latter below.

Sounds good to me.

• It would be great to have your designs for three types of pages: the main page (which you have already provided), a text page (suppose we click on one of the stories, how does the new page look like?), and a gallery page (a page where you can see collections of photos, for example the top 15 winners of 2017, the winning photos in the past year's that are taken at night, top 10 photos from Italy, etc.)

Here are some mockups for the different page types, and some notes:

Main page

• I added a "locations" area to indicate that the contest is happening in different places. We can use that to (a) communicate that the contest happens in lots of places (e..g, showing a map) or (b) try to help an interested user to find the local competition (e.g., a list of nearby contests or a map centered around the current location can work). I'll look more into this later based on the comments below.

Text page

• Is not clear to me which is the role of the comments. In the current blog, I've seen some comments but I've find no way to provide them.

Gallery

• I tried to provide an immersive experience with the option to have an overview of the different images.
• Regarding the gallery, I think it could make sense to order images by location or date, in which case the thumbnails could be grouped and show a label for people to view monuments of the same country/city together. However, I don't know if there may be other/more relevant needs for organising the images.
• In general I'm not sure about which is the weight that the connection between the image of a monument, the information of the monument and the location of it should have (does it make sense to explore the informatin geographically? Do we expect users to jump and read a lot of information about the monument?).
• Similarly, it is not clear which uses we want to encourage for the images (download? share? both?)

• btw, if you give us mock ups for a gallery page, Slaporte says they will use it in our jury tool, Montage, too. The tool will have a feature which would allow the jury coordinator to "publish" the results in which case the results will become publicly available and can be surfaced in a nice gallery. :)

• Is there a way to make WLM more visible in the pages? For example, by using the logo somewhere visible on the pages? The website can help us with the branding of WLM as well.

I've been playing a bit with the idea of the Wiki Loves Monuments brand. I tried to represent the concept of Monuments with a M styled as a classical doric column. The goal is to be able to use the mark in a more flexible way (adjusting it for different editions and locations in the page). Here is the exploration and a quick animation I made as an example:

• We want to be able to somehow empower the user of the website to go and find their national competition among many competitions that are taking place in each year's contest. We don't have a good sense of how this can be done on the website. Right now, people are sent to Participating countries page in Commons but that's not ideal.

I'll take a look to this.

• We want local competitions to be able to use the design of our website and yet, we want the international team's website to look slightly different from the local ones. Can you keep this in mind and at some point propose a theme for local countries that is different enough but not too different? (it can be change in color, font size, etc.)

Makes sense. I'll explore some variants.

• If many countries follow the new design, it would be nice to have a place where we unify all the national and international contests. A place where people can go to see the international effort as an umbrella, and many national efforts.

Isn't that place this one? What would be missing?

• And one question: can you give us the css files eventually as well, or should we figure out resources for creating those ourselves?

I'm trying to follow the design styleguide, so aspects such as the color palette should be captured there. I provide some specific details in case of doubt and review the site to suggest adjustments, but I don't think I'll have bandwidth to generate final CSS specs.

Thanks again for working on this. We are getting super excited about the prospect of having this new look for Wiki Loves Monuments website. :)

It's definitely both a fun and relevant project, so I' happy to help!

I made some updates to integrate the logo on the different views:

Home	Mobile	Mobile (scrolled)

Content

Gallery	Gallery (expanded)

To give more prominence to the brand, in addition to the more distinctive logo in the mockups above, we can use the compact version as part of the loading transition for the main image:

For adapting the template to specific contests, adjusting the primary color and using local images may work to provide a distinctive look while still being aligned with the general design. An example for Greece below:

In T172068#3610357, @Pginer-WMF wrote:

Here are some mockups for the different page types, and some notes:

Gallery

• Regarding the gallery, I think it could make sense to order images by location or date, in which case the thumbnails could be grouped and show a label for people to view monuments of the same country/city together. However, I don't know if there may be other/more relevant needs for organising the images.

One of the ways images can be organized which is relevant to our context is the winning order. There are at least two types of images that can benefit from this kind of organizing images:

• Nominations by national competitions: Each national competition can nominate up to 10 photos to the international team to compete at the international level. Some countries announce an ordering when they announce their nominations. (2017's nominations by national competition)
• International contest will announce the top 15 photos as the winners and these photos have an order. (2016 top 15 winners)

• In general I'm not sure about which is the weight that the connection between the image of a monument, the information of the monument and the location of it should have (does it make sense to explore the informatin geographically? Do we expect users to jump and read a lot of information about the monument?).

This is a good question and I think we should do some user study to understand this. We have some guesses, mostly based on our own usage of the photos (which may not be representative of our audience), that is:

• The user will want to enjoy the beauty of the photo and enjoy that experience.
• They want to also know which monument has been captured, which city, and which country the monument is in (being able to point to a map is ideal, but that's a longer term goal, imo.)
• On our end, we want to make sure the name of the photographer and the license is shown as well.

If we have to guess: I would order the photo, information about the monument captured in the photo, and the photographer and license information weights in decreasing order.

• Similarly, it is not clear which uses we want to encourage for the images (download? share? both?)

To start, I'd recommend we encourage downloading only, and we come back to the share option later. Sharing the whole gallery page can be fine, sharing specific photos on social media, however, requires getting permission from the photographers. While the viewers can go ahead and share even if we don't offer a share option, we may not want to encourage it by making it easier for them.

• Is there a way to make WLM more visible in the pages? For example, by using the logo somewhere visible on the pages? The website can help us with the branding of WLM as well.

I've been playing a bit with the idea of the Wiki Loves Monuments brand. I tried to represent the concept of Monuments with a M styled as a classical doric column. The goal is to be able to use the mark in a more flexible way (adjusting it for different editions and locations in the page). Here is the exploration and a quick animation I made as an example:

These are really neat. :) One question: can you see a way for us to keep the WLM logo somehow more visible? There are a few reasons we may want to keep the logo untouched for now and have it visible in the blog. One is that the logo itself is language independent (though the monument shown in the logo is not universal:). The other is that brand changes will have to be done in tighter coordination with local organizers as things may have to be updated on their end as well. (I understand that not using the logo on the website doesn't mean the brand has changed necessarily.:)

• If many countries follow the new design, it would be nice to have a place where we unify all the national and international contests. A place where people can go to see the international effort as an umbrella, and many national efforts.

Isn't that place this one? What would be missing?

Yes, this place should be on the international website, but I'm not sure if we should aim for having it more visual or not. For example, I was thinking we can have a page with the map of the world where every national competition will take up part of the map and if the user clicks on the map, they will be taken to the national competition website. (I'm making up the idea of the map, just to give you a sense of what kind of unifying place we had in mind.)

In T172068#3610357, @Pginer-WMF wrote:

@Pginer-WMF , could you share raw versions of the revised branding you made? It would be helpful to have a version with inverted colors and a version with transparent background. I'm putting together a blog template based on your designs (using the Wikimedia UI Style Guide as a base). Thanks for all your work on this!

In T172068#3982185, @Slaporte wrote:

In T172068#3610357, @Pginer-WMF wrote:

@Pginer-WMF , could you share raw versions of the revised branding you made? It would be helpful to have a version with inverted colors and a version with transparent background. I'm putting together a blog template based on your designs (using the Wikimedia UI Style Guide as a base). Thanks for all your work on this!

Great. I made some exports in transparent background PNG in two sizes (1x and 2x) and SVG. Let me know if these work or anything else is needed.

WLM Compact in dark

WLM Compact light

WLM Full dark

WLM Full light

Exactly what I wanted. Thank you!

@Pginer-WMF Could you pixel-optimize (snap-to-pixel) the SVG logos? And also the .gif animation in white?

As much as I love it, I have to say that the two iconic landmarks are probably a bit to Western (Europe) culture references.

@Slaporte Initial commit can be found at https://github.com/Volker-E/wikilovesmonuments_2018

In T172068#4590237, @Volker_E wrote:

@Pginer-WMF Could you pixel-optimize (snap-to-pixel) the SVG logos?

Sure. Here are the adjusted versions:

WLM Compact dark:

WLM Compact light:

WLM Full dark:

WLM Full light:

Let me know if you find any area for further adjustment.

In T172068#4590237, @Volker_E wrote:

And also the .gif animation in white?

As much as I love it, I have to say that the two iconic landmarks are probably a bit to Western (Europe) culture references.

I have updated the animations. Here are the different versions:

WLM Animation dark

WLM Animation light

@Pginer-WMF @Slaporte The GIFs are ~60 kB which will not be (fully) visible as loading animation in the background of the header image in normal loading process.
I'd advice to think about alternative places to show the animation and use stills of the first two or even three motives randomly for the header background for performant loading process. I'll provide a patch with latter for now and we can revisit as soon as you can see it in test/production.

In T172068#4628524, @Volker_E wrote:

@Pginer-WMF @Slaporte The GIFs are ~60 kB which will not be (fully) visible as loading animation in the background of the header image in normal loading process.
I'd advice to think about alternative places to show the animation and use stills of the first two or even three motives randomly for the header background for performant loading process. I'll provide a patch with latter for now and we can revisit as soon as you can see it in test/production.

I can also try to create a more lightweight gif. Which would be the ideal/reasonable file size to consider for this as a target from the performance budget perspective?

In T172068#4605218, @Pginer-WMF wrote:

WLM Full dark:

wlm-full-dark.svg13 KBDownload

[Sorry for a late comment.] Maybe it’s just me, but wouldn’t it make sense to put ‘M’ on a baseline with other text? Lowercase ‘m’ has similar serifs at the bottom and is on the line. Is there some specific reason for current treatment that I might not get? Stunning logo overall.

Hi all. I mentioned this in another post, mention it here as well for visibility. We need some time before finalizing logo changes. One requirement that we have for the logo is for it to be language independent (it's better not to have letters in it). With this, I would expect the current visual to be something fun that we can use on the blog or in some of our communications, but let's please keep the current WLM photo on the blog until we have more time to discuss things in details.

@Pginer-WMF , @Volker_E: Thank you very much for the conversations last week. We discussed the options we have for the logo in the international team and here is how we would like to proceed with the logo and the blog.

• We would like to keep the current WLM logo. However, Pau recommended that if we go down this path, we ask you to make the current logo compatible with WikimediaUI Style Guide. This can mean making the logo two-dimensional, and you may want to make other changes to it. @Pginer-WMF: is this something you can help us with?
• We would like the current logo (after update and alignment with WikimediaUI Style Guide) to be shown on wikilovesmonuments.org. Pau mentioned that there are likely ways to do this without having to do a major redesign which would be great.

I'd appreciate if you let me know:

• The timeline that you think is reasonable to set aside to bring the new blog to life. :) We will have the international winner announcements (barring anything unexpected in the international jury) around December 15. It would be great to have the new blog up then, when we manage to bring more eyes to the blog. Is this possible on your end, @Volker_E ?
• To simplify the process for you, on our end we chose one point of contact about the blog and that's myself for now. Please make sure you cc me in all your communications about the blog if they're not here.

We are looking forward to working with you to have the updated blog up. This has been in the making for long and we can't wait to have it out there with your help. Thank you for your time.

Please let us know if you have any question or comment. Thanks!

@Effeietsanders @m.hekmat @Slaporte FYI.

In T172068#4762738, @LilyOfTheWest wrote:

@Pginer-WMF , @Volker_E: Thank you very much for the conversations last week. We discussed the options we have for the logo in the international team and here is how we would like to proceed with the logo and the blog.

• We would like to keep the current WLM logo. However, Pau recommended that if we go down this path, we ask you to make the current logo compatible with WikimediaUI Style Guide. This can mean making the logo two-dimensional, and you may want to make other changes to it. @Pginer-WMF: is this something you can help us with?

Yes. The idea is to simplify the shapes of the logo. I created an initial version:

Here there are some examples on how the logo can be combined with the wordmark:

@Pginer-WMF I think that is a great alternative and still provides ability for playful applications like your original proposal. Only the third combination with the heart doesn't work in my opinion. One minor remark, in smaller sizes like 48 x 48px the pinnacle cutouts might get too small to see, so an iteration on such small size with increased pinnacles seems useful.
Compare size of

In T172068#4762738, @LilyOfTheWest wrote:

• The timeline that you think is reasonable to set aside to bring the new blog to life. :) We will have the international winner announcements (barring anything unexpected in the international jury) around December 15. It would be great to have the new blog up then, when we manage to bring more eyes to the blog. Is this possible on your end, @Volker_E ?

That's a short amount of time, still we could probably make it happen. The decision process needs to be sped up for it and we're agreeing to focus on an MVP only – orienting on what @Slaporte and myself have laid out:

Minimal (MVP)

1. Replicating the basic page types of the existing site
   • front page
   • blog post page (with banner and support for images)
   • content page with lead banner
2. Responsive support for desktop, tablet, and mobile https://phabricator.wikimedia.org/T172068
3. HTTPS only https://phabricator.wikimedia.org/T177179

Minimal +

4. Features:
   • Keep the "subscribe to blog via email"
   • Twitter stream
   • user comment widgets (that still needs definition, also who is able to register, and no unregistered comments, correct?!)
5. Photo gallery
6. Review performance, and no regressions

Above should preferably go into a different task, if needed.

• To simplify the process for you, on our end we chose one point of contact about the blog and that's myself for now. Please make sure you cc me in all your communications about the blog if they're not here.

From my experience, you should be the point of contact who _has to_ reply, but the others should chime in if they are knowing on a topic and are available for a faster first response.

@Effeietsanders @m.hekmat @Slaporte FYI.

Hi @Pginer-WMF. Thanks for the logo recommendations. We did one pass over them and here is our feedback.

In T172068#4765358, @Pginer-WMF wrote:

The team is going behind the following design:

You can find the (almost) compilation of the team's feedback below:

• We like this one because it keeps the main components of the old logo but simplifies it by dropping the 3D component and updating the font. It also remains easy for local adaptation depending on the needs of different countries.
• We like that the new monument looks like a puzzle. it brings, very subtly, some component of Wikipedia logo and the wiki concept with it.
• The cultural bias of Monument represented by a fort/castle remains but that's not something we can give you good recommendation on how to improve without changing the logo significantly, which we decided not to do.
• Now is a good time to change the font of the text to a more modern one. We are open to your recommendations, something along the lines of San Serif can work.
• Part of the team likes the fact that in the current logo, the puzzle structure steps outside of the circle. We understand that it may be hard to depict that without adding another color (which we ideally want to avoid). If you have ideas about how to change F27268265 in that sense, we're open to it.
• The logo may look better with some slight perspective. It does not need to be as strong as the current version of the logo, but making it skewed slightly (like you're looking up at it, or seeing it a slight distance) would give it more personality and subtle distinction as opposed to squared (like you're looking straight ahead).
• Related to the above two points: In the current logo for Wiki Loves Monuments, the fortress bridges the inside of the circle with the outside world by not being fully enclosed in it and it would be great to be able to show that.
• Below are some more nuanced feedback about the fortress itself. We haven't got a chance to discuss the details of them within the team, but I share them nevertheless for you to get a sense of what we're thinking about:
  • the 'gate' (lower circle) could be a little more like a gate, a semicircle that doesn't get narrower at the bottom.
  • the 'gate' could be a bit larger
  • the same for the 'ears': Right now the circle seems to continue a little too long, the connection is narrower than what I see in the original.
  • the top squares, would it make sense to make them, like the original, slightly non-rectangular? If you look closely, the bottom of the rectangles seems narrower than the top.

We are looking forward to hearing back from you.

@Slaporte @JeanFred @Lokal_Profil @m.hekmat @Effeietsanders FYI.

@LilyOfTheWest As @Pginer-WMF is occupied in continuous work on the main quarterly goal, can we proceed with the logo above for the time being and iterate over it as soon as possible, but probably after relaunch (I need to touch it twice, but given the little time left, it's the only way forward)? Is this fine for you?

In T172068#4766188, @Volker_E wrote:

In T172068#4762738, @LilyOfTheWest wrote:

• The timeline that you think is reasonable to set aside to bring the new blog to life. :) We will have the international winner announcements (barring anything unexpected in the international jury) around December 15. It would be great to have the new blog up then, when we manage to bring more eyes to the blog. Is this possible on your end, @Volker_E ?

That's a short amount of time, still we could probably make it happen. The decision process needs to be sped up for it and we're agreeing to focus on an MVP only – orienting on what @Slaporte and myself have laid out:

Minimal (MVP)

1. Replicating the basic page types of the existing site
   • front page
   • blog post page (with banner and support for images)
   • content page with lead banner
2. Responsive support for desktop, tablet, and mobile https://phabricator.wikimedia.org/T172068
3. HTTPS only https://phabricator.wikimedia.org/T177179

Let's go with this. If you can make it happen before December 20, 2018 (;), that'd be amazing.

Minimal +

4. Features:
   • Keep the "subscribe to blog via email"
   • Twitter stream
   • user comment widgets (that still needs definition, also who is able to register, and no unregistered comments, correct?!)
5. Photo gallery
6. Review performance, and no regressions

Yup. sounds good. :)

Above should preferably go into a different task, if needed.

• To simplify the process for you, on our end we chose one point of contact about the blog and that's myself for now. Please make sure you cc me in all your communications about the blog if they're not here.

From my experience, you should be the point of contact who _has to_ reply, but the others should chime in if they are knowing on a topic and are available for a faster first response.

We discussed this in person, for archive happiness here: agreed. My comment was about big/strategic/directional decisions the team as a whole has to make. Once those decisions are made, and we're clear who's responsible on our end for what, you should feel free to directly work with them. :) As an example, Stephen is in charge of the backend for this project.

@Effeietsanders @m.hekmat @Slaporte FYI.

In T172068#4793892, @Volker_E wrote:

@LilyOfTheWest As @Pginer-WMF is occupied in continuous work on the main quarterly goal, can we proceed with the logo above for the time being and iterate over it as soon as possible, but probably after relaunch (I need to touch it twice, but given the little time left, it's the only way forward)? Is this fine for you?

@Volker_E when would be the next time we can come back to the logo? If it's early January, or over the holidays, it's fine. If it's a few months from now, I need to check back with the team. :)

In T172068#4825804, @LilyOfTheWest wrote:

@Volker_E when would be the next time we can come back to the logo? If it's early January, or over the holidays, it's fine. If it's a few months from now, I

need to check back with the team. :)
Referring to @Pginer-WMF to begin with for first response.

This open task is tagged with Wiki-Loves-Monuments 2018 which was two years ago. If this task was/is resolved, then please update the task status. If this task was not resolved but is still valid, then please update the project tags to include at least one active project tag, so this task could be found when looking at that other project. (Without reaction, this task might get declined at some point.) Thanks a lot!

Removing Wiki-Loves-Monuments 2018 tag as that was two years ago; adding general Wiki-Loves-Monuments tag.