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