TASK: Platform (ex-Product) page - new blocks

[oksks]

What needs to be done?
Hi Kevin!
Our current platform page on the web is a bit too "listy" - there's so many lists, that it's hard for visitors to grasp what the platform is really about. We'd like to redesign a few lists to have a bit of variety.

Here are examples of blocks we'd like to have:

A block with 4-7 tabs and related images for illustation:

A list of logos (once we have them collected):

FAQ block:

A single quote from a user/client (assuming we don't have a design like that yet, do we?) -
Two options, please: one WITH a logo or avatar, and one without, as not everyone agrees to use their photo, but might be okay with logo, or no visuals at all:

Location
https://citizenos.com/platform

Deadline
Morning of Sept 22

[oksks]

FYI @BeccaMelhuish + @MeelikaH, @kevincrepin confirmed the deadline for next Friday :)

[kevincrepin]

Since the content isn't yet 100% set, let's review once it's there and maybe recolour some of these sections if needed.

Desktop: https://www.figma.com/proto/eHBSunqUv10fMcWmiEEXiv/Website?page-id=0%3A2160&type=design&node-id=3733-14271&viewport=-8278%2C-792%2C0.25&t=Z4FxlnsLW5MTW2l0-1&scaling=scale-down&starting-point-node-id=3123%3A18305&mode=design

Tablet: https://www.figma.com/proto/eHBSunqUv10fMcWmiEEXiv/Website?page-id=0%3A2160&type=design&node-id=3747-13379&viewport=-8278%2C-792%2C0.25&t=POSN0JY6U73irAue-1&scaling=scale-down&starting-point-node-id=3123%3A18305&mode=design

Mobile: https://www.figma.com/proto/eHBSunqUv10fMcWmiEEXiv/Website?page-id=0%3A2160&type=design&node-id=3747-13929&viewport=-8278%2C-792%2C0.25&t=NkqaE0u6W4Ov6ccu-1&scaling=scale-down&starting-point-node-id=3123%3A18305&mode=design

[devosama1]

https://citizenos.com/wp-admin/post.php?post=7062&action=elementor work in progress

[oksks]

Thanks @kevincrepin! Looks amazing )))
@BeccaMelhuish and @MeelikaH, please review and add your comments. :)
@devosama1, please hold off ANY work until we have all signed the designs off and assigned the ticket to you, as it's a WIP still. Thanks!

[BeccaMelhuish]

@kevincrepin looks great! :D

A few minor things from me (with agreement from @oksks and @MeelikaH, we discussed on Slack):

1. Just a little balance issue with the tabs (to my eyes anyway). I see we have the tabs to the left when we have less, as in 'News' (which looks fine), but I feel like when they reach almost fully across (like this) they should be equally spaced?

2. For me this quote mark looks unbalanced when there is one "hidden" and one "out in the open. Is it possible to have them always either both tucked behind the text, or both not?
3. For the same bit, could we also have a design for when we want to add the organisation name as well (not just name and role), and also the organisation's logo?

4. Could we have these as plus and minuses, rather than up and down arrows?

Understood that design for the tabs about the features on tablet and mobile isn't finished yet, so won't feed back on that 'til ready :)

Thank you!

[kevincrepin]

Thanks for feedback! Few comments from my side:

1. @devosama1 can comment on this but I think it's easier if we have one logic because in different languages it might also differ in length. Kinda hard to set a rule for it I think...

2. They both have the same logic applied, but the last line just doesn't have enough words :) But what we can do is take both out of the text box entirely, for example.

3. Do I understand correctly that when organisation is included we would have both person photo + organization logo?

4. Sure, but let's do "+" and "x" then, because that is also already used (mobile project detail page "quick info" & "testimonial"

• You can feedback on the tabs on tablet and mobile, it's the same component as in news page.

[oksks]

Btw @devosama1, when you add templates from these blocks to the template page, could you pls also create one that has a reversed image-text relation, for us? 🙏 Thank you!

[BeccaMelhuish]

@kevincrepin Thank you for the responses!

1. OK yes understood, let's just leave it as it is then
2. OK yes let's take them both out of the box then, then it should always look good regardless of the text length :)
3. Yes both photo and logo I think. (@MeelikaH please correct me if you wanted otherwise)
4. Would you be able to send a link/screenshot to that bit? I'm struggling to track it down

Will come back about the tabs shortly!

(Oks is away for a couple of weeks holiday, so I'm covering taking this forward in her absence)

[MeelikaH]

@BeccaMelhuish and @kevincrepin the idea regarding logo and photo was to have the option to have:

1. Quote + name, role & photo
2. Quote + name, role & logo
3. Quote + name, role, logo & photo

In this case, I'd suggest the layout where with all details, profile photo is on the left, quote next to it and under quote, below, on the right, there's a small logo, not too big. The name and role of the person could be under the photo, I guess, but let's see what looks best for design.

It's because sometimes people will not feel comfortable being presented with their own photo. Sometimes they can't use the logo. Would be good to figure our design solutions that look nice in any of the cases and then just use the suitable template :) Hope it clarifies the need.

[BeccaMelhuish]

Super, thanks for clarifying @MeelikaH!
What about organisation name though, we'll sometimes want to include that too right?

[kevincrepin]

Sorry @MeelikaH , I didn't quite get the layout suggestion :) but this one also works I would say:

[kevincrepin]

@BeccaMelhuish Abour nr 4, you can check it here: https://www.figma.com/proto/eHBSunqUv10fMcWmiEEXiv/Website?page-id=0%3A2160&type=design&node-id=3123-16811&viewport=-15562%2C-1653%2C0.5&t=WMh0b6izbbNEW30Y-1&scaling=scale-down&starting-point-node-id=3123%3A18305&mode=design

[BeccaMelhuish]

@kevincrepin for me the quote looks great with this example!
Though I'm wondering how it would look with things that don't fit so nicely into this template. Like for example, with a longer role and organisation name (e.g. "Head of Partnerships and Community at The Citizen OS Foundation Indonesia" or something like that.) Would we put it onto a second line? And with a long thin logo, as many are. I feel like most logos that aren't quite so simple and recognisable would get lost in the little circle?

For 4, train wifi won't load that Figma link right now but thank you - I'll check it soon!

[BeccaMelhuish]

@kevincrepin @devosama1 @MeelikaH, for the tabs feedback, I've made this separate issue, as it's a web-wide thing for consideration, and I think we can go ahead with the rest of this (once finalised) while this is under discussion :)

[kevincrepin]

Good point @BeccaMelhuish , I made some updates in Figma: https://www.figma.com/file/eHBSunqUv10fMcWmiEEXiv/Website?type=design&node-id=3733%3A14271&mode=design&t=otuzEs50XY7fxihq-1

[devosama1]

@BeccaMelhuish @MeelikaH Do let me know when can i move ahed with this designs. Do share the exact links of design that i can use to finish parts that needed :)

[BeccaMelhuish]

@devosama1 Here's a summary of where we are :)

You can go ahead with the designs in Kevin's latest Figma link,
However:

• Please don't yet build the designs for the tabs on tablet or mobile, as these are still under discussion. (Please do build them for desktop though).
• Please make us an additional block of tabs for desktop with an inverted text-image relationship, as per Oks's request above. This isn't in the design but should be a simple swap?
• We still need a couple of different design layouts for the quotes from Kevin, but you can go ahead with the two he has designed in the Figma file. We we need those two layouts, plus the two others requested below.

Let me know if anything here is unclear? :)

@kevincrepin thank you for the new quote layout! I think this is good for "3. Quote + name, role, logo & photo", so from Meelika's list above we now just need:

1. Quote + name, role & photo
2. Quote + name, role & logo

[kevincrepin]

Added additional layouts for the other quote types: https://www.figma.com/file/eHBSunqUv10fMcWmiEEXiv/Website?type=design&node-id=3733%3A14271&mode=design&t=2BRQ8Qozt2XmZ7RM-1

[BeccaMelhuish]

Thank you @kevincrepin! Looks good to me. So in that case @devosama1 all the quotes are ready now too, it's just the tabs section on tablet/mobile that isn't yet (but is getting there - will confirm that too soon) :)

[BeccaMelhuish]

@devosama1 another update for you :)

The final missing part of the design (how the tabs will look on mobile) has now been agreed in this thread. Kevin will update the design for this page, but in case you want to check it already, it will look like this:

3.2 Mobile: https://www.figma.com/proto/eHBSunqUv10fMcWmiEEXiv/Website?page-id=3813%3A13690&type=design&node-id=3872-16221&viewport=-2679%2C-1752%2C1&t=CkXsw6x08ukbFtv1-1&scaling=scale-down&starting-point-node-id=3872%3A16221&show-proto-sidebar=1&mode=design

@kevincrepin Please let Osama know here when you've updated the Platform page Figma, thanks so much!

And Osama, so sorry this doesn't leave you much time - between travels and sickness it took a while to finalise, but hope not too late.

[BeccaMelhuish]

@devosama1 Kevin has updated it now, so everything here is good to go :)

https://www.figma.com/file/eHBSunqUv10fMcWmiEEXiv/Website?type=design&node-id=3733%3A14271&mode=design&t=HhO9PzqPqw3nshoK-1

[BeccaMelhuish]

@devosama1 Have had a look over and it's looking great thank you! A few minor tweaks/queries here:

The first quote in the design has no photo, could you remove it and realign the text?

I'm wondering what happens if we need to change the number of tabs (either adding 1 so there is 8, or removing some. Is this a simple thing for Oks to do? (Currently seems likely we will have 8 tabs, but the content is still very much work in progress).

For the reverse layout tabs, we'll want one block where all the tabs are left-side text, and then a second block of tabs where they're all right-side text. Is this easy for Oksana to do with what you've made here, or would you have time to create the two different blocks?

For the tabs on mobile, could the tab title be a bit bolder, the body text a bit darker, and the photo above the text not below? Design versus developed below :)

[BeccaMelhuish]

Also, when I preview it on all sizes of screen it shows a bit of both (desktop and mobile versions) - just two mobile-view boxes, and then the desktop tabs chunk. Should it be working in preview correctly? So all the boxes showing for tablet and mobile sized screens, and only the desktop tabs chunk for desktop window?

Oh, actually sometimes it's different, and just shows 2 boxes on mobile (but sometimes the desktop tabs too):